続・PhantomJSで遊ぶヽ|・∀・|ノ Static HTMLの生成
Posted: Updated:
Ajaxページの問題と、StaticなHTMLの生成
Ajaxでズンドコやってるページだと、検索エンジンからのアクセス時に空ページでSEOがアウアウァ！！って話はよく耳にします。
GooglebotがAjax的なアレコレについて賢くなってきているとは申します。AJAX クロール: ウェブマスターおよびデベロッパー向けガイドのような情報ドも公開されているので、それに従えばきっと....という所ではありますが、より確実にStaticなHTMLを！という声も少なくありません。
ということで、今回は、AjaxでDynamicなページを元に、StaticなHTMLを自動生成しておいて、検索クローラからのアクセスにはStatic HTMLを返却する、ということを考えてみます。ここではStatic HTMLの生成まで試していて、URL設計とかサーバサイドのアレは割愛。Phantomしたいだけなので。
サーバサイドとクライアントサイドでテンプレート言語を合わせるとかのアプローチもありますが、色々と面倒だったり、後付けしづらいのでこういうアプローチのが現実的かと。
フロントエンドとバックエンドの両刀スタンスと致しましては、こういう問題を解決するのを得手としたいところ！
ってことでPhantomJS
元ネタはちょっと前に書いたgistの% phantomjs snapshot.js > stdoutfilename — Gistです。このときは実際に動かして無かったので、改めて書いてみたのが以下。
というような感じでしょうか。
使い方
下記のようにphantomjsで実行します。
% phantomjs make_static.js http://localhost/ajax_page.html > static.html
単に標準出力に吐き出しているので、 > static.htmlでファイルに保存しています。上のgistでは、検証用にスクリーンショットもpage.render()で吐き出しています。
ページ表示の完了を待つということ
initialとloaded
1-initial.pngと2-loaded.pngを並べると、クライアントサイドのwindow.callPhantomで、PhantomJS側のpage.onCallbackが呼び出された時点で、レンダリングが完了時の内容を取得できていることが分かります。
ここではPhantomJSの呼び出しを、'callPhantom' in window && window.callPhantom();としています。PhantomJSから叩いたときは、Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.6.0 Safari/534.3のようなUserAgentだったので、初期化時のフラグ切り出しもできるでしょう。
ちゅーことで
これを自動化・定期実行して、じゃんじゃんHTMLを生成しておき、クローラアクセス時にはStaticなほうから返すようにnginxを設定してやりゃあ良いんじゃないでしょうか。
もう1個ネタがあるので、そちらも次の記事で紹介します。
