AJAXで実装されたアプリをクロールする方法

AJAXとは

AJAXはAsynchronous JavaScript and XML (非同期のJavaScriptとXML）の頭文字をとったものであり、開発者がXML, HTML, CSS, JavaScriptなどを使ってインタラクティブなサイトを構築するために使う技術を指しています。
AJAXを使うことで、ユーザーがサイトを再度読み込まなくても、イベントがトリガーされたときにコンテンツを更新することが可能になります。AJAXサイトはユーザーに素晴らしいUXを提供する一方で、検索エンジンに対してサーバー側での問題を引き起こす可能性があります。
AJAXサイトが抱える主な問題：

• 各ページに固有のURLを生成する代わりに、#を作成する
• ページがロードされるとページ上のコンテンツが動的に生成される

上記の問題はともに検索エンジンのクロールとインデックスを妨げる原因となります。これらの問題に対処するため、GoogleはAJAXクロールスキームを考案し、検索エンジンがこれらの種類のサイトをクロールしてインデックスできるようにしました。

AJAXのクロールスキームはどのように機能するか

AJAXクロールスキームが実装されているサイトは、検索エンジンに動的ページのHTMLスナップショットを提供します。ユーザーにはページの動的で”クリーンなURL”を表示し、検索エンジンの方が”粗悪なURL”を処理します。
例えば以下のようになります。

• クリーンなURL：https://www.ajaxexample.com/#!hello
• 粗悪なURL：https://www.ajaxexample.com/?_escaped_fragment_=hello

HTMLスナップショットの生成方法やAJAXクロールスキームの概要については、 Googleのオフィシャルガイドをご覧ください。

LumarでAJAXのクロールを設定するには

Lumarでの設定では以下のことを確実に行ってください。

1. AJAXサイトがAJAXクロールスキームに合致している
2. Lumarプロジェクトの詳細設定が更新されている

AJAXクロールスキームのサポート

Lumarでは以下のようなAJAXクロールスキームをAJAXサイトに実装することを推奨しております。このスキームであることを表す次の２つの方法があります。

1. AJAXサイトにハッシュバング (#!）がある。
2. AJAXサイトがURL内にハッシュバング (#!）を含まない。

以下に各設定の詳細とそれがLumarにもたらす影響について記載致します。

AJAXサイトがハッシュバングURL (#!)を使っている

URLにハッシュバングがあるAJAXサイトをLumarにクロールさせるには、以下のような要件が必要となります。

1. AJAXクロールスキームがハッシュバング (#!）を使う”クリーンな”URLに入っている
2. サイトのサーバーが”粗悪な”URLを処理する設定となっている
3. ”粗悪な”URLがページのHTMLスナップショットを含んでいる

これらの要件が満たされていない場合、LumarはAJAXサイトをクロールできません。

ハッシュバングURL (#!）のないAJAXサイト

Lumarが、URLにハッシュバングを含まないAJAXサイトをクロールするには、以下の条件が必要となります。

1. AJAXクロールスキームがmeta fragmentタグを使う”クリーンな”URLに含まれている
2. ”_escape_fragment_ ”のパラメーターが”クリーンな”URLの最後に追加されている
3. ”粗悪な”URLがページのHTMLスナップショットを含んでいる

meta fragmentタグや_escape_fragment_パラメーターはAJAXが使われているページのみに設置してください。すべてのコンテンツにAJAXが利用されていない限り、サイトのすべてのページに追加する必要はありません。

AJAXサイトをクロールするようにLumarの設定を更新する

検索エンジンにサイトがAJAXクロールスキームに則っていることを適切に伝えるため、そのサイトが更新されたら、Lumarの詳細設定を更新してください。

1. まず、[全URLから#フラグメントを削除]ボックスのチェックを外してください。これによりLumarにハッシュURLをクロールさせることができます。
2. 次にURLリライト設定で、以下３つのルールを作成してください。
   

   オリジナル	テスト	オプション
   #!	?_escaped_fragment_=	変更なし
   ^(?!.*?_escaped_fragment_=)(.*?.*)	$1&_escaped_fragment_=	変更なし
   ^(?!.*?_escaped_fragment_=)(.*)	42	$1?_escaped_fragment_=

3. 該当するプロジェクトの詳細設定の下部にある[保存]をクリックしてリライト設定を保存してください。
4. 新しいプロジェクト設定が機能してるか確認するためにテストクロールを実行してください。

URLリライトのルールはどのように機能するのか

最初のリライトルールはすべてのURLで、”#!”を” _escaped_fragment_=”に置換することです。以下がその例となります。
クリーンなURL：www.example.com/document#!resource_1
リライトされたURL：www.example.com/document?_escaped_fragment_=resource_1
これによりクローラーがそのページのHTMLスナップショットへアクセスできるようになります。
リライトに関する第２のルールは、パラメーターを含むURLの終わりにエスケープフラグメントを追加することです。例えば、以下のような方法です。
クリーンなURL：www.example.com/document/?resource_1
リライトされたURL：www.example.com/document/?resource_1&_escaped_fragment_=
リライト第３のルールは、パラメータを含まないURLの終わりにエスケープフラグメントを追加することです。例えば、以下のような方法です。
クリーンなURL：www.example.com/document/resource_1
リライトされたURL：www.example.com/document/resource_1?_escaped_fragment_=
これらのルールは既に”?_escaped_fragment_”を含むサイトのリンクも許可します。この場合には、上記のような設定を行なわないようにしてください。

よくある質問

なぜGoogleはAJAXクロールスキームのサポートを終了したのでしょうか？

Googleは2018年夏にハッシュバング (#!) を持つURLのクロールのサポートを公式に発表しました。この背景には、GoogleボットはWebレンダリングサービス（WRS）を使ってAJAXサイトをレンダリングできるようになったことがあります。

他の検索エンジンはAJAXクロールスキームをサポートしていますか？

このガイドを作成した時点で、BingとYandexはまだAJAXクロールスキームをサポートしています。いずれもAJAXクロールスキームのサポートを停止する計画を発表しておりません。

LumarがAJAXクロールスキームをサポートする期間はどのくらいですか？

Lumarには現在この機能を廃止する計画はございません。最新のアップデート情報については、弊社ブログをご確認ください。

LumarがAJAXサイトをクロールしない場合はどうすれば良いでしょうか？

もしLumarがサイトをクロールしない場合、以下をご確認ください。なお、これはAJAXのクロール設定が行なわれている場合にも当てはまります。

• 粗悪な”URLがrobots.txtでブロックされている
• HTTPステータスコード200の原因が”粗悪な”URLとなっている
• ”粗悪な”URLに他のページへのリンクが含まれており、ナビゲーションされている

また、 ブロックされたクロールの問題を解決する方法や失敗したウェブサイのクロールを修正する方法

AJAXのクロールに関するフィードバック

AJAXクロールに関してご不明な点があれば、お気軽にお問合わせください。