AJAX クロール: ウェブマスターおよびデベロッパー向けガイド
概要
検索結果に表示したいコンテンツで AJAX アプリケーションを実行している場合、Google が新しく作成したプロセスを実装すると、Google によるサイトのクロールとインデックス登録が可能になります。このプロセスは、Google 以外の検索エンジンでもうまく機能する可能性があります。AJAX コンテンツはブラウザによって動的に生成されるためにクロールで検出することができず、検索エンジンで AJAX アプリケーションを処理することは困難でした。この問題に対応するメソッドも既にありますが、このメソッドでコンテンツを最新の状態に保つには、手動で定期的に保守を行う必要があります。
一方、以下のスキームでは、検索エンジンでスケーラブルにコンテンツをクロールし、インデックスに登録できます。また、ウェブマスターが継続的に手動で保守を行わなくても常に最新のコンテンツがインデックスに登録されます。AJAX アプリケーションでこのスキームを実装すれば、コンテンツを検索結果に表示できるようになります。このスキームは次のように機能します:
- サイトで AJAX クロール スキームを実装する。
- 各 AJAX URL の HTML スナップショットをサーバーで提供する。これが、ユーザー（ブラウザ）に表示されるコンテンツになります。AJAX URL は、ハッシュ フラグメントを含む URL です。たとえば、
www.example.com/index.html#mystateでは、#mystateがハッシュ フラグメントになります。HTML スナップショットは、JavaScript の実行後にページに表示されるすべてのコンテンツです。 - 検索エンジンでは、HTML スナップショットをインデックスに登録し、元の AJAX URL を検索結果に表示します。
これをうまく機能させるために、アプリケーションでは、特定のシンタックスで AJAX URL を記述する必要があります（これを「きれいな URL」と呼びます。その理由については後述のセクションをご覧ください）。検索エンジン クローラーは、このような「きれいな URL」を一時的に「汚い URL」に変換し、サイトのサーバーにリクエストします。「汚い URL」に対するリクエストは、通常のウェブページではなく HTML スナップショットをブラウザに返すようサーバーに指示します。クローラーでは、変換された「汚い URL」のコンテンツを取得すると、そのコンテンツをインデックスに登録し、元の「きれいな URL」を検索結果に表示します。つまり、ユーザーには、ハッシュ フラグメントを含む「きれいな URL」が常に表示されるということです。次の図は、このやり取りをまとめたものです:
詳しくは、AJAX クロールのよくある質問とデベロッパー向けドキュメントをご覧ください。
手順ガイド
1. サイトで AJAX クロール スキームがサポートされていることをクローラーに伝える
AJAX サイトをインデックスに登録する最初の手順では、サイトで AJAX クロール スキームがサポートされていることをクローラーに伝えます。このためには、ハッシュ フラグメント（URL の # 記号より後のすべての部分）で特別なトークンを使用します。ページ固有の状態を表すハッシュ フラグメントは、先頭に感嘆符を付ける必要があります。たとえば、AJAX アプリケーションに次のような URL が含まれているとします:
www.example.com/ajax.html#mystate
この場合は次のように指定します:
www.example.com/ajax.html#!mystate
このスキームを実装したサイトは、「クロールできる AJAX」と見なされます。つまり、サイトで HTML スナップショットを提供していれば、クローラーでアプリケーションのコンテンツを確認できるようになるということです。
_escaped_fragment_ を含む URL のリクエストを処理するようサーバーを設定する
たとえば、www.example.com/index.html#!mystate をインデックスに登録する場合について考えます。サーバー側では、この URL の HTML スナップショットをクローラーに提供し、クローラーがコンテンツを認識できるようにする必要があります。サーバーが通常のページと HTML スナップショットのどちらを返すかは、クローラーがリクエストする URL によって判断されます。クローラーでは、www.example.com/ajax.html#!mystate のような AJAX URL を、www.example.com/ajax.html?_escaped_fragment_=mystate のように一時的に変換します。Google では、前者を「きれいな URL」、後者を「汚い URL」と呼んでいます。
これが重要なのは、次の 2 つの理由によります:
- ハッシュ フラグメントは、仕様では、HTTP リクエストの一部としてサーバーに送信されません。つまり、クローラーは、URL
www.example.com/ajax.html#!mystateのコンテンツを何らかの方法でサーバーに要求する必要があります。 - 一方、サーバーでは、ブラウザで表示する通常のページではなく HTML スナップショットを返す必要があることを認識する必要があります。HTML スナップショットは、JavaScript の実行後にページに表示されるすべてのコンテンツです。サーバー側では、www.example.com/index.html#!mystate（元の URL）の HTML スナップショットをクローラーに返す必要があります。
注: クローラーでは、変換時にフラグメント内の文字の一部をエスケープします。元のフラグメントを取得するには、フラグメント内のすべての %XX テキストのエスケープを解除してください。たとえば、%26 は &、%20 はスペース、%23 は #、%25 は % です。
URL のエスケープを解除すると、クローラーがリクエストしているコンテンツが判明するため、HTML スナップショットを生成します。スナップショットを生成するには、いくつかの方法があります:
- JavaScript で生成されるコンテンツの数が多い場合は、HtmlUnit（英語）のようなヘッドレス ブラウザを使用して HTML スナップショットを取得します。代わりに crawljax（英語）や watij（英語）のようなツールを使用することもできます。
- コンテンツの大部分が PHP や ASP.NET のようなサーバー側の技術を使用して生成される場合は、ウェブページの既存コードの JavaScript 部分を、静的な HTML またはサーバー側で作成した HTML と置き換えます。
- ページの静的なバージョンをオフラインで作成することができます。たとえば、多くのアプリケーションはデータベースからコンテンツを取得し、ブラウザでレンダリングしていますが、代わりに AJAX URL ごとに HTML ページを作成できます。この方法は、Google の以前の Hijax 推奨事項と同様のものです。
一部のページにはハッシュ フラグメントがない場合があります。たとえば、ホームページを www.example.com#!home ではなく www.example.com にしたい場合がこれに該当します。そのため、Google では、ハッシュ フラグメントがないページのために、特別な対策を用意しています。
ハッシュ フラグメントがないページをインデックスに登録するには、ページの HTML の head 部分に特別なメタ タグを組み込みます。重要: この方法を使用するのは、Ajax コンテンツが含まれるページに限定してください。Ajax を使用しないページに対しては、この方法のメリットはなく、サイトと Google のサーバーへの負荷が増えるだけです。メタ タグの形式は次のとおりです:
<meta name="fragment" content="!">
このタグは、この URL の「汚い」バージョンをクロールする必要があることを示します。クローラーは、このやり取りごとに、きれいな URL を対応する汚い URL に一時的にマッピングします。つまり、<meta name="fragment" content="!"> をページ www.example.com に組み込むと、クローラーは一時的にこの URL を www.example.com?_escaped_fragment_= にマッピングし、その URL をサーバーにリクエストします。その後、サーバーでは、www.example.com に対応する HTML スナップショットを返します。
このメタ タグには、有効な content の値は "!" のみであるという、重要な制限事項があります。つまり、このメタ タグは、常に <meta name="fragment" content="!"> という形式にする必要があります。これは、ハッシュ フラグメントが空で、ページに AJAX コンテンツがあることを示します。
クローラーでは、サイトマップを使用して、クロールによる検出を補完します。サイトマップには、検索結果に表示する URL を指定します。多くの場合、http://example.com/ajax.html?_escaped_fragment_=foo=123 ではなく http://example.com/ajax.html#!foo=123 のように指定します。ただし、ホームページなど、#! を使用せずに検索結果に表示したいサイトのエントリ ページがある場合は、この形式は使用しません。たとえば、検索結果に http://example.com/ を表示したい場合、サイトマップでは http://example.com/ を指定し、<meta name="fragment" content="!"> をドキュメント ファイルの <head> に組み込みます。詳しくは、サイトマップに関する記事をご覧ください。