社長BLOG

AngularJS Google Facebookボットから検索されるようにする

2014-09-09 (火)
社長BLOG
　手嶋守

AngularJS楽しいですね。MVWはいいですね。MVCに比べて無理が少ないと思います。ピンときました。
サイトの構築は本当にサクサクできました。

できたサイトは、PNE.club アマチュアクラブ活動のポータルサイトです。

フロント：HTML5 Bootstrap3 AngularJS
DB：Firebase.com（JSON データベース）
バックエンド：Twitterデータを定期的に取得するバッチ処理（PHP）

まだシンプルなもんだけど、レスポンシブ、管理簡単、アプリなどに拡張もし易い良い構成になりました。

いいことづくめのこの構成、落とし穴がありました。

「Google Facebookのボットが正しくクロールしてくれない」

です。これは参りました。なんとか解決したので、解決方法を一直線に共有しておきます。

今回のサイトAngularJSを使っているけどシングルページアプリケーションではない。コンテンツごとに個別ページがあるオーソドックスなスタイルです。その範囲で役に立てばいいかなと思います。

問題

Google Facebookなどのボットからのアクセスは、JavaScriptを解釈せずにコンテンツを取得していく。したがって、コンテンツの取得やレンダリングなどを含めて過度にJavaScriptを利用すると、ボットにサイト内情報を提供できなくなる＝＞コンテンツ無しページと評価されてしまう＝＞検索に引っかからなくなる。

こんな風にインデックス化されてしまうわけです。

解決方針

・ボットからのアクセスには専用のHTMLを返すようにする
・ボットを識別するUserAgentをApache .htaccessで見分け、通常アクセスとは違う特別なコンテンツを出力する
・ボットにはそっちをクロールしてもらう

やりかた

作業１、Prerender.ioをレンタルする。

Prerender.ioはAngularJSのようにJavaScriptでレンダリングされるWEBサイトをJavaScriptが有効なまま取得し、そのキャッシュをつくってくれるサービスです。人間の見た目と同じょうなHTMLを保存してくれます。
200ページまで無料。追加ページもそれほど高くないので、即効で契約。

サービスから発行されたトークンを、HTTPヘッダーとして出力するだけ。

今回はフレームワークを使っていないので、Apache .htaccess用の設定を選択しました。

作業２、Prerender.ioの指示どおりに、.htaccessを設定する。
Prerender.ioでは高レベル、低レベルの２種類の設定方法が用意されているようです。
高レベルな方は、Node.jsやRails Symfony2 ZendFrameworkなどのフレームワークにPrerenderライブラリを組み込み、自動的にキャッシュの制御を行います。
今回はフレームワークを使ってないので、低レベルな方を選択。

.htaccessにこのgistを書き込みます。

https://gist.github.com/thoop/8072354

このhtaccessは、「ボットのUserAgentが来たら、通常のコンテンツじゃなくPrerenderにキャッシュされたデータを返せな」
と指示しています。

作業３、動作確認

まずはChromeでUserAgentをボットに偽装しアクセス。通常コンテンツではなく、Prerender.ioがレンダリングしたHTMLが表示されていることを確認。なにせキャッシュなのでわかりにくいですが、キャッシュ側のソースコードを開いて、HTMLタグを確認するとわかります。（JavaScriptがなくなっているので）

GoogleのWEBマスターツールを使って、GoogleBotとしてクロールしてもらいます。