最近TwitterやFacebook、Google+等が採用しているため、無限スクロールがとても身近なものになりました。
中にはプラグインなどを使ってWordPressのブログに無限スクロール(infinite scroll)を導入している方もいらっしゃるのではないでしょうか。
ただ、無限スクロールのページを検索エンジンに最適化する方法についてまとめられている記事はあまり見かけませんね。無限スクロールを導入したけれど、どうやって最適化すればいいのか分からないという方も多いと思います。
中にはプラグインなどを使ってWordPressのブログに無限スクロール(infinite scroll)を導入している方もいらっしゃるのではないでしょうか。
ただ、無限スクロールのページを検索エンジンに最適化する方法についてまとめられている記事はあまり見かけませんね。無限スクロールを導入したけれど、どうやって最適化すればいいのか分からないという方も多いと思います。
今回は昨日(先ほど)公開されたGoogleの「Webmaster Central Blog」の記事「Infinite scroll search-friendly recommendations」の一部(といってもかなりの部分ですが)を引用・翻訳して紹介いたします(ざくざくと急いで翻訳したので、おかしなところもあるかもしれませんが、気づき次第修正していこうと思いますのでご容赦ください)。
公式サイトで翻訳が出る可能性が大ですが、それまでのつなぎにでもご参考にしていただければと思います(とここまで書いた後で、SEMリサーチの渡辺氏が既に分かりやすく記事にされていることに気づきました…でもせっかくなので公開します)。
検索エンジンに扱いやすい、無限スクロールについてのレコメンデーション
- 始める前に
- 無限スクロールページのコンテンツを、JavaScriptが利用できなくてもアクセスできるようなページに分割する。
- それぞれのページにどれだけのコンテンツを含めるか決定する。
- 検索ユーザーが直接このページに来ても、求めている正確なアイテムを容易に見つけることができるようにする(例えば、求めるコンテンツまでにたくさんスクロールする必要がない)。
- 妥当なページの読み込み時間を維持する
- (バッファリングは例外として)一連のコンテンツを構成するページの間で重複することがないようにコンテンツを分割する
- 検索エンジンが処理する無限スクロール用のURLを作る
- それぞれの構成ページが完全なURLを含む。この場合、構成エラーの可能性を最小化するために完全なURLを推奨する。
- 良い例: example.com/category?name=fun-items&page=1
- 良い例: example.com/fun-items?lastid=567
- あまり最適化されていない例: example.com/fun-items#1
- それぞれの構成ページ(URL)で直接コンテンツに辿りつくことができ、同じcookieやユーザーの履歴がなくても、ブラウザ上でアクセスまたは参照可能であるかテストする
- あらゆるURLパラメータのキーや値は次の推奨例にしたがうべきである。
- URLは、概念上、今から2週間後でも同じコンテンツを見せるようにする。
- 相対時間を基にしたURLパラメータは避ける
example.com/category/page.php?name=fun-items&days-ago=3
- 相対時間を基にしたURLパラメータは避ける
- 検索ユーザーに価値のあるコンテンツを表示することのできるパラメータを作る
- コンテンツにアクセスする主な手段であるため、検索ユーザーに価値のないパラメータは避ける
example.com/fun-places?radius=5&lat=40.71&long=-73.40
- コンテンツにアクセスする主な手段であるため、検索ユーザーに価値のないパラメータは避ける
- URLは、概念上、今から2週間後でも同じコンテンツを見せるようにする。
- それぞれの構成ページが完全なURLを含む。この場合、構成エラーの可能性を最小化するために完全なURLを推奨する。
- それぞれが<head>内に「rel=next」と「rel=prev」 の値を含むページでページネーションを構成する。<body>内でのページネーションの値は、(管理者が意図しない)ユーザー生成コンテンツで作られることがあり、Googleのインデックス時には無視されるだろう。
- 無限スクロールページ上で「replaceState/pushState」を実装する。(ひとつを用いるか両方にするかの決定はあなたやサイトのユーザーの行動次第だ。)とはいうものの、以下の理由で(単独で、あるいは「replaceState」と連動して)「pushState」を含めることを勧める。
- クリックや積極的にページをめくるようなユーザーの行動がある場合
- 直近にページネートされたコンテンツを次々にバックアップする機能を提供している場合
- テストしよう!
- ユーザーの上下スクロールに応じて調節されるページの値をチェックする。 John Muellerのページネーション付き無限スクロールサイトが上下スクロールのデモである。
- 構成ページに含まれないページが404のレスポンスを返すことを確認する(例えば、998ページのコンテンツしかないならば「example.com/category?name=fun-items&page=999」は404を返すべきである。)
- 無限スクロールを実装することによる起こりうるユーザビリティ上の影響を調査する
2014/02/21追記
公式ブログで邦訳が公開されましたね。
全訳が必要な場合は、そちらをご覧ください。