ブログ

AjaxなどでXHR(XMLHttpRequest)を使用する際のSEO上の注意点

AJAXとはAsynchronous JavaScript + XMLの略で、JavascriptとXMLを使用して非同期(Asynchronous)でページ内容を更新する仕組みのことで、この際XHRと呼ばれる仕組みが使われています。XHRとは、XMLHttpRequestの略で、JavascriptでHTTP通信を行うためのAPIのことです。
有名な使用例としては、Googleマップが挙げられ、ページ全体を更新することなく地図をスクロールすることが可能になっています。

XHRでは、XMLHttpRequestという名称に反して、やりとりされるファイルはXMLだけでなく、htmlやjsonなども含まれます。
現在のGoogleのクローラーはAJAX(もちろんXHRも)をサポートしていますが、SEOにおいて注意すべき点がないわけではありません。
この記事では、XHRのインデックスとクロールバジェットの問題についてご紹介します。

AJAXのインデックスの問題

まず、GoogleのクローラーがXHRを実行してインデックスできるかについて注意する必要があります。
特にイベントによって発行されるAJAXを実行できないことがあります。

検証のために、AJAXを使用したテストページを作成しました。
https://www.sakurasaku-labo.jp/samples/ajax_index/ajax_text.html

このページは5つのAJAXで構成されており、上から順に以下のようなイベントでJavascriptが実行され、特定のファイルからテキストを呼び出して表示します。

  1. ページが読み込まれた時
  2. スクロールした時
  3. ボタンをクリックした時
  4. ページ読み込みの5秒後
  5. ページ読み込みの10秒後

上記のページをサーチコンソールのURL検査ツールで調べると、次のようにレンダリングされました。

つまり、URL検査ツールでは、ページ読み込み時に実行される青枠部分のAJAX以外は実行されていないことがわかります。

一方、このページのインデックスリクエストを行い、インデックスされた結果の検索結果画面は以下のとおりでした。

インデックス時には、URL検査ツールの場合よりも待機時間が長いためか、5秒後に表示されるコンテンツもインデックスが確認されました。

上記はサーバーログからも確認されました。

インデックスのリクエストを行った後、Googleのロボットによりhtmlに2回アクセスが確認されています。
1回目がhtmlのクロールを行うファーストウェーブ(クローラー、Googlebot)で、2回目以降の青枠がJavascriptの実行を担うセカンドウェーブ(WRS、Caffeine)であると考えられます。
セカンドウェーブではhtmlだけでなくJavascriptによって読み込みを指示されたファイルにもアクセスされています。しかしログを見る限りでは、実行されたJavascriptは、読み込み時に実行されるもの(load1.php)と、5秒後に実行されるもの(load4.php)だけで、スクロールやボタンクリックや10秒の待ち時間を必要とするものは実行されなかったと考えられます。

以上のように、ページ内にAJAXによって読み込まれるコンテンツが含まれている場合には、適切に実行されてインデックスされるかどうかは注意しておく必要があります。

なお、AJAXによって呼び出されるコンテンツ(上記の例ではload1.phpなど)にもURLが発行されるため、Googleがその単体ファイルをインデックス対象としてしまう可能性がないわけではありません。
ただし、ファイル形式はhtmlではないなど閲覧には適さない形であることが多く、インデックスされる可能性は低いと考えられますが、大規模に使用する際は念のため、そのようなことが起きていないかどうかを確認することがおすすめです。

AJAXとクロールバジェットの問題

クロールバジェットとは、Googleがドメインごとに決めているクロール総量のことで、Googleはクロール過多によってサイトへの負荷をかけないよう、制限を設けています。

AJAXやXHRに関しては、実行時にクロールバジェットを消費することが知られています。以下は公式ブログの引用です。

