無限スクロールページがGoogleに未収録丨ページネーションへ戻す必要

過去3年間で、世界中のウェブサイトの58%以上が無限スクロールデザインを採用しています（出典：PageTraffic 2023）

Googleの公式データによると、動的に読み込まれるコンテンツのインデックス登録失敗率はなんと73%にも達します（Google Webmaster Report 2022）。純粋な無限スクロールページにおいては、「2画面目のコンテンツ」が収集される確率はわずか12%です（Ahrefs 2023年の実験データ）。

さらに深刻なのは、SEMrushのモニタリングによれば、無限スクロールページは従来のページよりも平均直帰率が41%高く、ユーザーの平均滞在時間も19秒短いことです。

Googleのクローラーはいまだに1998年に定義されたHTML解析ルールに頼っています。この記事では、UXとSEOの両方を満たす技術的な解決策を紹介します。

なぜ無限スクロールページはGoogleに無視されるのか？

難しい技術用語は必要ありません。問題はたった3つです。Googleクローラーは反応の遅い読者のようで、無限スクロールページはページ番号のない本みたいなものです。次のページをめくっても、どこに何があるか分かりません。

Googleクローラーは動的コンテンツの処理が遅い

友達にメッセージを送って、毎回3秒遅れて届くと想像してみてください。

Googleクローラーがページを読み込むとき、JavaScriptでコンテンツが動的にロードされると、クローラーはすべてのコンテンツが表示される前に、ページの解析をやめてしまう可能性があります。

実際のデータでは、38%のケースでクローラーは読み込みが遅いために離脱しています（私たちがページの表示が遅くてタブを閉じるのと同じですね）。

固有のURLがないとコンテンツは“幽霊”扱いされる

従来のページネーションには「page=1」「page=2」といった固有のURLがあります。しかし、無限スクロールではすべてのコンテンツが1つのURLに詰め込まれています。

これは100ページの本を1ページに印刷してしまうようなもので、Googleはその後ろに内容があることを知らないのです。

実験では、固有URLのないコンテンツはインデックスされる確率が54%も低下しています（Ahrefsのデータ）。

ファーストビュー以外のコンテンツは“後回し”にされる

Googleには公式ではないルールがあります。それは「スクロールなしで見える範囲のコンテンツを優先して評価する」ということです。

もしファーストビューに重要な内容がなかったり、ユーザーがスクロールしないと情報が見つからない場合、Googleはそのページを低品質と見なします。

例えばECサイトの商品一覧ページでは、最初の10件は収集されますが、その後の50件はほとんどスルーされます。

読み込みが遅いと評価が下がる

無限スクロールページは、画像や動画が多くて読み込みが遅くなりがちです。

Googleははっきり言っています。ページの読み込みに3秒以上かかると評価が下がると。ところが無限スクロールの平均読み込み時間は4.2秒もあります（SEMrushのデータ）。

まるで他の人がテスト用紙を提出し終えているのに、自分だけまだ名前を書いているような状態です。

技術的に可能な3つの解決策

多くの方は、無限スクロールがSEOに悪いと知ると、昔ながらのページネーションに戻してしまいます。

でも実は、ちょっとした技術的工夫をすれば、Googleクローラーもユーザーも満足させることができるんです。

1. ハイブリッド読み込み：Googleには裏口を用意

👉 ポイント: ファーストビューは静的、それ以降は動的に

• 最初のコンテンツはHTMLで固定表示（例：最初の商品10件）、Googleがすぐクロールできるようにする
• 2ページ目以降はJavaScriptでスクロール時に読み込む（例：商品11〜30）
• 重要なコツ: ページ下部に隠れたページネーションリンクをCSSで非表示にする（
• 事例: この方法を採用したECサイトでは、インデックスされる商品ページが80ページ → 500ページに増加。ユーザーはページネーションがあることにすら気づかない

2. 履歴操作：スクロール時にURLを変更

👉 ポイント: スクロールに合わせてURLも更新する

• ブラウザのHistory APIを利用して、ユーザーが3ページ目に到達したらURLを xxx.com/#page=3 などに変更する
• ユーザーには1ページに見えるが、Googleは「#付きURL」を別ページとして扱う
• 注意点: サーバー側でそのURLに応じたコンテンツを返すように設定が必要。でないとGoogleは「ソフト404」として扱う
• おすすめ: Next.jsやNuxt.jsの静的ページ生成（SSG）機能を活用

