[対象: 上級]
Ajaxを利用する場合のURLの生成にはpushStateを使ってもいいとGoogleのMatt Cutts（マット・カッツ）氏は勧めていました。
またこれとは別にGoogleのJohn Mueller（ジョン・ミューラー）氏に、AjaxのURLにはpushStateを使うことができると僕はGoogle+でコメントをもらったことがあります。
さてこれはGoogleにおいての話なのですが、BingもAjaxを利用したURLのベストプラクティスとしてpushStateを推奨することを公式に表明しました。
BingもAjaxコンテンツのURLにはpushStateを推奨
BingがpushStateを推奨する理由はGoogleと同じです。
- Ajaxの処理で作られたコンテンツに対して“#”を使わない静的なURLを割り当てられる
- 検索エンジンにAjaxコンテンツをクロール、インデックスさせるための“#!”を使う複雑な構成を採用しなくてすむ
ようは検索エンジンにとって都合がいいわけですね。
ユーザーが見るURLをそのまま検索エンジンもクロール、インデックスできます。
Ajaxを使ったコンテンツのURLであっても通常のURLとなんら変わらることなく扱えます。
Bingの公式ブログの記事はURLにpushStateを使うときの注意点にも触れています。
リンク切れを起こさないようにする
pushStateによって割り当てられたURLには必ず直接アクセスできるようにしておく。ユーザーは、お気に入りやソーシャルメディアでの共有からそのコンテンツに直接アクセスすることがある。ブラウザを更新したときもそのURLのコンテンツが表示されるようにしておく。
重複コンテンツを発生させないようにする
pushStateではURLを簡単に割り当てられるからといって、たくさん作り過ぎてはいけない。たとえば意味がある、重要なパラメータをすべて“？”の前に差し込むためにpushStateを使い、さほど重要ではないパラメータは“#”の後に置く。
例: 音楽プレーヤーのアプリケーションで再生位置に応じてURLを設定できる場合
- ◯ ⇒
http://www.example.com/musicPlayer.aspx?song=TheCanadaSong#pausedAt=42 - × ⇒
http://www.example.com/musicPlayer.aspx?song=TheCanadaSong&pausedAt=42
検索エンジンは“#”以下を一意のURLの一部として扱わないので上のURLは
http://www.example.com/musicPlayer.aspx?song=TheCanadaSong として扱う。
対して下はパラメータの一部になっているので検索エンジンが認識するURLは
http://www.example.com/musicPlayer.aspx?song=TheCanadaSong&pausedAt=42 になる。
再生開始時間が違うと下はその分だけURLができあがる。しかしコンテンツはみな同じ。
pushStateをサポートしていないブラウザへの対応
すべてのブラウザがpushStateをサポートしているわけではない。サポートしているブラウザでもサポートしていないブラウザでも同じ体験ができるようにしておく。pushState未対応のブラウザには直接アクセスできるURLを提供し、pushState対応ブラウザにはpushStateでURLを提供する。
Googleに続いてBingもpushStateの利用を提案してきたことは採用を考えていた人にとっては心強い後押しですね。
2大検索エンジンがpushStateを確実にサポートしている証拠と言えます。
一方ブラウザの対応状況においてはpushStateを導入できるHTML5をサポートすることが条件になります。
ChromeとFirefox、Safari、Operaはサポートしています。
IEは10からサポートを始めました。
IEが出遅れているものの主要なブラウザはサポートしているということですね。
pushStete未サポートのブラウザへの対処にはいくつか方法があるようです。
僕は開発には詳しくないのでこちらはご自身で調べてください。
先週紹介したWebフォントもそうですが、新しい技術はすべての環境にすぐさま適用できるとは限りません。
しかし時間の経過とともに利用可能な範囲が拡大していくことも確かなことです。
ユーザーに不便を感じさせないことが確かめられたなら、AjaxとpushStateの組み合わせをさっそく取り入れてもよさそうです。