ページネーションとは│実装方法と実装のポイントを解説

ページネーションとは、大量の商品一覧や長文コンテンツを複数のページに分割し、「1, 2, 3...次へ」といったリンクでユーザーがページ間を移動できるようにする機能のことです。

「ページ送り」や「ページング」、「ページャー」とも呼ばれることもあります。

例えば、 ECサイトで100件の商品がある場合に「1ページあたり20件を表示し、ページ番号で切り替える」という実装がページネーションです。

ページネーションを実装することで「ページの表示速度の改善」「ページの読みやすさの向上」といったメリットがあります。

ページネーションは、1ページあたりの情報量やデータ量が多いページで必要になることがあります。

例えば、以下のようなケースです。

上記に該当するページでは、コンテンツを適度に分割することで、見やすさや操作性が向上します。

ただし、ページネーションを導入する際は、情報量の多さだけで判断しないことが大切です。Googleも、ユーザーが分割されたページよりも単一ページを好む結果の公表をしており、必ずしもページネーションが最適な方法になるわけではありません。

参考：検索結果の「すべて表示」ページ

「一覧で探すページなのか」「まとめて読むページなのか」を踏まえて、分割すべきか判断しましょう。

ページネーションを導入することで、ユーザー体験の改善やページの表示パフォーマンスの向上などのメリットがあります。

具体的なメリットは以下になります。

本記事では、ページネーションの実装方法について以下2つのパターンで紹介します。

それぞれ詳しく解説します。

HTMLでページネーションを実装する場合は、一覧の内容を複数のページに分け、それぞれに「前へ」「次へ」「ページ番号」などのリンクを設置して移動できるようにします。

HTMLでは主に <a> タグを使って、各ページへの導線を作ります。

以下は、ページネーションの簡単なHTML例です。

<h1>記事一覧</h1>

<ul>
 <li>記事1</li>
 <li>記事2</li>
 <li>記事3</li>
</ul>

<div class="pagination">
 <a href="page1.html">1</a>
 <a href="page2.html">2</a>
 <a href="page3.html">3</a>
 <a href="page2.html">次へ</a>
</div>

上記を実装すると以下のようにページネーションが表示されます。ただし、青いテキストリンクが横並びになるだけで、ボタンらしい見た目は一切ありません。

ボタン風のページネーションにするには、CSSを使って作成する必要があります。

見た目をボタンのように整えるには、CSSでデザインを調整します。

例えば、以下のようなCSSを追加すると、ページ番号をボタン風に表示できます。

.pagination {
display: flex;
gap: 8px;
margin-top: 20px;
}

.pagination a {
display: inline-block;
padding: 6px 12px;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
border-radius: 4px;
}

.pagination a:hover {
background-color: #f5f5f5;
}

このCSSでは、ページ番号のリンクに余白や枠線を付けることで、ボタンのような見た目にしています。また、hoverを設定することで、マウスを重ねたときに背景色が変わるようになります。

WordPressでは、プラグインを使ってページネーションを実装する方法があります。

今回は、「WP-PageNavi」を使ったページネーションの実装方法を紹介します。

テーマによっては、標準でページネーション機能が用意されている場合もあります。事前にテーマの仕様を確認しておきましょう。

ページネーションは、単にページ番号を並べればよいわけではありません。

ユーザーが現在どこを見ているのか、次にどこへ進めばよいのかが直感的に分かる設計にすることで、操作性が大きく向上します。

そのため、ページネーションを実装する際は、見た目のデザインだけでなく「移動のしやすさ」や「クリックのしやすさ」など、ユーザーの使いやすさを意識することが重要です。

使いやすいページネーションを設計するためのポイントは以下になります。

それぞれ詳しく解説します。

ページネーションを実装する際は、ユーザーが現在どのページを見ているのか分かるようにすることが重要です。

例えば、利用者が第3ページにいる場合、そのページ番号を大きく表示したり、他のページ番号とは異なる色に変更することで、直感的に現在自分が見ているページを認識できます。

HTMLでは、現在のページ番号を <a> タグではなく <span> タグで表示する方法がよく使われます。

<div class="pagination">
　 <span class="current">1</span>
　 <a href="page2.html">2</a>
 　<a href="page3.html">3</a>
　 <a href="page2.html">次へ</a>
</div>

