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

Adam Gent
Adam Gent

2016-10-11公開

AJAXで実装されたサイトをクロールするには、DeepCrawlのAJAXクロール機能を使ってサイトのリンクやコンテンツにアクセスできるようにする必要があります。これに関連してGoogleが2018年第2四半期の終わりにAJAXクロールのスキームの利用を終了しており、もしGoogleのクロールや動的コンテンツのインデックスに対してAJAXクロールを利用している場合には、これはもうサポートされていないことにご注意ください。JavaScriptサイトのクロールやインデックスについての詳細は、新しいGoogleディベロッパー資料をご確認ください。

このガイドでは、以下の点についてご説明します。

  1. AJAXとは?
  2. AJAXのクロールスキームはどのように機能するか
  3. DeepCrawlで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のオフィシャルガイドをご覧ください。

 

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

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

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

 

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

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

  1. まず、[全URLから#フラグメントを削除]ボックスのチェックを外してください。これによりDeepCrawlにハッシュURLをクロールさせることができます。
  2. 次にURLリライト設定で、以下3つのルールを作成してください。
    オリジナル テスト オプション
    #! ?_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スナップショットへアクセスできるようになります。

リライトに関する第2のルールは、パラメーターを含むURLの終わりにエスケープフラグメントを追加することです。例えば、以下のような方法です。

クリーンなURL:www.example.com/document/?resource_1

リライトされたURL:www.example.com/document/?resource_1&_escaped_fragment_=

リライト第3のルールは、パラメータを含まない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クロールスキームのサポートを停止する計画を発表しておりません。
DeepCrawlがAJAXクロールスキームをサポートする期間はどのくらいですか?
DeepCrawlには現在この機能を廃止する計画はございません。最新のアップデート情報については、弊社ブログをご確認ください。
DeepCrawlがAJAXサイトをクロールしない場合はどうすれば良いでしょうか?
もしDeepCrawlがサイトをクロールしない場合、以下をご確認ください。なお、これはAJAXのクロール設定が行なわれている場合にも当てはまります。

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

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

 

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

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

Author

Adam Gent
Adam Gent

業界で8年以上の経験を持つ、検索エンジン最適化(SEO)のプロフェッショナル。長年にわたり、中小企業からFTSE 100社に入るグローバルなハイストリートブランドまで、さまざまなクライアントを成功に導いてきた。

ご質問はありますか?

どのプランにするかご検討中の場合は、お問い合わせページからご連絡ください。ご質問があれば喜んでお答えします。

メッセージを送信する