
パターンとライブラリで作るAjaxおいしいレシピ(6)
Aptana Jaxerで解決するAjaxのSEO対策とは?
アークウェブ株式会社
志田 裕樹
2008/5/9
今回はAjaxの問題点であるSMO、SEOへの対応
- - PR -
今回は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ファイルが動的に表示されるものです。
| サンプル1(タブA、B、Cを押して見てください。拡大表示はこちら) |
■ 全体を表示するHTMLファイル
最初に、全体を表示するHTMLファイルを見てみましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
次の4つのファイルを<script>タグを使って読み込んでいます。
- javascripts/lib/prototype.js
prototype.js バージョン1.6.0.2 - javascripts/app/controllers/ajaxrecipe/smo_seo_sample_controller.js
コントローラー - javascripts/app/models/ajaxrecipe/smo_seo_sample.js
モデル - 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」などが割り振られています。
<a href="javascript:void(0)" class="tab" id="tab-a">タブA</a> |
■ コントローラー
次に、コントローラーを見てみましょう。
// @IT連載「Ajaxおいしいレシピ」用の名前空間オブジェクト |
最初に、コンストラクタが呼ばれます。コンストラクタの中では、DOMがロードされたらonLoadDOMメソッドが呼ばれるようにハンドラを設定しています。イベントハンドラの設定は、prototype.jsのobserveメソッドを使っています。
このメソッドの中では、以下のタブのクリックイベントに、onClickTabメソッドを設定しています。
<a href="javascript:void(0)" class="tab" id="tab-a">タブA</a> |
また、デフォルトのタブを開くために、onClickTabを引数なしで呼び出しています。
onClickTabメソッドではまず、開くべきタブを判定します。イベントオブジェクトがある場合は、Eventインスタンスのelementメソッドで取得します。
もし、イベントオブジェクトがない場合(=デフォルトのタブを開くためにonLoadDOMメソッドから呼び出されるケース)は、一番最初の要素を開くべきタブとして設定します。そして、ビューのchangeTabメソッドにその要素のIDを渡して、タブを開くように依頼します。
■ ビュー
ビューのコードは次のようになります。ビューでは、与えられたIDのタブをアクティブ化し、それまでアクティブ化されていたタブは非アクティブ化します。また、アクティブ化されたタブのコンテンツをモデルから取得し、その内容で更新をします。
ajaxrecipe.SmoSeoSampleView = { |
■ モデル
モデルのコードは次のようになります。モデルはアクティブ化された指定タブのコンテンツをXMLHttpRequestで取得し、それを返します。
ajaxrecipe.SmoSeoSample = { |
いよいよ次ページからは、ステップ1のサンプルにSMO対応、SEO対応を行う方法について解説していきます。
| 1-2-3-4 |
| INDEX | ||
| パターンとライブラリで作るAjaxおいしいレシピ(6) Aptana Jaxerで解決するAjaxのSEO対策とは? |
||
| Page1 今回はAjaxの問題点であるSMO、SEOへの対応 ステップ1:SMO、SEO対応を行っていないサンプル |
||
| Page2 ステップ2:SMO対応を行ったサンプル |
||
| Page3 ステップ3:SEO対応を行ったサンプル ステップ4:Aptana Jaxerを使ってSEO対応を行う |
||
| Page4 Hello Jaxer!から始めてみよう Aptana Jaxerを使ってSEO対応を行ったサンプルの解説 Aptana Jaxerの現状、今後に要注目 |
||
| リッチクライアント&帳票 全記事一覧へ |
ホワイトペーパー(TechTargetジャパン)
- いまさら聞けないTwitter超入門−@IT記事も対応なう (2010/2/4)
Twitterは最近話題のつぶやきツール。基本的な使い方から、iPhoneアプリの使い方、RTの解説、4人のご意見番の活用例や感想まで - HTML5は開発者側の都合。ユーザーには関係ない (2010/2/2)
3つのレンダリングエンジンを載せている“国産”ブラウザベンダは、HTML5やWeb/ブラウザの進化について何を語るのか - テキスト・フォント周りをキレイに見せるCSS、13選! (2010/1/29)
無数にあるCSSのプロパティを大まかに分類し、1つずつ紹介していく本連載。初回は、テキスト・フォント周りについて - OpenGL ESが大変な3Dアプリ開発を楽にするUnity (2010/1/27)
iPhoneゲーム開発に必須のOpenGL ES。そのコーディングに手こずっている方に有用なツールを紹介し簡単なサンプルを作成します
|
|
スキルアップ/キャリアアップ(JOB@IT)
スポンサーからのお知らせ
お勧め求人情報

**先週の人気講座ランキング**
〜CCNA編〜
| ◆ | 企業の仮想化に足りない“発想”とは? 仮想化運用管理のキモは意外なところに! New! |
| ◆ | 操作もマニュアルも分かりやすい! ユーザー視点で開発されたPC管理ツール New! |
| ◆ | 仮想化すればコストは削減できるか? 仮想化に必要な「3つの視点」を解説する |

| ◆ | セキュリティを知り尽くす上野氏が登壇! @ITメールソリューションLive! in Tokyo |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |
| ◆ | 世界に通用するストレージの作り方とは? 製品に込めた思いを富士通の開発者に聞く |

| ◆ | OSSで手間も時間も、障害も減った―― 「マピオンの事例」オープンソース活用法 |
| ◆ | 「ノートPCの持ち出し禁止」で大丈夫? 情報漏えいを防ぐ管理手法とインフラは? |
| ◆ | 1日の処理を1秒に――MySQLの達人が語る 「コスト削減」できるチューニング |

| ◆ | ドキュメント作成を自動化して、SEの作業 効率を大幅アップ! Visio 2007の魅力 |
| ◆ | 急速に広がるHyper-Vでのサーバ仮想化 そのベストプラクティスをデルが解説 |
| ◆ | @IT主催セミナーで語られた、「担当者に 求められるセキュリティ対策」をレポート |

| ◆ | @IT「Windows 7」 特設サイトオープン! 最新情報・移行ノウハウを公開しています |






