ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて無限スクロール（英語）を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動（スクロールやボタンを押してさらにアイテムを読み込むなど）を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。
無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割した一連のページ群を生成するようにしましょう。
無限スクロール ページは、分割された一連のページ群に変えることで検索エンジンとの相性が良くなります。それぞれのページには類似した <title> が記述されています。
Google のウェブマスター トレンド アナリストである John Mueller が作成したページ指定された無限スクロール サイトのデモで、実際の挙動を確認できます。このデモは、検索エンジンとの相性を考慮する上で重要なポイントを示しています:
- 対象範囲: すべての個別のアイテムがアクセス可能。従来の無限スクロールでは、最初のページ読み込み後に表示された個別のアイテムをクローラーが見つけることはできません。
- 重複なし: 各アイテムは一連のページ指定したページで一度だけ指定（つまり、アイテムの重複はありません）。
検索エンジンとの相性を考慮した無限スクロールのベストプラクティス
- はじめる前に:
- 無限スクロール ページのコンテンツを、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 を使用することをおすすめします。
- 無限スクロール ページに replaceState/pushState を実装します。どちら（あるいは両方）を採用するかはあなた（のサイトのユーザーの行動）次第ですが、Google では、次のような場合には pushState を（単独または replaceState と併せて）含めることをおすすめします:
- クリックや実際にページをめくるようなユーザーの行動がある場合
- ページ指定したコンテンツが表示されるたびに閲覧履歴に保存できるようにする場合
- テストを行います。
- ユーザーが上下にスクロールする際に URL の中のページの値が調整されることを確認します。John Mueller のページ指定された無限スクロール サイトのデモでは、上下のスクロールの挙動を示します。
- 範囲外のページが 404 レスポンスを返すことを検証します（つまり、
example.com/category?name=fun-items&page=999では、コンテンツ内に 998 ページしかない場合に 404 レスポンスを返す必要があります）。 - 無限スクロールの実装によって引き起こされる可能性があるユーザーの利便性の問題（英語）を調べます。
デモ用サイト
解説記事を書いたウェブマスター・トレンドアナリストのJohn Mueller氏が、推奨構成に従った無限スクロールのデモンストレーション用サイトを作っています。
検索エンジン向けの構成としての着目点は次です。
- 対象: すべての個別アイテムにアクセス可能。従来型の無限スクロールでは、最初のページを読み込んだ後に表示される個別のアイテムを検索エンジンは発見することができない。
- オーバーラップなし: 各アイテムはページ分割した続きのなかで1度だけ表示される。つまりアイテムの重複がない。
見た目には一般的な無限スクロールのページです。
しかし下にスクロールしていくと、ある一定の地点で、ページネーションを表すパラメータが付いたURLに自動的に切り替わります。
またページ最下部にあるページ送りの数字も自動的に切り替わります。
ページ番号をクリックすると、ページネーション指定された無限スクロールのなかのその場所へ移動します。
ユーザーからしてみると1つのページで次々とコンテンツが広がっていく無限スクロールですが、検索エンジンからしてみると上で解説したようにページ分割した複数のページとして作られています。
Googleの推奨構成を採用すべきか
「無限スクロールとは何か」についてここでは詳しく説明しませんでした。
無限スクロールを知らない人にとってはここで解説した推奨構成は少なくとも今は役に立たないはずだからです。
無限スクロールを利用したサイトで、検索エンジンからのトラフィックが重要であるならGoogleの推奨に従って構成するといいでしょう。
何らかの推奨をGoogleが示すと「これに従わないとペナルティを受けますか？」やペナルティとまではいかなくても「評価が下がりますか？」という行き過ぎた心配をする人が出てきます。
そんなことはありません。
Googleが無限スクロールの推奨構成を示したのは、無限スクロールであっても確実にクロール・インデックスできるようにするためです。
人間とは異なり、検索エンジンは、次から次へと下にスクロールしてコンテンツを展開できません。
できなくはないかもしれませんが途中で止めることが困難です。
まさしく「無限」にスクロールし続けてしまうかもしれません。
無限スクロールは、ユーザビリティ的には優れていても検索エンジン的には処理が厄介なのです。
「検索エンジンからのトラフィックはさほど重要ではない」というのであれば、七面倒臭い構成を採用しない選択肢は当然ありです。
ユーザビリティに優れた無限スクロールと検索エンジンにやさしい無限スクロールの両方を実現したいときに、推奨構成を検討してください。
無限スクロールの向き不向き
さて、すぐ前で「無限スクロールは、ユーザビリティ的には優れている」と言いました。
しかし必ずしもそうとは限りません。
無限スクロールに向くタイプのサイト、向かないタイプのサイトがあります。
場合によっては逆に、無限スクロールがユーザビリティを低下させ、ひいてはコンバージョン率を下げることもあります。
たとえば、TwitterのタイムラインやGoogle+のストリームのように次々と下に眺めていって、戻ることがほとんどないタイプのサイトでは無限スクロールは操作が楽で見やすいと感じるユーザーは多いでしょう。
次のページに移るためにためにわざわざクリックする必要がありません。
流れるように読み進めていけます。
ところが、ECサイトの商品一覧ページで多くのアイテムをリスト表示するような状況では無限スクロールは適していません。
気になったアイテムがあってもさらに下に進んでいったとき、あとからそのアイテムがあった場所に戻るのが非常に難しいからです。
1つだけならまだしも、2つ3つと気になるアイテムが複数あった場合、どこにそのアイテムがあったかを容易には探せません。
無限スクロールは、下に進めば進むほどそのページのアイテムの数が増えていくうえに、“印”になるものがないのです。
ページネーションしている状況であれば、ページにリストするアイテムの数を妥当な数に設定しておけば気になるアイテムをもう一度見つけるのは難しくありません。