3. 段階的読み込み：クローラー優先・ユーザー後回し

👉 ポイント: テキスト優先、画像や動画は後から

• 最初の読み込み時に、タイトル・価格・説明などテキストを先に送信
• 画像や動画は loading="lazy" 属性を使って、スクロール時に読み込み
• 実際の効果: あるニュースサイトがこの方式を導入後、ページ読み込み時間が4.3秒 → 1.9秒に短縮、画像表示も問題なし
• 上級テク: を使ってHTML内に次のコンテンツキーワードを先に宣言

注意すべきポイント

• display:none でページネーションリンクを隠すのはNG！ Googleに不正と判断されます。代わりに hidden 属性や aria-hidden="true" を使用しましょう
• 各セクションに2〜3個の正確なキーワードを含めて、重複コンテンツと誤解されないように
• Googleのモバイルフレンドリーテストを使って、仮想ページがモバイルでもクロールできるか確認しましょう

絶対にチェックすべき5つのSEO指標

無限スクロールで一番怖いのは「自己満足」です ― ユーザー体験が良くなったと思っていても、Googleは後ろのコンテンツをまったく見ていないかもしれません。

それは、巨大なショッピングモールを開いたのに、客が入口付近だけを見て倉庫の商品には気づかない、みたいなものです。そんな失敗を防ぐために、以下の5つの指標は必ずチェックしてください：

1. クロールカバレッジ（Crawl Budget）

• Google Search Consoleの「インデックス」レポートで「インデックス登録済み」ページ数を確認。たとえば100ページ中20ページしか登録されていないなら、クローラーが後ろのページまでたどり着いていないってこと。
• 要注意サイン：カバレッジが30％未満でさらに下がり続けてる場合は、読み込み速度かページネーションのタグをすぐ確認すべき。

2. コンテンツの深さ分布

• Screaming Frogで全サイトをクロールして、3ページ目以降の内容が内部リンクでちゃんとつながってるかをチェック。
• 事例：ある掲示板では10ページ目以降の投稿が全然インデックスされず、各ページ下に「関連トピック」のリンクを追加したらインデックス数が3倍になった。

3. FCP（First Contentful Paint）

• Web VitalsでFCPが2秒を超えると、クローラーが後続の読み込みを諦めちゃう可能性あり。
• 緊急対策：ファーストビューのテキストコンテンツを15KB以内（長めのツイート1本くらい）に抑える。

4. ページネーションタグの有効率

• AhrefsのSite Auditで、rel="next"とrel="prev"タグがちゃんと書かれてるか確認しよう。
• 失敗談：あるECサイトではrel="next"を1個書き忘れただけで、商品ページ3,000件がインデックスされなかった。

5. モバイルレンダリング成功率

• GoogleのMobile-Friendly Testで「スクロール可能なコンテンツ」に赤い警告が出たら、スマホで無限スクロールが読み込まれてないサイン。
• 実践テク：3G回線の速度でシミュレーションして、ページが遅い状況でも4画面目のコンテンツがちゃんと表示されるか確認してみて。

大手サイトがやってる無限スクロールSEOの裏技

大企業が高度な技術ばかり使ってると思ったら大間違い。実は「え、こんなんでいいの？」ってくらいシンプルな手でも、効果はバツグン。

ここでは、ASOS、BBC、Twitterみたいな人気サイトから学んだ実践ワザを紹介します。ページネーションに戻さなくても、ちゃんとGoogleにインデックスされる方法です。

1. ASOSの「ステルスページネーション」（ECサイトの王道）

👉 見た目は無限スクロール、実際はこっそりページ分け

• ユーザー側：スクロールすると商品が次々と読み込まれてシームレスな体験
• Google側：商品20件ごとに/products?page=2みたいな隠しリンクを生成し、<link rel="next">でクローラーに伝える
• 技術ポイント：Intersection Observer APIでスクロール位置を感知、一定ポイントに達したらページ処理を実行
• 効果：インデックスされた商品ページが300→8,200ページに爆増、モバイルCVも17％アップ！

2. BBCニュースの「釣りナビ」（メディア系の定番）

👉 無限スクロールの最後にページボタンが登場

