AJAXサイトをクローラブルにする - 検索エンジンフレンドリーなAJAX実装方法

文●渡辺隆広／SEMリサーチ

2010年03月05日 19時53分更新

米Googleが、AJAXベースのウェブサイトをコンテンツを検索エンジンに登録する方法についての、最新ドキュメントを公開しました。昨年10月に検討段階の実装方法が公式サイトで紹介されましたが、それのアップデート版になります。

最初におさらいをします。AJAX（エイジャックス）は、ページ遷移なしにサーバとデータ通信を行うことで、動的なWebアプリケーションの開発が可能です。しかし、いまブラウザで表示している内容と対になるURLが存在しないために、クローラが個々のコンテンツをクロールできないこと、また、仮にステートフルURLを用意しても（クローラは）JavaScriptを実行できないためコンテンツを読み取ることができないため、検索エンジンに登録することは困難な状況でした。

しかし、Googleによると69%のウェブコンテンツがJavaScriptなどで動的に作成されているなど、近年のウェブテクノロジーのトレンドになっています。検索エンジンのためにサイト構築技術が制限を受けるのも本末店頭な話です。Googleもこうしたウェブの変化に対応して、AJAXサイトのコンテンツを取得する解決策を考えてきました。AJAXが問題なくクロールできるようになれば、開発者も気兼ねなく多機能で便利なAJAXベースのサイトを開発できるようになります。

その解決案が今回のドキュメント「Making AJAX Applications Crawlable」です。

クローラブルなAJAXにするための解決策概要

最初に用語の定義をします。

◎　pretty AJAX URL： URLに#!フラグメントを持つURLが pretty (AJAX) URL です。
例）　www.example.com/ajax.html#!mystate

◎　ugly AJAX URL： pretty URL を変換して ?_escaped_fragment_ の文字列に変換したものが ugly (AJAX) URL です。
例）　www.example.com/ajax.html?_escaped_fragment_=mystate

全体の流れは次の(1)～(5)の通り。

(1) クローラが #! 形式の pretty URL を見つけます。
(2) クローラはこの形式のURLを"AJAX crawlable"なものと判断します。
(3) クローラは、pretty URL を ugly URL (_escaped_fragment_) に変換した上で、サーバにコンテンツをリクエストします
(4) サーバは、ugly URL 形式のリクエストを「クローラからのリクエストだ」と認識した上で、該当するコンテンツのHTMLスナップショットを作成して、クローラに返します。
(5) クローラは受け取ったHTMLを解析しますが、同時に URLを _escaped_fragment_ から原型となる #!mystate に戻してインデックスに格納します

ざっと概要を説明すると以上の通りです。

つまり、AJAXでリンクを張る時に、#mystate ではなく #!mystate のように "#!" フラグメントで記述すると、googlebotはこれを _escaped_fragment_ 形式に自動的に書き換えた上でサーバにリクエストするようになるわけです。したがって、サーバ側が _escaped_fragment_ 形式でリクエストを受けた時は、通常のページを返すのではなく、サーバ上でJavaScriptを実行した後の状態のページ（スナップショット）を作成して、クローラに返してあげれば、クローラはAJAX上のコンテンツもインデックスできるようになるというわけです。

開発者が対応すべきこと

開発者サイドで行うべきことは次の4つ。

1. AJAXのリンクは、#!で始まる形式のフラグメントにすること。#! を使うと、googlebot は "クロール可能なAJAX" と判断してくれます。

なお、#!形式のフラグメントを持つURLをクローラは _escaped_fragment_ に自動的に変換しますが、a要素などで _escaped_fragment_ の形式で張られたリンクはクロールされないので注意してください。pretty URL から ugly URL の変換はgooglbot で行います。親切心で最初から _escaped_fragment_ で書いてもクロールしてくれませんのでご注意を。

2. _escaped_fragment_ 形式でのリクエストがあった時に、サーバ上で該当コンテンツのスナップショットを作成すること。

スナップショットを作成するためには、たとえば HtmlUnit といったヘッドレスブラウザを利用する方法があります。あるいは、crawljax や watij.com も利用できます。もしコンテンツの大部分がPHPやASP.NETなどサーバサイド技術で生成されている場合は、そのコードはそのまま利用できますので、ウェブページのJavaScriptの部分を静的なHTMLあるいはサーバサイドで生成するHTMLに置き換えればOKです。または、AJAXのステートに対応したコンテンツを個別に作成して用意することもできます。

3. クローラが #!形式のフラグメントのURLを変換するときに、特定の文字列をエスケープします。オリジナルのフラグメントに戻せるように、%XX の全ての文字列をアンエスケープする必要があります。たとえば、%26は&に、%20はスペース、%23は#といった具合です。

