このページは、外部サイト
Google ウェブマスター向け公式ブログ の情報をRSSフィード経由で取得して表示しているため、記事の一部分しか表示されていなかったり、画像などが正しく表示されなかったり、オリジナル記事が意図したデザインと異なっていたりする場合があります。
完全な状態のオリジナル記事は 「
検索エンジンとの相性を考慮した無限スクロールのベストプラクティス」 からご覧ください。
ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて
無限スクロール（英語）を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動（スクロールやボタンを押してさらにアイテムを読み込むなど）を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。
無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割した一連のページ群を生成するようにしましょう。
無限スクロール ページは、分割された一連のページ群に変えることで検索エンジンとの相性が良くなります。それぞれのページには類似の <title> が含まれ、 <head> では rel=next/prev の値が宣言されています。
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
- 検索ユーザーにとってコンテンツの内容が想像できる価値のあるパラメータを設定します。
- コンテンツにアクセスする主な手法として、検索ユーザーにとって価値のないパラメータを使用することは避けます:
好ましくない例: example.com/fun-places?radius=5&lat=40.71&long=-73.40
- 各ページで、<head> 内に rel=next と rel=prev の値を含めるページ指定を行います。<body> 内のページ指定の値は、ウェブマスターが意図しないところで、ユーザー生成コンテンツによっても挿入される場合があるため、Google のインデックス登録では無視されますので、ご注意ください。
- 無限スクロール ページに replaceState/pushState を実装します。どちら（あるいは両方）を採用するかはあなた（のサイトのユーザーの行動）次第ですが、Google では、次のような場合には pushState を（単独または replaceState と併せて）含めることをおすすめします:
- クリックや実際にページをめくるようなユーザーの行動がある場合
- ページ指定したコンテンツが表示されるたびに閲覧履歴に保存できるようにする場合
- テストを行います。
この記事に関するコメントやご質問は、
ウェブマスター ヘルプ フォーラムまでお寄せください。
Written, reviewed, or coded by John Mueller, Maile Ohye, and Joachim Kupke
Original version:
Infinite scroll search-friendly recommendations
Facebookいいね!の多い記事
Twitterで言及の多い記事
はてなブックマーク人気記事
