Ajaxコンテンツのクロール、インデックスには一意のURLを割り当てる。スナップショット作成は次善策

[レベル: 上級]

これまで提供してきた、Ajaxクロールの推奨構成のサポートを終了したことをGoogleは先週アナウンスしました。

この発表にともなうAjaxコンテンツの構成方法について、英語版のオフィスアワーで質問が出ました。
その質問に対する、GoogleのJohn Mueller(ジョン・ミューラー)氏の回答を紹介します。

#!のURLを使いたくないし、スナップショットも作っていない。どうすればいい?

質問は次のようなものでした。

(Ajaxコンテンツで)#!付きのURLを使いたくないし、スナップショットの作成もしていない。
どうすべきか?

ミューラー氏はこのように回答します。

まず最初のステップとして、個々のコンテンツに対してそれぞれURLが必要だ。
たとえば、JavaScriptでナビゲートするサイトでは、HTML5のpushStateを使って#!のURLをクリーンなURLに移行できる。

ユニークなURLを割り当てることがかなり大きなステップで、初めにやるべきことだ。

その次のステップとしてHTMLスナップショットの検討がある。

Fetch as Googleでレンダリング取得したり、ソーシャルネットワークで共有したりして、スナップショットなしでも正しいコンテンツが思いどおりに表示されているかを入念にチェックする。
正しく表示されていないならスナップショットの作成が必要かもしれない。

コンテンツを正しく見てもらうためにスナップショットが必要なら、Googlebotもそれをきちんと見てくれる。

ユニークなURLが必要

基本的に、サイト側で何もしなくてもほとんどの場合は、GooglebotがAjaxコンテンツを現在は取得できるようになりました。
ただし、Ajaxによって生成されたコンテンツごとにユニークなURLが必要です。

GoogleはURL単位でページを識別します。
URLが変わることなしにコンテンツが変わってしまったら、ブラウザでの表示には何の問題もなかったとしても、どのコンテンツをそのURLでクロール、インデックスしていいかGooglebotにはわかりません(おそらく、デフォルトで表示されているコンテンツが対象になるはず)。

したがって、コンテンツごとに重複しないURLを割り当てる必要があります。
https://example.com/hoge#aj1https://example.com/hoge#aj2 のように、たとえ、「#(あるいは#!)」を使ったURLでも構いません。
各コンテンツに対してユニークなURLを設定しなければならないことを覚えておきましょう。

質問者は「#!」を使いたくないと言っていたので、ミューラー氏はHTML5で使えるpushStateの利用を勧めました。

(History APIの)PushStateの利用は公式アナウンスでも触れられていましたね。

HTML5 の History API を使用することで、Google のシステムだけでなく幅広いブラウザが履歴にアクセスできるようにすることが可能です。

ちなみに同じような質問が日本語の公式ヘルプフォーラムにも挙がってそれに答えた直後に、ミューラー氏の説明を聞きました。
正しいアドバイスができていたことになります。

スナップショットは次善策

AjaxコンテンツをGooglebotが直接取得できるようになったので、通常はスナップショットの事前準備はもはや不要です。

ですが、Googlebotが正常にAjaxコンテンツを取得できなかったとしたら、プリレンダリングしたスナップショットの作成を考慮してもいいとミューラー氏はアドバイスしました。
スナップショットをGooglebotは認識してくれます。

とはいえ、将来的なことを考えると、スナップショットでAjaxコンテンツを取得させるよりは、Ajaxコンテンツがそのままでクロール、インデックスされるように構成したほうが(実装に多少手間はかかったとしても)いいだろうと僕は思います。
スナップショットはあくまでも次善策です。

JavaScriptやJavaScriptフレームワークで生成したコンテンツをGoogleは適切に処理してくれるようになりました。
以前と比べると、検索エンジンのためにだけにやらなければならない作業が随分と減りました。
しかしこの記事で取り上げたように、気を付けなければならない点が依然としてあることには注意が必要です。

コンテンツが正しく取得されているかどうかを知るために、Fetch as Googleのレンダリング機能を上手に使いこなすことがひとつのコツかなと僕は思います。