Ajaxコンテンツを検索エンジン(Google)にクロール・インデックスさせる方法

[対象: 上級]

Ajax利用したコンテンツをGoogleにクロール可能・インデックス可能にさせるための設定方法を今日は取り上げます。

すでにAjaxを理解している人向けなのと自分へのメモを兼ねているのでAjaxに対する細かな説明や用語解説は省きます。

「#」（ハッシュ）がURLに含まれている場合、#以下のURLをGoogleを含む検索エンジンはインデックスしません。

A. http://www.suzukikenichi.com/ajax.html#abc
B. http://www.suzukikenichi.com/ajax.html#xyz

上のAとBはどちらも、http://www.suzukikenichi.com/ajax.html というURLをクロールしてインデックスするだけです。
#付きのURLをインデックスすることはありません（終わりに補足説明あり）。

Ajaxでは、#が含まれたURLを生成することがあります。

これが何を意味するかというと、Ajaxを利用するとブラウザで表示しているコンテンツは変化するけれど#が付いたURLが割り当てられるため、検索エンジンは同じURL、つまり#なしのURLしかクロールしないのです。

AのURLもBのURLもブラウザでは個別のコンテンツを表示していても、検索エンジンは http://www.suzukikenichi.com/ajax.html だけをクロールしようとします。

そこで、GoogleはAjaxを利用したコンテンツをクロール・インデックスできるような仕組みを提案しました。

設定手順と処理プロセスを簡潔にまとめると次のようになります。

AjaxのURLで使っている「#」を「#!」に置き換える。 ※!（エクスクラメーションマーク）を付ける。
http://www.suzukikenichi.com/ajax.html#abc
⇒ http://www.suzukikenichi.com/ajax.html#!abc
「#!」が付いたURLを見つけると、Googleは「#!」を「?_escaped_fragment_=」に置き換えて、そのURLをサーバーにリクエストする。
http://www.suzukikenichi.com/ajax.html#!abc
⇒ http://www.suzukikenichi.com/ajax.html?_escaped_fragment_=abc
サーバー側で、「?_escaped_fragment_=」で置き換えられたURLの“HTMLスナップショット”を作成してクローラ（Googlebot）に返す。
クローラは、サーバーから返されたスナップショットを読み取りインデックスする。インデックス対象のURLはオリジナルの「#!」に戻す。
http://www.suzukikenichi.com/ajax.html?_escaped_fragment_=abc
⇒ http://www.suzukikenichi.com/ajax.html#!abc

#を#!に置き換えることが、最初の“ミソ”ですね。
「#!」がURLに含まれていることを見つけると、Googleは#!を「?_escaped_fragment_=」に置き換えたURLを取得しようとします。

（あなたが管理する）サーバーは、「?_escaped_fragment_=」が付いたURLのリクエストを受け取ったら、Ajaxを利用して生成した対応するコンテンツを作成してそれをクローラに返します。

サーバー側でAjaxを処理して作ったコンテンツが、“HTMLスナップショット”です。
本来ならクライアント（ブラウザ）側で処理することをサーバーが代わりにやってあげるわけですね。

HTMLスナップショットの作成方法はプラットフォームによって変わってくるし、僕は開発には詳しくないのでドキュメントを参照してください。

また、「#!」が付いたURLを“pretty URL”（きれいなURL）、「?_escaped_fragment_=」で置き換えられたURLを“ugly URL”（汚いURL）と呼びます。

Ajaxを利用したサイトが増えてきました。

何もしなくてもGoogleがAjaxコンテンツを適切にクロール、インデックスしてくれればいいのですが、現状はそうなっていません。

Googleからの検索アクセスを望むのであれば、Googleが定めた実装に従わないとせっかく作ったコンテンツを検索ユーザーに届けることできなくなってしまいます。

Ajaxサイトを運用しているとしたらドキュメントをよく読んで学んでください。

【補足1】
「#」は、Ajaxとは無関係のURLにも使われますね。

たとえば「#」でアンカーネーム（ネームアンカー）を指定すると、ページの中の指定した場所へジャンプさせることができます。

僕が連載するWeb担のコーナーは、それぞれのピックアップにアンカーネームを設定（正確にはidを指定）しているので、直接そのピックアップの先頭に誘導できます。

どちらも飛び先ページは同じですが、ページの中の着地点が違っていますね。

ブラウザはサーバーにリクエストするときは、「#」以下を取り除いたURLでリクエストします。
ページ全体のHTMLを取得して、「#」で指定された場所に連れていくのはページ全体のHTMLを受け取った後のブラウザの仕事です。

クローラもブラウザの一種ですから、「#」以下を取り去ったURLをサーバーにリクエストします。
これがAjaxだったら、「#」のないURLをサーバーは返しますからクローラが受け取るコンテンツはいつも同じということになってしまいますね。

なので、「#」を「#!」に変更させ、「#!」を発見したときは「?_escaped_fragment_=」に置き換えてリクエストして、対応するスナップショットを返させるという~~七面倒臭くて無理矢理感が漂う~~賢い実装をGoogleは提供したのです。

TwitterはAjaxを使っています。
よく見ると、TwitterのURLには「#!」が入っていることに気付きます。
Twitterの「#!」何なのだろう？と思っていた人は疑問が解けましたね。

【補足2】
HTML5でサポートされているpushStateという仕組みを使うと、Ajaxでも、URLを更新して履歴を残せるそうです。
GoogleのJohn Mueller氏に教えてもらいました。

ざっと概要を調べたくらいで、HTML5のpushStateがどういうものか僕にはほとんど分かりません。
詳しいことを説明した記事を書いてもらえたれたら参照先として紹介するのでお伝えください。