ワシはワシが育てる

週刊少年ジャンプと任天堂のゲームが三度のメシより好きです。

フルJSサイトのSEO対策

Backbone.jsなどクライアントMVCを使って動的にHTMLを生成する際のSEO対策について。

サーバーサイドがJSONを生成し、それを元にテンプレートでHTMLを動的に作成し挿入、というのが代表的な手段です。
しかしそれだけではソースコード上はスッカラカンで、SEOが致命的に弱くなってしまいます。

良くあるのが「1ページ目だけサーバーサイドで、2ページ目以降はJSで生成」というもの。
これは幾分SEOに優しいのですが、重複したコードを2つ用意しなければならず、手間がかかるのはもちろんのこと、片方修正したけど、もう片方は放ったらかし、といったしょうもない事態を招きがちです。

そこでPhantomJSを用いて、静的HTMLを予め作っておくというのが有効な手段みたいです。

PhantomJSというとJavaScriptのテストとして有名ですが、クライアントサイドの動作をエミュレートして、その結果出力されたHTMLを保存するために使うようです。

クローラーのヘッダー情報に合わせてサーバーソフトがそのHTMLを返すようにすれば、一件落着…という考え。

しかし当然問題点は多いです。 例えば商品が100万点存在し、それぞれ個別ページが割り当てられている場合、静的HTMLを100万個用意するのはまず不可能です。

またアプリケーションサーバをスケールした際に、1つのサーバで静的HTMLを定期的に作ったとしても、スケールしたそれぞれのサーバに同期するのにまた骨が折れます。

ということで結局そんなことをするならサーバ側とクライアント側で重複コンテンツを作ったほうが楽なんじゃないかという結論に至る始末。

Googleさんもこれ(というかAjax全般)について問題意識を感じているようで、デベロッパー向けのドキュメントを公開しています。
まだ読んでいないのですが、この問題は非常に根深いので近いうちに読んで、収穫があればブログに書いてみたいと思います。

https://developers.google.com/webmasters/ajax-crawling/?hl=ja&csw=1