検索エンジンとの相性を考慮した無限スクロールのベストプラクティス

ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて 無限スクロール （英語）を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動（スクロールやボタンを押してさらにアイテムを読み込むなど）を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。

無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割した一連のページ群を生成するようにしましょう。


Google のウェブマスター トレンド アナリストである John Mueller が作成した ページ指定された無限スクロール サイト のデモで、実際の挙動を確認できます。このデモは、検索エンジンとの相性を考慮する上で重要なポイントを示しています:

• 対象範囲: すべての個別のアイテムがアクセス可能。従来の無限スクロールでは、最初のページ読み込み後に表示された個別のアイテムをクローラーが見つけることはできません。
• 重複なし: 各アイテムは一連のページ指定したページで一度だけ指定（つまり、アイテムの重複はありません）。

検索エンジンとの相性を考慮した無限スクロールのベストプラクティス

1. はじめる前に:
• 無限スクロール ページのコンテンツを、JavaScript が無効でもアクセス可能な形で、複数のページに分割します。
• 各ページに含めるコンテンツの量を決定します。
• 検索ユーザーが直接このページにアクセスしても、探しているアイテムが簡単に見つけられるようにします（たくさんスクロールしなければコンテンツを見つけられないようなことは避けます）。
• 適当なページの読み込み時間を維持します。
• コンテンツを分割し、それぞれのページ間で重複が発生しないようにします（バッファリングを除きます）。



検索エンジンと相性が良い例を左に、そうでない例を右に示します。右側の例では、コンテンツのクロールとインデックス登録にそれぞれ重複が発生する可能性があります。


2. 検索エンジンが処理する無限スクロール用の 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
• 検索ユーザーにとってコンテンツの内容が想像できる価値のあるパラメータを設定します。
• コンテンツにアクセスする主な手法として、検索ユーザーにとって価値のないパラメータを使用することは避けます:
  好ましくない例: example.com/fun-places? radius=5&lat=40.71&long=-73.40
3. 無限スクロール ページに replaceState/pushState を実装します。どちら（あるいは両方）を採用するかはあなた（のサイトのユーザーの行動）次第ですが、Google では、次のような場合には pushState を（単独または replaceState と併せて）含めることをおすすめします:
• クリックや実際にページをめくるようなユーザーの行動がある場合
• ページ指定したコンテンツが表示されるたびに閲覧履歴に保存できるようにする場合
4. テストを行います。
• ユーザーが上下にスクロールする際に URL の中のページの値が調整されることを確認します。John Mueller の ページ指定された無限スクロール サイト のデモでは、上下のスクロールの挙動を示します。
• 範囲外のページが 404 レスポンスを返すことを検証します（つまり、 example.com/category?name=fun-items&page=999 では、コンテンツ内に 998 ページしかない場合に 404 レスポンスを返す必要があります）。
• 無限スクロールの実装によって引き起こされる可能性があるユーザーの利便性の問題 （英語）を調べます。

この記事に関するコメントやご質問は、 ウェブマスター ヘルプ フォーラム までお寄せください。

2019/06/11 追記
rel=next/prev の廃止にともない、該当箇所を修正しました。