日記ブログ、または雑多なメモ
2014年2月14日

ajaxな動的HTMLを静的HTMLとしてgoogleにインデックスさせる






   なぜメモページがよくヒットして、トップページがヒットしないか……、そういえば本当のトップページ(www.tim.hi- ho.ne.jp/eta2)は超長いこと放置プレイにしたままだったのを思い出し、この際なのでメインのページをトップページに移動させてみた。 しばらくして、ぐぐーるでサイト名で検索してみると、

../../diary/pic/google-index.bmp.png


 うむ。 反映はされてる………しかし何のページかわからんぞこれは……

 トップページの内容もajaxで読み込む前のすっからかんのをインデックスされちゃっているようだ。 これはいかんなぁ。。。
読み込みが完了した状態の静的HTMLをグーグルのクローラに読んでもらえると解決、みたいな話はちらっと見かけたが、いまひとつどうやるのかわからん。 もうちょい調べてみよう。



 調べた。

まず、www.tim.hi-ho.ne.jp/eta2がajaxで内容が変わるページだとして、最終的な表示結果をgoogleにインデックスして欲しい場合、

1.<meta name="fragment" content="!">のメタタグをajax表示ページに入れ
2.phantomjsとかでスタティックHTMLページを作り
3.「www.tim.hi-ho.ne.jp/eta2?_escaped_fragment_=」のアクセスが来たらスタティック HTML、それ以外には通常のページを表示する

で、いいらしい。

phantomjsで静的ページを作る、についてはこちらを参考

続・PhantomJSで遊ぶヽ|・∀・|ノ Static HTMLの生成
http://havelog.ayumusato.com/develop/javascript/e526-make_static_html_using_phantomjs.html


んで、2まではできるのだが、3ができない。
hi-hoだとphpは使えないし、ssiもincludeしか使えないし、.htaccessでRewriteCondなどを使えるわけもなく、3を実現する方法がない。
詰んだ!!


……

ん?

ぉお?

SSIの条件分岐でいけたかも。
<!--#if expr="$QUERY_STRING = /^_escaped_fragment_=$/"-->
<!--#include file="index_static.html" -->
<!--#else -->
<!--#include file="index_dynamic.html" -->
<!--#endif-->


というindex.shtmlを置いたら、一応望み通りの動きをしている模様。
しかしこの場合、上記のメタタグはどこに入れるのか、はて。。。。 まあ、index_dynamic.htmlの方に入れるんだろわな。。。


http://www.tim.hi-ho.ne.jp/eta2 (deleted)
これが通常

http://www.tim.hi-ho.ne.jp/eta2/?_escaped_fragment_= (deleted)
http://www.tim.hi-ho.ne.jp/eta2/?_escaped_fragment_=en (deleted)
こっちがスタティック表示
ソースを見ればちゃんと中身があり、一番後ろにもちゃんとthis is static pageと出る。

合ってるのかどうかいまいちわからん。
とりあえず、しばらく放置して検索結果の内容が変われば成功ってことね。

効いてるのかどうかわからないがともあれ、細かいことを忘れても大丈夫なように自動化完了。



……あ、サイトマップ (deleted)を作ってgoogleウェブマスターツールで送ったらすぐに反映されたヨ!

../../diary/pic/google_result.png


しかし……相変わらず何のページかわからんな。
なるほど。 宣伝部分より前にあるニュース部分がピックアップされた。 正しいといえば正しい。
というわけなので、快感チェンジの原稿が上がったよ!という、わかりやすいニュースを遅ればせながら書き込んでおいた。


コメント欄
(投稿なし)

コメントなどありましたらこちらからどうぞ
名前
内容
 ※名前、内容ともに入力必須です
- C'sGallery Blogっぽく見えるシステム3.2 -
小武 (管理人) eta2@tim.hi-ho.ne.jp