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、旧AJAXレンダリングスキームの終了を発表 2018年第2四半期
音声検索は SEO の未来をどう変えるのか?
Google、AMPページと元のページ内容が一致することを求めるポリシー適用、2018年2月から
今日の SEO で大切なこと ~Web担当者Forum ミーティング2017 秋~
【SMX East 2017】 検索とソーシャルを活用するマーケティング戦略
【SMX East 2017】 モバイルファーストインデックス、少数サイトを対象に導入テスト開始 など
Google、家族で楽しめる Google Assistant 向けゲームを公開
【SMX East 2017】 最も検索順位に影響を与える要素は何?
英Brandwatch、BuzzSumo を買収
「SEMリサーチ」トップへ戻る




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