• お役立ち

GoogleはAjaxで読み込むコンテンツを解釈してくれるのか?

  • このエントリーをはてなブックマークに追加
  • LINEで送る

WEBサイトの制作時、お客様から、

全ページ共通で表示するナビゲーション領域などを外部ファイル化し、JavaScriptで読みこむようにして欲しいのだが、どうだろうか?

といったご相談をお受けすることがあります。一昔前であれば、「検索エンジンはJavaScriptを解釈することができないので、SEOの観点からお勧めできない」とお答えしていました。果たして現在はどうでしょうか?結論から言うと、
onLoadイベントで実行する分には、外部ファイル化したコンテンツをAjaxで動的に読み込むことは概ね問題は無い
ということになりそうです。

Googleのクローラーはモダンブラウザ同様のレンダリングが可能

この問題はAjaxという技術が台頭してきた2005年頃から存在していました。2009年にはGoogleがAJAX crawling schemeという文書を公開し、製作者側やサーバ側がいくつかの特殊な設定を行うことで、Ajaxを利用したコンテンツがGoogleにインデックスされるようになりました。

しかし、クローリングの技術が向上し、JavaScriptも正しく解釈できるようになったことから、2015年10月にはその AJAX crawling scheme を廃止する旨の発表がなされました。

Deprecating our AJAX crawling scheme

この中で、動的なコンテンツへの対応について以下のように述べられています。

原文:
Today, as long as you’re not blocking Googlebot from crawling your JavaScript or CSS files, we are generally able to render and understand your web pages like modern browsers.
要約:
今では、敢えてJSやCSSのファイルをGooglebotがクロールしないようにブロックしていない限り、一般的なモダンブラウザ同様にページを描画し、理解することができる。

当たり前ですが、robots.txtなどで明示的にJSやCSSのクローリングを禁止していると、Google側でJSの処理を実行することはできません。そうしたことをしていなければ、なんと「一般的なモダンブラウザ同様」のレンダリングができるんだそうです。素晴らしい。

Googleが解釈可能なJavaScriptイベント

Googleが解釈可能なJavaScriptイベントについては、GoogleのGary Illey氏がGoogle+で以下のように発言しています。

原文:
We don’t “click” during rendering so any click event will be ignored, but we do execute JavaScript that is triggered by for example onLoad events.
原文:
(Googlebotは)ページをレンダリングする際に何も「クリック」しない。従って、クリックイベント(によって発生する動的なコンテンツ)は無視する。しかし、onLoadイベントなどがトリガーとなるようなJavaScriptについては実行する。

クリックやらスクロールといった、物理的なユーザーアクションに応じて実行されるようなJavaSciptは解釈されないということのようです。ですので、実質的にはonLoad(jQueryで言うなら $(document).ready())イベントが対象になる、と思っていいのではないでしょうか。

Googleにとっての見え方

Googleが実際にどのようにWEBページを解釈しているのか(そのWEBページがGoogleにとってどのように見えているのか)については、Googleウェブマスターツールの「Fetch as Google」というツールで確認することができます。

Fetch as Google

※利用するにはGoogleウェブマスターツールへのサイト登録・設定が必要です。

検証事例

JavaScriptで動的に生成したコンテンツが実際にインデックスされるのか?その点については、株式会社Core様の2015年6月のブログ記事で検証結果が掲載されています。とても詳しく、かつわかりやすくまとめられていますので、ぜひご一読ください。

【SEO】GooglebotによるJavaScriptの実行&読み込みを検証 | Core Marketing Blog

こちらの記事では、

  • jQuery.load()を使ってページAの中にページBを非同期で読み込んで表示する
  • ページBはリクエストを受けてから2秒の遅延の後にレスポンスを返す(=ページAの中にページBが表示されるまでには必ず遅延が発生する)

