ページネーションとは？SEOでの正しい実装

この記事の要点：

• ページネーションとは、記事や商品の一覧を複数のページに分け、「1・2・3…次へ」のリンクで移動できるようにする作りです。SEOでは、分けた各ページが独立したURLを持ち、リンクでたどれることが前提になります。
• Googleは、rel=”next”とrel=”prev”を現在は使っていません。ページどうしの関係は、通常のaタグのリンクで伝えます。
• 2ページ目以降のcanonicalは、1ページ目ではなく、そのページ自身のURLにします。1ページ目に向けると、2ページ目以降に載っている内容がインデックスされないおそれがあります。
• 「もっと見る」ボタンや無限スクロールは、Googlebotがクリックやスクロールをしないため、そのままでは続きの内容が見つからないことがあります。各まとまりにURLを持たせ、リンクでもたどれるようにします。
• 並び替えや絞り込みで同じ一覧が別のURLになる場合は、noindexやrobots.txtで検索に出す範囲を絞ります。

ページネーションとは：一覧を複数のURLに分ける作り

ページネーションとは、量の多い一覧や長い文章を複数のページに分け、ページ番号や「次へ」のリンクで移動できるようにする作りです。ブログの記事一覧、ネットショップの商品一覧、掲示板、検索結果の画面などで使われます。

SEOで大事なのは、見た目の部品ではなく、検索エンジンがすべてのページを見つけて読めるかどうかです。Googleの説明に沿うと、正しい実装の条件は次の4つにまとめられます（Google 検索セントラル：ページネーション、増分ページ読み込みと Google 検索への影響）。

一覧ページを分ける利点は、1ページの表示が軽くなること、読者が今どこを見ているかを把握しやすいことです。一方で、奥のページにある記事や商品ほど、トップからのクリック数が増え、見つかりにくくなります。この点は後の節で扱います。

Googleは分割したページをどう扱うか：rel=next/prevの今

以前、Googleは<link rel=”next”>と<link rel=”prev”>で、連続するページの前後の関係を読み取っていました。現在のGoogleの説明では、これらのタグは使っておらず、ほかの検索エンジンが使う可能性はある、とされています。

そのため、rel=next/prevを書いていても、Googleの検索での扱いは変わりません。すでに書かれているものを急いで消す必要もありません。大切なのは、次の点です。

• Googleは、ページネーションの各URLを、それぞれ別のページとして扱います。
• ページどうしのつながりは、href属性を持つ通常のリンクから読み取ります。
• 各ページから1ページ目へのリンクを置くと、一覧の始まりがどこかを示せます。Googleは、1ページ目が入口として適していることの手がかりになりうると説明しています。

「2ページ目以降は重複コンテンツになるのでは」という心配もよく聞かれます。一覧の各ページは載っている記事や商品が違うため、同じ内容のページではありません。同じ内容のページの扱いは「重複コンテンツの原因と直し方」で説明しています。

2ページ目以降のcanonical・noindex・robots.txtの決め方

2ページ目以降の設定は、よく間違えるところです。Googleは、ページネーションの最初のページを、一連のページすべての正規URL（canonical）にしないよう説明しています。canonicalは「同じ内容のページのうち代表はどれか」を示すもので、内容の違うページに使うと、2ページ目以降に載っている内容がインデックスされないおそれがあるためです。

例外は、並び替えや絞り込みで生まれるURLです。例：?sort=priceや?color=redを付けた一覧は、同じ商品の並びを変えただけのページです。Googleは、こうしたURLのインデックスをnoindexで防ぐか、robots.txtでクロールを抑えるよう説明しています。並び替えと絞り込みの組み合わせは無数に増えるため、検索に出したい一覧を先に決めます。

<!-- 例：https://example.com/blog/page/3/ のhead要素 -->
<link rel="canonical" href="https://example.com/blog/page/3/">

<!-- 誤り：すべてのページで1ページ目を指している -->
<link rel="canonical" href="https://example.com/blog/">

URLとリンクの作り方：ページ番号の付け方と、たどれるリンク

ページ番号をURLのどこに入れるか

ページ番号は、クエリパラメータ（?page=2）か、パス（/page/2/）に入れます。どちらでもかまいません。WordPressは標準で /page/2/ の形を使います。大事なのは、サイトの中で形を1つに決めることです。

1ページ目は、/blog/ と /blog/?page=1 のように2つのURLにならないようにします。一覧の中のリンクは、1ページ目へは /blog/ を使い、?page=1 は出力しないか、/blog/ へ転送します。

Googleがたどれるリンクにする

Googleは、主にhref属性に書かれたURLをたどってページを見つけます。ボタンのクリックで動くJavaScriptは、基本的に実行しません。ページ送りの部品は、次のようにaタグで書きます。

<nav aria-label="ページ送り">
  <a href="/blog/">最初</a>
  <a href="/blog/page/2/">前へ</a>
  <a href="/blog/">1</a>
  <a href="/blog/page/2/">2</a>
  <span aria-current="page">3</span>
  <a href="/blog/page/4/">4</a>
  <a href="/blog/page/4/">次へ</a>
</nav>

上は3ページ目の例です。前後のページと1ページ目へのリンクを置き、今いるページはリンクにせず、読み上げソフトにも分かるようにaria-currentで示しています。読み手の使いやすさのため、ページ送りは一覧の下に置き、押しやすい大きさにします。

「もっと見る」と無限スクロールの扱い

ページ番号の代わりに、「もっと見る」ボタンで続きを読み込む方法や、下までスクロールすると自動で続きが出る無限スクロールもあります。読み手には便利ですが、Googlebotはボタンを押したりスクロールしたりしないため、後から読み込まれる内容を見つけられないことがあります。