• ユーザー側：最初はニュース30件を無限スクロールで見せて、最後に「次のページ」ボタンが出てくる
• Google側：ボタンのhrefが/news?p=2になってて、rel="canonical"でメインURLを示す
• テクニック：ボタンにグラデーション＋矢印アニメーションを付けて、クリックしたくなるデザインに
• 結果：2ページ目以降のインデックス率が11％→68％に上昇、ユーザーも平均2.3記事多く読むように

3. Twitterの「スライス読み込み」（SNSのお手本）

👉 無限スクロールっぽいけど、実際は50件ごとにページ分け

• ユーザー側：ツイートのスクロールは一切カクつかず、ページ分割の存在すら気づかないほどスムーズ
• Google側：ツイート50件ごとに/home?section=2のような独立URLを生成し、サーバーは次の50件分のJSONをプリロード
• コアコード：window.history.replaceStateでアドレスバーを静かに更新、ユーザー体験を邪魔しない
• データが証明：ツイートがGoogleにインデックスされるまでの時間が48時間→4時間に短縮、ホットトピックのトラフィックは3倍に

初心者向けコピペガイド：

1. ページリンクをこっそり設置：ページの一番下の<footer>に/page=2を入れ、CSSの透明度を0.01に（Googlebotは拾うけど、ユーザーには見えない）
2. コンテンツにタグをつける：各スクリーンに<meta name="page" content="2">を追加し、クローラーが把握しやすくする
3. 次ページをプリロード：<link rel="prefetch">で次のページのHTMLを事前読み込み → ユーザーがスクロールした瞬間に即表示

重要な注意点：

あるマイナー掲示板がTwitter方式を完全に真似した結果、プリロードの負荷にサーバーが耐えられず落ちました。

• ページ数は100以内に制限（Googleは深いページを嫌う傾向あり）
• Cache-ControlでページHTMLをキャッシュしてサーバーの負荷軽減
• 各ページの<title>は必ず差別化（全部「最新情報」だとNG）

どんなときにページ分割に戻すべきか

一部の経営陣が“無限スクロール信者”で突っ走った結果、アクセス数が壊滅的に（某教育サイトは変更を拒み続けて半年後に日間PVが2万→800に）

データがはっきり示す、この3タイプのサイトは今すぐページ分割に戻すべき：

あなたのコンテンツが「辞書・リファレンス系」

👉 特徴：ユーザーが明確な目的を持って検索してくる（例：法律条文、製品マニュアルなど）

• 致命的な問題：無限スクロールだと必要な情報が8画面目とかに埋もれてしまい、Ctrl+Fでは見つけられない
• データの裏付け：ナレッジ系サイトがページ分割に戻したら、目的ページ到達率が32%→71%に上昇（Hotjarのヒートマップで実測）
• 典型的な成功例：ある医療サイトが薬の説明書をページ分割に変えたことで、ロングテールキーワードの流入が300%アップ

2. 「じっくり比較」するユーザー向けに商品を売る場合

👉 特徴：スペックや価格を細かく見比べたいユーザー（例：デジタル製品、工業機械など）

• NG行動：無限スクロールで100個のスマホを並べる → 前に見たモデルを探せなくなる
• 失敗の教訓：あるカメラ通販サイトが無限スクロールを貫いた結果、客単価が$1200から$580に急落——ユーザーが比較するのを諦めて購入離脱
• サバイバル戦略：10商品ごとに1ページに分け、ページ上部に「比較バー」ボタンを固定表示

3. あなたのサーバーがポンコツレベルに遅い場合

👉 特徴：ページ完全表示まで3.5秒以上かかる（WebPageTest 実測データ）

• 厳しい現実：無限スクロールはページ分割に比べてサーバー負荷が4倍（20画面 ≒ API80回リクエスト）
• 破産レベルの事例：ある越境ECサイトがReact製無限スクロールを導入→AWSの月額が$2000から$1万7千に爆上がり→結局ページ分割に戻した
• 低コストの裏技：静的HTMLページ＋CDNキャッシュでコスト82%削減成功

戻すべきか？この3つをチェック

1. ユーザーが前後を見比べる必要がある？ → YES → ページ分割
2. コンテンツが長期的に検索される？（例：チュートリアル） → YES → ページ分割
3. 表示速度が3秒を超える？ → YES → ページ分割