4. _escaped_fragment_形式に変換されたURLを使用するのは、クローラだけです。したがって、HTMLスナップショットを作成する時には、ページ上部にリンクを設置して、何らかの理由で _escaped_fragment_ を辿ってきたユーザに、これがエラーであることを知らせるようにするといいでしょう。

クローラが閲覧するAJAXコンテンツを確認する方法

AJAXサイトのコンテンツを首尾よくGoogleに登録してもらうためには、クローラからのリクエストに応じて正しいステートのコンテンツのスナップショットを提供しなければいけません。googlebot が実際に受け取るコンテンツを確認するためには、"Fetch as Googlebot" を利用するか、あるいは、アウトプットを確認するための小さなアプリケーションを使ってテストする方法があります。

フラグメントを利用しないページの対処法

例えばAJAXサイトのトップページは、上記の説明に従えば www.example.com#!home となりますが、インデックスするURL は www.example.com としたい要望もあるはずです。この場合、ページの上部に次の特別なメタタグを記述します。

<meta name="fragment" content="!">

このタグは、ugly URLをクロールするように指示するためのMETAタグです。この記述があると、クローラは次のように処理します。まず、www.example.com にアクセスした時、URL を www.example.com?_escaped_fragment_= に変換してサーバにリクエストします。サーバ側はこのリクエストを受け取ったときに www.example.com のスナップショットを返せば、そのステートのコンテンツがインデックスされます。

AJAXクロール用にSitemapsをアップデートする

クローラがAJAXなページのURLを発見しやすくするために、Sitemaps を補助的に利用することもできます。注意点として、必ず #! のURLをSitemapsに記述してください。googlebot は、ugly URL (_escaped_fragment_)で記述されたURLはクロールしません。

検索エンジンフレンドリーなAJAXの実装例

http://gwt.google.com/samples/Showcase/Showcase.html で確認することができます。

クローキングの可能性は?

クローキングとは2000年頃まで流行したウェブスパム手法の1つです。訪問者を識別して、ユーザ（人）の訪問者にはグラフィカルできれいなコンテンツを提示する一方で、クローラの訪問にはテキスト中心のコンテンツを提示することで、不正にランキング上昇を狙おうとするアプローチです。

今回の方法を悪用して、AJAXをクローラブルにするための pretty URL のアクセス時（＝人）と、ugly URL のアクセス時（＝クローラ）で別々のコンテンツを提示することでクローキングが可能なように思えますが、Googleはガイドラインとして「HTMLスナップショットと、ユーザの閲覧するステート（コンテンツ）は同一にしなければならない」と定義しています。これが守られていない場合はクローキングと判断される可能性があります。

Yahoo!やBingはAJAXをクロール可能?

これはGoogleが提案する、クロールできるAJAXベースサイトの実装方法です。Yahoo!やBingは対応していません。個人的には、当面対応しないんじゃないかと思います。

将来のAJAXサイトの対応について、Googleの見解

Googleによると、AJAXで構築されたサイトは、今回紹介した技術的実装を行わなくても、従来通りにインデックスされ続けます。もちろん、冒頭で紹介した技術的制約により、多くの（AJAXで表示する）主要なコンテンツは検索結果に反映されない公算が大きいです。

ただし、Googleはクローラgooglebot をブラウザと同じように挙動するように鋭意努力しており、将来、サイト運営者側が何の対処も行わなくてもAJAXサイトを適切にクロールするようになる可能性があるとも説明しています。

オンライン環境が変化し、テキストだけでなく、動画、画像、音声といったコンテンツのマルチメディア化や、FlashやSilverlight、AJAXなど従来のアプローチではコンテンツ取得困難な形式のサイトが増加しています。こうした時代の変化にGoogleも対応して、適切に情報検索が行えるようにクローリング技術も改善してきています。かつてはクロール困難だった動的URLも現在は改善されているように、AJAXも将来的にはクロールできるようになるのかも知れません。

今回紹介した、AJAXをクロール可能にするためのスキームは、すでにAJAXを用いたサイトを開設していて、かつコンテンツをすぐにでも適切にインデックスさせたいユーザのための解決法です。

Making AJAX Applications Crawlable [Google code]
http://code.google.com/intl/ja-JP/web/ajaxcrawling/docs/getting-started.html

Frequently Asked Questions
http://code.google.com/web/ajaxcrawling/docs/faq.html

参考にさせていただいたページ
Ajax を利用したウェブサイトを適切にクロールするためのグーグルの提案に関するウェブサイト開発者向けの説明
http://sakuratan.biz/archives/1330

#
私は開発者ではなく、専門用語の使い方が変なものがあるかも知れませんが、ご容赦を。

カテゴリートップへ