Googleは、無限スクロールや増分読み込みを検索に対応させる方法として、次のことを挙げています（Google 検索セントラル：遅延読み込みされたコンテンツを修正する）。

1. 読み込むまとまりごとに、固有で変わらないURLを持たせる。例：?page=12のように、絶対的なページ番号を使う。「昨日の分」のように意味が変わる値は使わない。
2. 同じURLを開けば、いつも同じ内容が表示されるようにする。
3. 各まとまりのURLへ、リンクで順にたどれるようにする。
4. 新しいまとまりが画面の主な部分になったら、History APIで表示中のURLを更新する。

// 例：3ページ目のまとまりを読み込み、画面の主な部分になったとき
history.pushState({ page: 3 }, "", "/blog/?page=3");

// ページ送りのリンクも残しておく（JavaScriptが動かなくても続きへ行ける）
// <a href="/blog/?page=4">次のページ</a>

つまり、見た目が無限スクロールでも、裏側ではページネーションと同じ「URLのある分割」を用意するのが基本です。JavaScriptで表示を作るページ全般の注意点は「JavaScript SEOの確認点」にまとめています。

1ページにまとめるか、分けるかの判断

ページを分けるかどうかに、Googleが決めた件数や文字数の基準はありません。読み手の目的と、ページの重さで判断します。

記事を複数のページに分ける作りは、読み手が何度もクリックすることになります。分けるなら、各ページが単独でも意味の通るまとまりにし、それぞれにふさわしい題名を付けます。

一覧の奥にある記事を見つけやすくするには、ページネーションだけに頼らない作りも大切です。カテゴリーやタグで一覧を短く分ける、関連する記事どうしをリンクでつなぐ、といった方法があります。考え方はサイト構造の考え方や内部リンクの設計で説明しています。

範囲外のページ番号と、記事の無い一覧の扱い

ページネーションでは、存在しないページ番号の扱いも決めておきます。例：記事が30本で、1ページに10本ずつ表示する一覧なら、ページは3ページまでです。/blog/page/99/ のようなURLを開いたとき、空の一覧を200（正常）で返すと、中身の無いページが検索の対象になりえます。

当サイト（seoagent.jp）では、記事がまだ無い一覧ページや、範囲外のページ番号が検索の対象になりうる状態でした。記事の無い一覧はnoindexにしてサイトマップから外し、範囲外のページ番号は404を返すようにしました。サイトの反映のたびに、404・noindexが意図どおりかを確認しています。

また、記事一覧 /ja/blog/ のcanonicalが存在しないURLを指していたことがあり、canonicalをページ自身のURLに直す処理を加えました。現在は、全ページのcanonicalが自分自身を指すことを自動の確認で確かめています。

正しく動いているかを確かめる手順と、よくある間違い

設定は画面の見た目では分からないため、次の手順で確かめます。

1. URLを直接開く：2ページ目、最終ページ、最終ページの次の番号を、それぞれブラウザで直接開きます。最終ページの次が404になるかを見ます。
2. 応答とcanonicalを見る：ターミナルで応答の番号とcanonicalを確かめます。
3. リンクを確かめる：ページのソースで、ページ送りがhref属性付きのaタグになっているかを見ます。
4. Search Consoleで見る：URL検査で2ページ目以降を調べ、「Google が選択した正規 URL」がそのページ自身かを確かめます。

$ curl -s https://example.com/blog/page/2/ | grep -io '<link rel="canonical"[^>]*>'
<link rel="canonical" href="https://example.com/blog/page/2/">

$ curl -s -o /dev/null -w "%{http_code}n" https://example.com/blog/page/99/
404

ページネーションと関わるテクニカルSEOの記事は「テクニカルSEOの記事一覧」にまとめています。

よくある質問

rel=”next”とrel=”prev”は削除したほうがよいですか？

Googleは使っていないため、残しても削除しても、Googleの検索での扱いは変わりません。ほかの検索エンジンが使う可能性はあるとされているため、すでに正しく出力されているなら、急いで消す必要はありません。

2ページ目以降が検索結果に出てしまいます。問題ですか？

多くの場合、問題ではありません。Googleは各ページを別のページとして扱います。ただし、1ページ目より2ページ目が出やすい場合は、各ページから1ページ目へのリンクがあるか、1ページ目の題名や説明が一覧の内容を表しているかを見直します。

2ページ目以降のtitleは1ページ目と同じでよいですか？

同じでも動作に問題はありませんが、「2ページ目」のように番号を加えると、読み手がどのページかを区別しやすくなります。WordPressのテーマやSEOプラグインには、自動で番号を加える設定があるものもあります。

無限スクロールをやめてページネーションに戻すべきですか？

見た目を変える必要はありません。各まとまりに固有のURLを持たせ、リンクでもたどれるようにし、表示中のURLを更新すれば、無限スクロールのままでも検索に対応できます。

SEOAGENTでできること

SEOAGENTでは、記事同士の内部リンクを提案・挿入し、一覧の奥にある記事にも関連する記事からたどれるようにできます。トピッククラスターの機能では、テーマごとの記事のまとまりを整理できます。ページネーションの出力やcanonicalの設定は、WordPressのテーマやプラグイン側で行います。

• 内部リンクの提案・挿入
• トピッククラスター

参考情報

• Google 検索セントラル：ページネーション、増分ページ読み込みと Google 検索への影響
• Google 検索セントラル：遅延読み込みされたコンテンツを修正する
• Google 検索セントラル：重複した URL を統合する
• Google 検索セントラル ブログ：検索フレンドリーな無限スクロールの推奨事項