まめージェント

Android, GAE, AngularJSの技術ネタ中心。Twitter: @mame01112

Ajax (AngularJS)のSPAでSEO対策をする (その1: hashbangって何?)

GoogleAjax(AngularJS)のサイトをクロールさせたーい!

というところからいろいろと調べたところ、いろいろなサイトでHashbangという名前を見てそもそもHashbangって何ぞや?をしっかり理解できていなかったので、SEOの一歩目として、Hashbangを勉強することにしました。

そもそもHashbangって?

普通は、"shebang"って書くようです。
Hashbangは、"ハッシュバン"と読み、URL上の「#!」を指します。ハッシュ(#) + バン(!)の組み合わせですね。それを略して”shbang"、シバンとも書くようです。ちなみに”!"はエクスクラメーションマークじゃないのか?と思って調べたら、英語の俗語で"バン"や”スクリーマー”とも呼ばれるとのこと。へぇ・・・。

何故#!が必要?

どうやら、#も!もそれぞれ理由があってURLに入れるようです(そりゃそうだ)

#: Ajaxアプリケーションとして、ページ内遷移をするため。
!: ”#”とセットにして、Googleクローラーにクロール可能なAjaxアプリとして認識させるため。

という使い方。

AngularJSでも、HTML5 modeでなければ"#"ってURLに入ってますもんね。そして、
https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
あたりにも書いてありますが、URLに"#!"が入っているとGoogleクローラーはそのページをAjaxアプリと認識して、#!を?_escaped_fragment_=に置き換えます。
※これをクローラーに伝えるためにメタタグを内に書いておかないといけませんが、これは別途。

そしてshbangって最近使われなくなってきている?

Facebookなどのサービスにも昔はshbangが使われていたようですが、現在は使われなくなってますね。
https://www.suzukikenichi.com/blog/john-mueller-recommends-to-use-html5-instead-of-hash-bang/
とかいろいろなところに、shbangではなくHTML5のpushStateを使うべし、と書いてあります。
ただ、それが何故か?がイマイチ分かっていないのでこれから勉強です。
※「これから新しいウェブサービスを作るなら新しいやり方でしょう」、「SEO的に有利」などいろいろ理由っぽいものはありましたがそれが何故か?がイマイチ釈然とせず。。


http://knowhow.pushcoin.com/html5-vs-hashbang-and-cdn-hosted-site/
とか見ると、”shbang使った方が楽じゃね?”的な感じで書いてあったり。。


このあたりの情報を持っている方がいらっしゃいましたら、是非ご教授くださいませ。