AjaxアプリケーションのSEOについて調べてみた

2014年01月14日

Backbone.jsやEmber.js、AngularJSなどの流行りのMVCフレームワークを用いたAjaxアプリケーションのSEOについて少ししらべてみました。SEOというかクローラー対策っぽいですが。ブログ的には始めての開発系の記事。

AjaxアプリケーションのSEO的な問題

そもそもどうしてAjaxアプリケーションがSEO的にやばいかというと、一旦空のHTMLを読み込んだあとJavaScriptを使ってクライアントサイドでコンテンツをレンダリングする仕組み上、Googleのクローラーのような特殊な環境だと内容を正常に読めないというのが現状らしい。というわけでこれを如何にして読み込ませるかが本件のゴールになります。

STEP1:Ajaxアプリであることをクローラーに伝える

#!(ハッシュフラグメント)をURLにつける

URLに#!(ハッシュフラグメント)が含まれているとクローラーはそのページをAjaxアプリケーションと認識して、URLをhttp://ドメイン名/#!key=valueのようなものからhttp://ドメイン名/?_escaped_fragment_=key=valueに変換してそれをサーバーにリクエストするようになります。

メタタグをhead内に書いておく

ハッシュフラグメントを使ってAjaxアプリであることを伝える他に、 [html][/html] とメタタグとして記述しておくことで同じように_escaped_fragment_がついたURLに変換しサーバーにリクエストしてくれるようになります。

STEP2:HTML snapshot(静的HTML)の生成

PhantomJSを使って実装する

クローラーにコンテンツが入ったHTMLを返すために、レンダリング後のHTMLのスナップショットを取ってそれを静的HTMLとして用意します。PhantomJSを使うとできる模様。実際のやり方はリンク先などで調べてみてください。とりあえず今回は手順というか概要だけかいつまめれば。GoogleのリファレンスではHtmlUnit、Crawljaxなどが紹介されていました。

Prerender.ioなどのSaaSを利用する

クロールに必要なものは「静的なHTML」と「クローラー用に静的なHTMLを返す仕組み」なので、これらを請け負ってくれるSaaSを使うこともできます。例えばPrerender.io、BromBoneなんかがあるようです。だいたい10万ページで月15ドルとか。静的なHTMLを生成するのにサーバーを常に別で走らせないといけないのでそのサーバー代と、PhantomJSを設置するコストとの兼ね合いですね…。

STEP3:クローラーにだけHTML snapshotを返す

ハッシュフラグメントやメタタグでクローラーはサーバーに_escaped_fragment_というハッシュのついたURLでリクエストするようになるので、この場合にだけ生成しておいたHTML snapshotを返すよう設定します。バックエンド側の知識がほぼないのでこの辺は割愛。図的に言うとこんな感じ。

ブラウザとクローラーで異なるコンテンツを返す

STEP4:クローラーにsnapshotを返せてるか確認する

最後に、クローラーにちゃんと静的なHTMLを返せているかを確認するためにFetch as Googleというツールを使う。きちんとクロールされているか確認できればOK。

参考にした記事

さいごに

というわけでAjaxアプリケーションに必要なクローラー対策を調べてみました。Googleも「まぁこんな対策しなくてもいずれはクロールできるようになるし一部対応できてるよ」的なことは言ってるのですが、現状不安定でこういったHTML snapshotを使った対策が公式でも推奨されているようです。ただHTML snapshotを使うと実際と違う内容のコンテンツもクローラーに返せてしまい悪用もできるのですが、こうした行為はクローキングと呼ばれガイドラインに違反するそうなので気をつけましょー。