このように現在のページ番号だけ表示方法を変えることで、ユーザーが今どのページを閲覧しているのか一目で分かるようになります。

ページネーションを実装する際は、現在のページの前後にあるページへ簡単に移動できるようにすることも重要です。

ページ番号だけを並べるのではなく、「前へ」「次へ」といったリンクを設置することで、ユーザーは1ページずつスムーズに移動できるようになります。

例えば、「前へ」「次へ」以外にも、「PREV」・「NEXT」「＜」・「＞」で表現した場合でも、一目で前後への移動が可能であることが伝わります。

特にページ数が多い場合、ページ番号を探す手間が減るため、操作性の向上につながります。

<div class="pagination">
　<a href="page1.html">前へ</a>
　<a href="page1.html">1</a>
　<span class="current">2</span>
　<a href="page3.html">3</a>

　<a href="page3.html">次へ</a>
</div>

ページネーションを実装する際は、「前へ」「次へ」だけでなく、最初のページや最後のページへ移動できるリンクを設置すると、ユーザーが目的のページに移動しやすくなります。

例えば、ページ数が多い場合、「前へ」を何度もクリックしないと最初のページに戻れないと、ユーザーにとって不便になります。そのため、「最初へ」「最後へ」といったリンクを設置しておくと、ユーザーの操作性が向上します。

<div class="pagination">
 　<a href="page1.html">最初</a>
 　<a href="page2.html">前へ</a>

 　<a href="page1.html">1</a>
 　<span class="current">2</span>
 　<a href="page3.html">3</a>

 　<a href="page3.html">次へ</a>
 　<a href="page10.html">最後</a>
</div>

ページネーションを実装する際は、すべてのページ番号を表示するのではなく、現在のページを中心に前後数ページだけ表示する方法もよく使われます。

ページ数が多い場合、すべてのページ番号を並べると表示が長くなり、ユーザーにとって見づらくなってしまいます。そのため、現在のページを基準に「前後2〜3ページ」程度のリンクを表示すると、見やすく操作しやすいページネーションになります。

<div class="pagination">
  <a href="page1.html">最初</a>
  <a href="page4.html">前へ</a>

  <a href="page3.html">3</a>
  <a href="page4.html">4</a>
  <span class="current">5</span>
  <a href="page6.html">6</a>
  <a href="page7.html">7</a>

  <a href="page6.html">次へ</a>
  <a href="page10.html">最後</a>
</div>

ページネーションを実装する際は、ユーザーがクリックしやすいサイズにすることも重要です。

リンクが小さすぎるとクリックしにくく、特にスマートフォンでは操作性が低下してしまいます。そのため、ページ番号には適度な余白を設け、ボタンのように押しやすい大きさで表示しましょう。

また、視認性を高めるために、ボタン同士の間隔を適切に空けることも大切です。

CSSで font-size、padding、marginなどを調整すると、見やすく操作しやすいページネーションを作成できます。

ページネーションは、ページの下部に設置するのが一般的です。

多くのユーザーは、一覧を上から順番に確認し、ページの最後まで見たタイミングで次のページへ進みます。そのため、ページネーションを下部に配置することで、自然な流れで次のページへ移動しやすくなります。

反対に、ページの上部や途中にページネーションがあると、ユーザーが一覧を最後まで見終わる前に次のページへ移動してしまう可能性があります。

また、一度ページの最下部までスクロールした後に、上部にあるページネーションまで戻らなければならない設計だと、ユーザーに余計な手間をかけてしまいます。

ページネーションを実装する際は、以下のポイントに注意しましょう。

それぞれ詳しく解説します。

ページネーションを実装する際は、ページを細かく分割しすぎないことが重要です。

1ページあたりの情報量が少なすぎると、ユーザーは何度もページを移動しなければならず、閲覧の手間が増えてしまいます。また、ページ数が必要以上に増えると、全体像を把握しにくくなり、使いづらい一覧ページになってしまいます。

そのため、一覧の種類に応じて、適切な件数でページを区切ることが大切です。

このように、ユーザーが一覧を確認しやすい件数でページを分割することで、操作性の高いページネーションを設計できます。

ページネーションを実装してページを分割する際は、各ページごとに異なるURLを割り当てるようにしましょう。

ページごとにURLが分かれていないと、ユーザーが特定のページを直接開きにくくなるほか、検索エンジンも各ページの内容を区別しづらくなることがあります。

