Ajaxページでは“#”(ハッシュ)よりも“pushState”を使ったほうがGoogleのSEOに楽かも

[対象: 上級]

Ajaxを利用しているページでは、Googleのクロールやインデックスを考えた場合、pushStateを使ったほうが“#”(ハッシュ)を使うよりも労力が少なくなりそうです。

下の質問にGoogleのMatt Cutts(マット・カッツ)が回答しました。

Ajaxのナビゲーションを管理するために“#!”から“pushState”に更新すべきだろうか?

Googleは両方ともサポートしている。だけどpushStateは特別な設定が不要だしGoogleも余分な処理をしなくて済む。

Matt Cutts氏の答えを一言でまとめると上のようになります。

ここからは僕からの補足です。

#を使ったAjaxページをSEO対応にするのは面倒

一般的に、Ajaxを使ったページではURLに“#”が含まれます。
検索エンジンは#以下をユニークなURL(の一部)として処理しません。

そこでGoogleは、#を使ったAjaxページをクロール・インデックスできるように#を#!に置き換えたうえで裏側でゴニョゴニョやる、かなり複雑な仕様を提案しています。

ドキュメントが日本語化されていないせいもあって敷居が高く感じるサイト管理者も多いのではないでしょうか。

pushStateは楽チン

「pushStateって何?」という疑問を抱く人も多いと思います。

僕も決して詳しいわけではないので、ごく簡単に説明します。

pushStateとは、HTML5でサポートされるAPIです。
ページを遷移せずHTML(の一部)を変えた場合でもブラウザに履歴を残し、また一意のURLを割り当てることが可能です。

HTMLの中身が変わってもAjaxはページを遷移しないのでURLが同じままです(#以下が入れ替わるだけで一意のURLとして処理しない)。

ブラウザの戻るボタンを押しても前のコンテンツを再び表示させることはできません。
本当に前のページに戻ってしまいます。

なのでGoogleは、クロール・インデックスできるように特殊な仕様をサポートしてくれたわけです。

しかしpushStateを使えば、Ajaxで変化させたそれぞれのコンテンツに対してユニークなURLを割り当てられるのです。

つまり検索エンジンにとってクロール・インデックスしやすくなります。

またサイト管理者・開発者側にとっても、複雑な構成を実装せずに済むというメリットがあります。

pushStateとAjaxを組み合わせた“pjax”と呼ぶライブラリがあるそうです。

たとえば、githubはpjaxを使っているらしいです。

サイト管理者にとってもGoogleにとっても楽なのがpushStateということですね。

もっとも、pushStateを覚えなければならないという課題が出てきますがそれは頑張って勉強してください。

僕は開発には疎いので直感的な意見になってしまいますが、Googleが推奨する#!の構成を実装するよりはpushStateを習得する方がずっと簡単なように調べていて思えました。