米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
#
私は開発者ではないので専門用語の使い方がわからず、文章が変ですがご容赦を。