例えば、以下のようにページ番号ごとにURLを分ける形が一般的です。

このように、ページごとに区別できるURLを設定しておくことが、ページネーション実装時の注意点の1つです。

ページネーションを実装する際は、ページ番号のURLにURLフラグメント（# 以降の文字列）を使わないようにしましょう。URLフラグメントはページ内の特定箇所へ移動するためのもので、別ページを区別する用途には向いていません。

例えば、以下のように #page2 や #page3 を使ってページ番号を表す設計は適切ではありません。

このようなURLでは、検索エンジンが各ページを個別に認識しにくくなる可能性があります。

そのためページネーションでは、?page=2や/page/2/のように、各ページを区別できるURLを設定することが重要です。

以前は、<link rel="next" href="..."> と <link rel="prev" href="..."> を使って、ページネーションでつながるページ同士の関係を検索エンジンに伝える方法が一般的でした。

しかしGoogleは現在、rel="next" と rel="prev" をインデックス登録シグナルとして使用していません。

そのため、Google向けのSEO対策として rel="next" / rel="prev" を必須と考える必要はありません。

現在のページネーション対策では rel="next" / rel="prev" の有無よりも、各ページに適切なURLを割り当てること、通常のリンクでたどれるようにすること、必要に応じて view-all ページなども検討することのほうが重要です。

ページネーションは適切に実装されていれば、SEOに直接悪影響を与えるものではありません。

ただし、実装方法によっては検索エンジンのクロールやインデックスに影響する可能性があります。主に注意すべきポイントは以下の3つです。

それぞれ詳しく解説します。

ECサイトやデータベース型サイトでは、「価格順」「人気順」などの並び替え機能が用意されていることがあります。この並び替えページにページネーションが組み合わさると、同じ内容のページが大量に生成される可能性があります。

例えば、以下のようなURLが生成されるケースです。

上記の場合、検索エンジンにとって似た内容のページが増え、重複ページとして扱われる可能性があります。

そのため、並び替えページにはnoindexの付与かrobots.txtでクロールのブロック を行い、重複ページとして扱われないようにしましょう。

ページネーションの2ページ目以降は、自己URLを参照する形で canonicalタグを設定することがGoogleから推奨されています。

ページ分けされたページ列の最初のページを正規ページとして使用しないでください。
代わりに、固有の正規 URL を各ページに付与してください

URL を正しく使用する

2ページ目以降のページをすべて1ページ目にcanonicalで統合してしまうと、検索エンジンがそれぞれのページを正しく認識できなくなる可能性があるためです。

例えば、以下のようなポータルサイトのカテゴリページを考えてみます。

この場合、 /tokyo/restaurant/?page=2 や /tokyo/restaurant/?page=3 のcanonicalを/tokyo/restaurant/に設定するのではなく、それぞれのページに自己参照canonicalを設定します。

ECサイトや求人サイトなど、大量の一覧ページを持つサイトでは、ページネーションによって多数のURLが生成されることがあります。

ページ数が増えすぎると、検索エンジンのクローラーが巡回するURLも増え、重要なページのクロールが後回しになる可能性があります。

これは、Googleのクローラーが1つのサイトに対して無制限にクロールするわけではなく、一定のクロール上限の中で巡回しているためです。

そのため、大量のページネーションによって、本来クロール・インデックスさせたいページにクローラーが十分に到達していない場合は、不要なページネーションURLを見直すことが大切です。

今回は、ページネーションについて解説しました。

ページネーションは、情報量やデータ量が多いページを見やすく整理し、ユーザーが目的の情報にたどり着きやすくするための仕組みです。商品一覧ページや記事一覧ページなどでは、使いやすさや表示パフォーマンスの改善につながる場合があります。

一方で、ページネーションを設置すること自体にSEO効果があるわけではありません。しかし、URL設計やcanonicalの設定、不要なページの扱いなどを誤ると、クロールやインデックスに悪影響を与える可能性があるため、実装には注意が必要です。

また、現在地が分かりにくい、クリックしづらい、移動しにくいといった設計になっていると、ユーザーにとって使いにくいページになってしまいます。そのため、実装時は使いやすさとSEOの両方を意識しながら設計することが大切です。

この記事で紹介した実装方法や注意点を参考に、ユーザーにも検索エンジンにも分かりやすいページネーションを実装しましょう。