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

AJAXアプリ(サイト)をクローラブル(crawlable)にするための技術的アプローチ。Googleが公開した最新ドキュメントを基に解説します。


公開日時: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


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





記事カテゴリ:SEO(検索エンジン最適化), サーチニュース 2010


他の検索・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リサーチは、本記事中で触れている企業、商品、サービスの全て(情報)について、有用性、適合性、正確性、安全性、最新性、真実性に関する一切の保証をしておりません。各自の判断でご利用下さい。