検索
連載

Aptana Jaxerで解決するAjaxのSEO対策とは?パターンとライブラリで作るAjaxおいしいレシピ(6)(1/4 ページ)

PC用表示 関連情報
Share
Tweet
LINE
Hatena

今回はAjaxの問題点であるSMO、SEOへの対応

 今回はAjaxの「SMO」対応、「SEO」(Search Engine Optimization、検索エンジン最適化)対応について取り上げます。SEOについてはご存じの方も多いかと思いますが、SMOについてはあらかじめ簡単に説明しておきます。

 「SMO」とは、ソーシャルメディア最適化(Social Media Optimization)のことです。ブログ掲示板SNS上などで自分たちが作成したWebサイトについて言及してもらうことで、認知度や評判を高める施策のことを指します。

Ajaxの“問題点”とは?

 Ajaxを使ったWebページでは、画面遷移をすることなく画面内の一部のみを書き換えることで、スムーズなサイト閲覧を実現します。ですが、特別な処置をしなければ、次のような問題点を抱えてしまいます。

  • SMOの実現が難しい
    画面の状態が切り替わってもURLが変わらない。このため、そのURLを掲示板やSNSなどで紹介しても、そのURLを開いたほかのユーザーには、画面が切り替わる前の状態が表示されてしまう
  • SEOの実現が難しい
    JavaScriptでページを動的に変化させるため、JavaScriptが実行できないクローラは、各状態ごとのページにアクセスさせることができない。このため、検索エンジンにキャッシュされない

 最初は、これらの問題に対して特別な処置を行っていない、ごく基本的なサンプルを紹介します。その後、ステップ2、3、4と3段階にサンプルに修正を加えていきながらSMO、SEO対応の仕方を紹介していきますサンプルのライセンスはGPL 2となります

ステップ1:SMO、SEO対応を行っていないサンプル

 まずは、SMO、SEO対応を行う前のサンプルを見ていきます。このサンプルは、タブA、B、Cを押すことによって、ページの一部に別々のHTMLファイルが動的に表示されるものです。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

サンプル1(タブA、B、Cを押して見てください。拡大表示はこちら

全体を表示するHTMLファイル

 最初に、全体を表示するHTMLファイルを見てみましょう。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

 次の4つのファイルを<script>タグを使って読み込んでいます。

  1. javascripts/lib/prototype.jsprototype.js
    バージョン1.6.0.2
  2. javascripts/app/controllers/ajaxrecipe/smo_seo_sample_controller.js
    コントローラー
  3. javascripts/app/models/ajaxrecipe/smo_seo_sample.js
    モデル
  4. javascripts/app/views/ajaxrecipe/smo_seo_sample_view.js
    ビュー

編集部注:prototype.jsについて詳しく知りたい読者は、連載第2回の「prototype.jsでYouTubeをインクリメンタルサーチ」をご参照ください。

 これまでの連載のように、自分で作成したプログラムを以下のようなMVCで別のコードに分けて作成しています。

  • Mモデル
    コアロジックを記述する
  • Vビュー
    表示変更処理を記述する
  • Cコントローラー
    イベントハンドラの定義や、設定に関する記述をする

 タブが3つあり、以下のように、「tab」というクラスが割り振られ、idには、「tab-a」「tab-b」「tab-c」などが割り振られています。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

コントローラー

 次に、コントローラーを見てみましょう。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

 最初に、コンストラクタが呼ばれます。コンストラクタの中では、DOMがロードされたらonLoadDOMメソッドが呼ばれるようにハンドラを設定しています。イベントハンドラの設定は、prototype.jsのobserveメソッドを使っています。

 このメソッドの中では、以下のタブのクリックイベントに、onClickTabメソッドを設定しています。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

 また、デフォルトのタブを開くために、onClickTabを引数なしで呼び出しています。

 onClickTabメソッドではまず、開くべきタブを判定します。イベントオブジェクトがある場合は、Eventインスタンスのelementメソッドで取得します。

 もし、イベントオブジェクトがない場合(=デフォルトのタブを開くためにonLoadDOMメソッドから呼び出されるケース)は、最初の要素を開くべきタブとして設定します。そして、ビューのchangeTabメソッドにその要素のIDを渡して、タブを開くように依頼します。

ビュー

 ビューのコードは次のようになります。ビューでは、与えられたIDのタブをアクティブ化し、それまでアクティブ化されていたタブは非アクティブ化します。また、アクティブ化されたタブのコンテンツをモデルから取得し、その内容で更新をします。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

モデル

 モデルのコードは次のようになります。モデルはアクティブ化された指定タブのコンテンツをXMLHttpRequestで取得し、それを返します。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

 いよいよ次ページからは、ステップ1のサンプルにSMO対応、SEO対応を行う方法について解説していきます。

Copyright © ITmedia, Inc. All Rights Reserved.

       | 次のページへ
ページトップに戻る