無限スクロールとSEOの正解|「もっと見る」とページネーションをどう使い分けるべきか解説

※当サイトの記事には広告・アフィリエイトリンクが含まれる場合があります。

一覧ページで、無限スクロール「もっと見る」ボタンを使うケースは少なくありません。

ユーザー体験の面では便利ですが、実装の仕方によっては、検索エンジンが一覧の後半コンテンツを見つけにくくなることがあります。

特に、JavaScript の動作だけに依存していて、Googlebot がたどれるリンク可能なURLがない場合は、一覧の深い部分が見つかりにくくなります。

Google Search Central でも、ページネーションや incremental page loading では、各ページにリンク可能なURLを持たせることGooglebot がたどれるリンクを用意することが重要だと案内されています。

参考:developers.google.com

この記事では、無限スクロール・「もっと見る」・ページネーションの違いを整理しながら、SEOでどのように実装すべきかを実務目線で解説します。

一覧ページ全体の設計を先に整理したい方は、パンくずリストとページネーションの最適化|一覧ページ設計で失敗しやすいSEOポイントを解説もあわせてご覧ください。

無限スクロールや「もっと見る」がSEOで問題になる理由

問題になりやすいのは、追加コンテンツがリンク可能なURLとして存在していない場合です。

検索エンジンは、ページ内のリンクをたどって新しいURLを見つけます。Google Search Central でも、Google は <a> 要素の href をたどってページを発見すると案内しています。

一方で、次のような実装は問題になりやすいです。

  • クリックしないと追加要素が見えないが、次ページURLが存在しない
  • スクロールで追加されるが、URLが変わらない
  • ハッシュだけでページ状態を変えている

この状態だと、ユーザーには見えていても、Googlebot が一覧の後半コンテンツに安定して到達しにくくなります。

 

結論:SEO上いちばん安定するのは「ページネーションを持つ設計」

結論から言うと、SEO上もっとも安定しやすいのは、各ページに固有URLを持つページネーション設計です。

たとえば次のような形です。

  • /category?page=1
  • /category?page=2
  • /category?page=3

このように分けておけば、Googlebot が各ページへ到達しやすくなります。 そのうえで、ユーザー向けには「もっと見る」や自動読み込みを上にかぶせる形にすると、UXとSEOを両立しやすくなります。

 

無限スクロール・もっと見る・ページネーションの違い

方式 特徴 SEO上の注意点
ページネーション 一覧を複数URLに分ける 最も安定しやすい。各ページに固有URLを持たせやすい
もっと見る クリックで続きを読み込む 裏で次ページURLとリンク構造を持たせる必要がある
無限スクロール スクロールで自動追加 URLが変わらず、リンク可能ページがないと見つけにくくなる

つまり、UXだけを見るなら無限スクロールや「もっと見る」は便利ですが、SEOを考えるなら、ページネーションを土台にして、その上にJSでUXを足す考え方が安全です。

Google推奨に近い実装の考え方

1. 各ページに固有URLを持たせる

まず大前提として、一覧の続きに当たる部分は、それぞれ別URLでアクセスできるようにします。

Google Search Central でも、インクリメンタルロードを使う場合は、各チャンクに固有の永続URLを持たせることが重要だと案内しています。

 

2. Googlebot がたどれるリンクを置く

見た目がボタンでもよいですが、裏側では次ページへ進める <a href> リンクを用意しておく方が安全です。

「もっと見る」を使う場合も、JS無効時には通常リンクとして動くようにしておくと、クローラにもユーザーにもやさしい構造になります。

 

3. JSは“追加のUX”として使う

理想は、まずページ分割URLとリンク構造があり、その上でJSによってスムーズに続きを読み込む形です。

つまり、SEOの土台はURLとリンクUXの強化はJSと役割を分けると整理しやすいです。

 

「もっと見る」を使うならどう設計するか

「もっと見る」を使いたい場合は、次の条件を満たすと安全です。

  • 次ページに対応するURLがある
  • そのURLへ <a href> で移動できる
  • JS有効時だけボタンで追加読み込みする

これは、プログレッシブエンハンスメントの考え方に近いです。 まずリンク可能な基盤を持ち、その上でJSで体験を良くする方が、SEOでも保守でも安定します。

 

無限スクロールを使うならどこに注意するか

無限スクロールを使う場合でも、SEOを完全に諦める必要はありません。 ただし、次の点を押さえる必要があります。

  • 各セクションに対応するURLを持たせる
  • Googlebot がそのURLに直接アクセスできるようにする
  • 内部リンクやサイトマップで深いURLにも到達できるようにする

URLが存在せず、スクロール時の画面変化だけで続きが表示される実装は、SEO上かなり不安定です。

 

rel="prev" / rel="next" は今どう考えるべきか

昔はページネーションで rel="prev"rel="next" がよく使われていましたが、Google は現在これを検索のインデックス信号としては使っていません。 

いま重要なのは、

  • 各ページに固有URLがあること
  • そのURLへリンクでたどれること
  • canonicalやnoindexを誤用しないこと

です。 つまり、rel prev/next に頼るより、URLとリンクの設計を優先した方がよいです。

 

lazy-load画像やカードの注意点

一覧ページでは、画像やカードの lazy-load を使うことも多いです。 これは基本的には問題ありませんが、使い方には注意が必要です。

  • 折り返し下の画像は lazy-load で問題ない
  • 最初に大きく見える重要画像は遅延しすぎない方がよい
  • 画像の幅・高さを指定してレイアウト崩れを防ぐ

Google は画像の遅延読み込み自体を否定していませんが、Google が画像にアクセスできるようにすること、lazy-load 実装でも発見可能であることが重要です。 

 

公開前に確認したいチェックポイント

  • 各ページに固有URLがあるか
  • 次ページへ <a href> でたどれるか
  • JS無効でも最低限アクセスできるか
  • 一覧後半のURLがサイトマップや内部リンクで見つかるか
  • canonical を誤って1ページ目に寄せていないか

このあたりを確認しておくと、一覧ページの後半コンテンツが見つからない事故をかなり防ぎやすくなります。

 

関連記事

構造改善の優先順位を整理したい方へ

一覧ページの設計や内部SEOのどこから直すべきか迷う場合は、SEO日報のツールも活用できます。

SEO施策 優先順位診断ツールはこちら

 

実装判断で迷うときは

無限スクロールや「もっと見る」は、UX上は魅力的でも、SEO上は実装判断に迷いやすいです。

  • 一覧を何ページに分けるべきか
  • ボタン型で十分か
  • 無限スクロールでも問題ないか

こうした迷いがある場合は、SEO日報コミュニティも活用できます。

内部SEOの相談テーマ一覧はこちら

 

まとめ

無限スクロールや「もっと見る」自体が悪いわけではありません。

問題になるのは、検索エンジンが一覧の後半コンテンツを見つけられない構造になっていることです。

SEO上もっとも安定しやすいのは、各ページに固有URLを持たせたページネーションを土台にし、その上でJSでUXを改善する考え方です。

つまり、UXのために無限スクロールを選ぶとしても、裏側ではURLとリンクで一覧構造を保つことが重要です。