…という条件を用意して検証を行った結果、

  • ページBのデータも取得してインデックスされる
  • ページBが個別でインデックスされることはない(無駄な重複は発生しない)
  • ページBのコンテンツはページAの一部として認識される

…という結果が得られたと結論付けられています。

他のガイドラインとの整合性

Googleでは「アクセシビリティに対応した AJAX サイトの設計」という文書を発表しています。この文書の中に以下の様な記述があります。

Googlebot は、HTML リンクの構造を理解することには長けていますが、ナビゲーションに JavaScript を使用しているサイトの検出は苦手です。

この一文を読む限り「JavaScriptを使ったナビゲーションはNG」ともとれます。ただ、この文書、かなり古いものであるように見受けられます。文書自体の発表日(改訂日)は記載が無いのですが、文書中で触れられているJeremy Keith氏の文書が発表されたのが2006年であることを考えると、2006-2009年頃に当時の状況を踏まえて作成されたものでしょう。2015年に「一般的なモダンブラウザ同様にページを描画することができるようになった」と述べられている以上、この一文については無視して良いのではないかと思われます。

また、これも発表日(改訂日)は不明ですが、「ウェブマスター向けガイドライン(品質に関するガイドライン)」という文書があります。

この中で、サイト作成時に従うべき一般的なガイドラインとして「検出可能な別のページからのリンクでアクセスできる」ことが挙げられています。Fetch as Googleで見て表示されているのであれば、まさに「検出可能なリンク」ですので、このガイドラインには準拠していることになると判断して良いのではないでしょうか。

他の検索エンジンは?

Googleは良くても他の検索エンジンでインデックスされないなら意味が無いのでは?

と思う方もいらっしゃるでしょう。

StatCounterによると、2014-2015年の日本の検索エンジンシェア(デスクトップ+モバイル合算)は次のようになっています。


Source: StatCounter Global Stats – Search Engine Market Share

しかし、現在のYahoo!JAPANの検索エンジンのアルゴリズムはGoogle製です。ということは、実質97.03%がGoogleということになりますので、「Googleでインデックスされる≒ほぼ全てのユーザーの検索結果に反映される」といえます。

懸念点

良いことづくしだ!ナビゲーションはじゃんじゃん外部JS化しよう!

…いえいえ、必ずしもそうとは言えません。例えば、以下の様な懸念点が挙げられます。

表示の遅延

例えばonLoadでナビゲーションを読み込むような場合、ページの読み込み開始からナビゲーションが表示されるまでにラグが発生します。ページのHTMLデータ量が多かったりサーバのレスポンスが悪かったりすると、ユーザーが体感できるくらいのラグになる可能性もあります。

負荷への影響

細かい話ですが、例えばナビゲーションを外部ファイル化した場合、しない場合と比較して少なくともサーバリクエストが1回分増加します。僅かですが、増加は増加ということで…。

JavaScript非対応ブラウザ

視覚障害者向けのテキストブラウザなど、JavaScriptの解釈ができないブラウザというのもまだ一部には存在しています。そうしたブラウザのことも考慮するのであれば、この方法は採用できないでしょう。

まとめ

個人的には、ことナビゲーションについては、表示遅延の問題など含め、HTMLソースにデータとして含まれている状態が「ベスト」であるとは思います。

とは言え、Googleのクローラーの性能向上によって、JavaScriptの処理結果を正しくレンダリングできるようになったということで、サイトの規模や更新頻度、開発にかけられる工数・費用などによっては、ナビゲーション(など)の外部JS化という手法も、企業サイトなどで採用しても問題ない状態になったと言えるかと思います。

「懸念点」の項で挙げた「付加への影響」や「JavaScript非対応ブラウザ」の問題は、現実的にはかなり限定されたものであり、よほど特殊な状況がない限りは問題になることもあまり無いでしょう。

弊社でも、ケースによってはこうした手法もどんどんご提案させていただこうかと思います。

星虹思械BRICOLEUR

関連コンテンツ