検索エンジンとの相性を考慮した無限スクロールのベストプラクティス
2014年2月21日金曜日
Google のウェブマスター トレンド アナリストである John Mueller が作成したページ指定された無限スクロール サイトのデモで、実際の挙動を確認できます。このデモは、検索エンジンとの相性を考慮する上で重要なポイントを示しています:
- 対象範囲: すべての個別のアイテムがアクセス可能。従来の無限スクロールでは、最初のページ読み込み後に表示された個別のアイテムをクローラーが見つけることはできません。
- 重複なし: 各アイテムは一連のページ指定したページで一度だけ指定(つまり、アイテムの重複はありません)。
検索エンジンとの相性を考慮した無限スクロールのベストプラクティス
- はじめる前に:
- 無限スクロール ページのコンテンツを、JavaScript が無効でもアクセス可能な形で、複数のページに分割します。
- 各ページに含めるコンテンツの量を決定します。
- 検索ユーザーが直接このページにアクセスしても、探しているアイテムが簡単に見つけられるようにします(たくさんスクロールしなければコンテンツを見つけられないようなことは避けます)。
- 適当なページの読み込み時間を維持します。
- コンテンツを分割し、それぞれのページ間で重複が発生しないようにします(バッファリングを除きます)。
- コンポーネントを構成する各ページには完全な 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
- 検索ユーザーにとってコンテンツの内容が想像できる価値のあるパラメータを設定します。
- コンテンツにアクセスする主な手法として、検索ユーザーにとって価値のないパラメータを使用することは避けます:
好ましくない例:example.com/fun-places?radius=5&lat=40.71&long=-73.40
- クリックや実際にページをめくるようなユーザーの行動がある場合
- ページ指定したコンテンツが表示されるたびに閲覧履歴に保存できるようにする場合
- ユーザーが上下にスクロールする際に URL の中のページの値が調整されることを確認します。John Mueller のページ指定された無限スクロール サイトのデモでは、上下のスクロールの挙動を示します。
- 範囲外のページが 404 レスポンスを返すことを検証します(つまり、
example.com/category?name=fun-items&page=999
では、コンテンツ内に 998 ページしかない場合に 404 レスポンスを返す必要があります)。 - 無限スクロールの実装によって引き起こされる可能性があるユーザーの利便性の問題(英語)を調べます。
この記事に関するコメントやご質問は、ウェブマスター ヘルプ フォーラムまでお寄せください。
2019/06/11 追記
rel=next/prev の廃止にともない、該当箇所を修正しました。