Googleジョン・ミューラー、新しいサイトには「#!」のAjaxよりも「HTML5のHistory API/pushState」を推奨

[対象: 上級]

GoogleのJohn Mueller(ジョン・ミューラー)氏は、Ajaxを利用する場合は、「example.com/#!/xyz」のように「#!」を使ってURLを構成するよりも、HTML5で採用されたHistory APIやpushStateの機能を使うことを勧めました。

「HTML5のpushState/replaceState」の使用を推奨

John Mueller氏は、SEO系のフォーラムに投稿された「#!」の使い方に関する2つの別々の質問に、次のようにアドバイスしました。

非難されるかもしれないのを承知で言うと、HTML5で新しいサイトを運用しているなら、HTML5のHistory APIを利用し通常のURLを使ってコンテンツを提供した方がいい。

ナビゲーションにはJSを使いブラウザのURLを変える、しかし最初の読み込みで静的なコンテンツを返す。

より新しい代替手段があるのに、Ajaxのクロール構成を新しいサイトで使うのは時代にやや逆行しているように思える。

(URLに「#!」を含まない方がSEOに有利だという話に対して)URLだけの違いで、目に見える形でランキングに影響が出ることはない。

とはいえ、新しいサイトを作っているならHTML5のpushStateやreplaceStateを代わりに使うことを勧める。最初の読み込みでページを完全にレンダリングし、サイト内の移動にはhistory APIを使う。

Ajaxのクロール構成は(少なくともGoogleには)今でもサポートされているが、もっと優れた代替手段が今はある。

 

新しいサイトなら、旧式の「#!」よりも最新のHTML5を

GoogleはAjaxで生成されるコンテンツをクロールできるように、「#」(ハッシュタグ)に「!」(エクスクラメーションマーク)を付け足して、「#!」としてURLを構成することを提案しています。

しかし、HTML5で実装されたHistory APIやpushStateのような仕組みを利用すれば、検索エンジンがクロール、インデックスしやすいURLをもっと楽に生成できます。

こうした新技術を使うことをJohn Mueller氏は勧めています。

Matt Cutts氏も同様に、pushStateの利用の検討を促していました(ちなみにBingも)。

こう書くと、「HTML5はSEOに有利だそうだ」と早合点する人(そして悪用する人)が出てきそうなので、きっぱりと否定しておきます。

HTML5だからというそれだけの理由で、検索エンジンの評価が上がるということはありません。

絶対に勘違いしないでください。

John Mueller氏が言っているのは、「すでにHTML5で構築している、あるいは新たにサイトを構築するのであれば、2年以上前に公開した構成よりもHTML5で使える新技術を採用した方が、簡単にまた検索エンジンにも理解しやすいAjaxコンテンツを作れる」ということです。

今の構成でAjaxコンテンツをきちんとクロール、インデックスさせられているならそのままで構いません。

そうはいえ、HTML5をサポートするブラウザも増えてきているし、今後も間違いなく増えていきます。
サイトにアクセスしてくるユーザーが使用するブラウザ環境も見ながら、HTML5で構築したサイトならもっと優れた方法の採用を検討してはいかがでしょうか。

先日紹介した、非常に美しい無限スクロールを実装しているQUARTZもHTML5のhistory APIやpushStateを巧みに利用しています。