Q: Do alternate URLs and embedded content count in the crawl budget?
A: Generally, any URL that Googlebot crawls will count towards a site’s crawl budget. Alternate URLs, like AMP or hreflang, as well as embedded content, such as CSS and JavaScript, including AJAX (i.e. XHR) calls, may have to be crawled and will consume a site’s crawl budget. Similarly, long redirect chains may have a negative effect on crawling.
What Crawl Budget Means for Googlebot – Official Google Webmaster Central Blog

ざっくり言うと、AJAX(すなわちXHR)だけでなく、AMPやhreflangなどのalternateに指定されたURLや、CSSなどもアクセスされるごとにクロールバジェットを消費するとのことです。

ただし、Googleは、大規模サイトでない限りは通常クロールバジェットを心配することがない、と発言しています。
上記のとおりクロールバジェットの消費要因はXHRだけではありませんので、AJAXをページあたり何度も呼び出して実行させるようなページを使用していない限りは、特に気にする必要はないものと考えられます。

まとめ

AJAXを使う際にSEOで最も注意すべき点は、Googleのクローラーが実行してインデックスできるかどうか、になります。特に実行のトリガーとなるイベントが何であるかは確認しておく必要があります。
たとえ実行できる場合でも、AJAXによって表示されるコンテンツがインデックスされるまでにはラグがあるなど、SEOと相性が悪い点もあるため、ページ内の重要なコンテンツについてはなるべくJavascriptを介さずに直接出力することがおすすめです。

◇この記事もおすすめ!
・SEO対策(検索エンジン最適化)とは~上位表示を実現する為のSEOとは?Googleの本質を理解し、自社サイトを強化する





■関連情報:サクラサクマーケティングのSEOコンサルティングサービス
中小・ベンチャー企業の売上をサポートするSEO対策低価格・高品質なSEOコンサルティング



無料資料ダウンロード

サービス資料ダウンロード

用語集

ソースコード集

お役立ちリンク集

お役立ちツール

カテゴリ一覧

タグクラウド

新着記事一覧

  1. 【検証!】ページスピードインサイト(Page Speed Insights)のスコア改善施策と結果を公開!使い方とまずやるべき施策を徹底解説!

    ページスピードインサイトは活用していますか? 2018年Googleはモバイル検索においてページの表示速度をランキングの要素として取り入れる、通称「スピードアップデート」を発表しました。そしてその速度をはかるツールがペー […]...

    1. ウェブマスターオフィスアワーまとめ(2019年6月25日)

      6月25日のウェブマスターオフィスアワーが行われました。Googleの金谷さんとあんなさんが回答した内容をまとめます。 ※具体例がなく、明確な回答ができなかった質問は除いています。 Q.しごと検索でbaseSalaryの […]...

      1. Googleが最重視するE-A-Tを高めるための対策

        E-A-Tとは、Expertise(専門性)、Authoritativeness(権威性)、Trustworthiness(信頼性)の頭文字を取ったもので、Googleが検索品質評価ガイドライン内で、ページ品質評価の最重 […]...

おすすめコンテンツ

  1. コンテンツマーケティングとは?特徴と事例、社内でできる方法を解説します

    ここ数年で急激にコンテンツマーケティングという言葉を聞くようになりました。しかし、「興味があるがまだ着手できていない」という人や、「そもそもどんなコンテンツを作ればいいのかわからない」、「社内で運用しているが成果がでない […]...

    1. SEO対策(検索エンジン最適化)とは~上位表示を実現する為のSEOとは?Googleの本質を理解し、自社サイトを強化する

      目次 1. SEO(Search Engine Optimization:検索エンジン最適化)とは 2. SEOの現在(検索エンジン最適化≒Google最適化) 3. Google Search Consoleの活用とS […]...

      1. SEOに強いコンテンツは回答性×網羅性×文字数×ユーザー体験

        目次 SEOに強いコンテンツとは回答性網羅性文字数ユーザー体験[回答性×網羅性×文字数×ユーザー体験]を考慮したSEOに強いコンテンツ制作お問い合わせフォーム SEOに強いコンテンツとは 検索エンジンで上位表示をさせるた […]...

最新情報を取得する

PAGE TOP