Google、AJAXサイトを検索エンジンに登録する方法を解説

GoogleがAJAXサイトを検索エンジンに登録するためのベストプラクティスを解説。ステートフルURLを書き換えること、JavaScript実行後のHTMLスナップショットを用意すること、など。#!~のステートフルURLにクローラがアクセスしたとき、_escaped_fragment_ に書き換えてリクエストするとのこと。


公開日時:2009年10月08日 20:28

米Googleは2009年10月7日、公式サイトにおいてAJAXを使ったウェブサイトを検索エンジンに登録するための技術的方法について解説を行った。


AJAX(エイジャックス)は、ページ遷移なしにサーバとデータ通信を行うことで、動的なWebアプリケーションの開発が可能になる。しかし、いまブラウザで表示している内容と対になるURLが存在しないために個々のコンテンツをクロールできないこと、また、仮にステートフルURLを用意してもJavaScriptを実行できないためコンテンツを読み取ることができないといった理由から、検索エンジン対策という観点からはAJAXをベースにしたウェブサイト構築は推奨できるものではなかった。

しかし、Googleによると69%のウェブコンテンツが動的に作成されているなど、近年のウェブテクノロジーのトレンドから、検索エンジン対策上の理由で技術利用が避けられることは好ましいとはいえない。

今回、GoogleはこうしたAJAXの問題を解決するための技術的アプローチを解説している。ここで紹介された方法は、AJAXサイトに必要最低限の変更を加えること、ユーザと検索エンジンが同じコンテンツを見ること(クローキングの回避)、検索結果上にAJAXのダイレクトURLを表示すること、などが考慮されている。

AJAXサイトをクロール可能にするために行うことは大きく分けて次の2つ。 (1) URLの#(シャープ)以降のステートフルURLの書き換えによりクローラブルにすること、(2) headless browserを利用してサーバ側でJavaScriptを実行し、クローラに提供するためのHTMLコード(コンテンツ)を用意すること、だ。

ステートフルURLは直接それをたたくといつも同じコンテンツを閲覧できる。そこで、GoogleはこのURLにトークンを追加することを提案している。たとえば http://example.com/page?query#state というURLがあった場合、"!"(エクスクラメーションマーク、感嘆符)を追加して、http://example.com/page?query#!state とする。検索結果にも http://example.com/page?query#!state のリンクが掲載される。

次に、ヘッドレスブラウザ(headless browser)を利用して、ウェブサーバ上でJavaScriptを実行した後のコンテンツを用意する。ヘッドレスブラウザとは、ウェブページにアクセスするが人間(ユーザ)が見るためではなく、そのコンテンツを他のプログラムに受け渡すなどの目的で利用されるブラウザ。先に述べたようにGoogleは特定状態を表すURLに直接アクセスしてもJavaScriptを実行できないため、同ブラウザによってコンテンツのスナップショットを作成・用意して、コンテンツを取得できるようにする。

このスナップショットは、クローラがアクセスした時に提示する一方で、従来利用していたURLに(ユーザ)がアクセスしたときは、ヘッドレスブラウザを経由せずに通信を行う必要がある。そこで、検索エンジンがクロールするときは、URLの#以降の状態を指定する部分に工夫を加える必要がある。Googleは、たとえば先のURL http://example.com/page?query#!stateであれば、 "_escaped_fragment_" というトークンを利用して http://example.com/page?query&_escaped_fragment_=state のように書き換えることを提案している。

まとめると、http://example.com/dictionary.html#AJAX のようなステートフルURLは、http://example.com/dictionary.html#!AJAX と書き換えを行う。すると、クローラは http://example.com/dictionary.html?_escaped_fragment_=AJAX としてインデックス可能になる。検索結果にはユーザ向けの http://example.com/dictionary.html#!AJAX というリンクが現れるため、ステートごとのコンテンツにダイレクトにアクセスしつつ、クローラも同じコンテンツを参照できるようになる、ということだ。

この実装方法はまだ検討段階のもので、ユーザからのフィードバックを受け付けている。

A proposal for making AJAX crawlable [Google Webmaster Central Blog]
http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html


#
私は開発者ではないので専門用語の使い方がわからず、文章が変ですがご容赦を。





記事カテゴリ:SEO(検索エンジン最適化)


他の検索・SEO 関連の記事
新刊:ネットショップSEO 2014発売されました(2014年5月)
Google モバイルファーストインデックスのやさしい解説 (1) 何が発表されたの?
Google、モバイルファーストインデックスを公式発表、SEO への影響は?
スマホの音声認識、米国ユーザーの70%が満足、テキスト入力が3倍速いとの調査結果も
Yahoo! 検索、検索結果右側のテキスト広告を廃止か
[訂正版] Google、モバイルファーストインデックスを導入、モバイルサイトを基準とした評価へ
Google News、事実確認できた記事に Fact check ラベルを表示
[訂正] Google、モバイルファーストインデックスへ移行する計画を発表
ペンギンアップデートはリンク発信元ページを評価する(Google、Gary Illyes氏)
Google、進化したAI 採用の「Google Assitant」を発表
Bing App、AMPサポートを開始
「SEMリサーチ」トップへ戻る




免責事項:SEMリサーチは、本記事中で触れている企業、商品、サービスの全て(情報)について、有用性、適合性、正確性、安全性、最新性、真実性に関する一切の保証をしておりません。各自の判断でご利用下さい。