[対象: 上級]

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を習得する方がずっと簡単なように調べていて思えました。

このエントリーが役に立ったらシェアしてください

[Ads & Featured Contrents]

海外SEO情報ブログTOPGoogle SEO › Ajaxページでは“#”(ハッシュ)よりも“pushState”を使ったほうがGoogleのSEOに楽かも

Comments

  1. By dai on

    お世話になっております。
    毎日ブログ拝見させて頂いております。

    Ajaxを使ったページ遷移は、確かに動きはスムーズで綺麗なんですけど、僕の場合はURLを見て今自分がどの階層のどのページにいるのか判断したり、下層ページのURLをブックマークしたりする事があるので、非常に不便というか、ユーザービリティ的に欠陥があるんじゃないのか、と長い間思っていました。

    pushStateを採用すれば、ユーザービリティもある程度担保しつつ、スムーズなページ遷移を実現できるので、一石二鳥な気がします。

    以上、個人的な感想でした。
    (この場をお借りして申し訳ありません)

    *** Reply from Suzuki Kenichi ***
    pushStateを使えばユーザー的にも検索エンジン的にも都合の良くなりそうですね。
    問題はサイト作成者がpushStateを使うかどうかです。
    存在すら知らないこともあり得そうに思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


▲ページの一番上に戻る