SEO 公開日: 2023.02.14 更新日: 2024.03.22

ページネーションとは？SEO効果やHTML・JavaScriptでの実装方法をわかりやすく解説

ページネーションとは、1つのWebページを複数に分割することです。Webサイト・ページを利用するユーザーの利便性を高めるために使われます。Webページの表示速度を上げることにもつながるため、SEOへの効果も期待できます。

本記事では、ページネーションのSEO効果や実装方法をわかりやすく解説します。ページネーションを適切に設定し、ユーザーにもGoogleなどの検索エンジにも評価されるWebサイト・ページを作りましょう。

この記事の目次

ページネーションとは？

ページネーションとは、1つのWebページを複数に分割することを指します。

Webサイト内のカテゴリー毎にページ分けしたり、ブログ記事で5,000字を超えるような長文になる場合、「続きを読む」や「次ページへ」というように読者が読みやすいように分割することを「ページネーション」と言います。

ショッピングサイトで、商品が全て一覧でしか表示されない場合や、数万字ものブログ記事をページ分け無しに閲覧するのは、ユーザーにとってストレスになる場合があります。

そのような状態を避け、UX(ユーザー・エクスペリエンス=Web上での顧客体験、利便性)を高めるために、ページネーションは使われます。

■参考記事
UI/UXとは？違いと改善のポイントを紹介！

SEOに影響あり！？ページネーションの4つの効果・メリット

では、このページネーションを実装することで、具体的にどのようなメリットがあるのでしょうか。

本記事では大きく以下の4つのメリットをお伝えします。

ページの表示速度改善につながる

PV数の向上につながる

UX評価が高くなる

文量の調整により、ユーザーに見やすくなる

順番に詳しく説明いたします。

ページの表示速度改善につながる

ページネーションを実装することで、ページを分割することになり、ユーザーがサイトを閲覧する際の表示速度を上げることができます。

Webページへアクセスした際、そのページが表示されるスピードは、基本的にアクセス先のページ容量に左右されます。長い動画やサイズが大きな画像などが入れば、それだけページの読み込み速度は遅くなります。

この記事を閲覧されている皆様の中にも、ページを開こうとしてなかなか開けずにそのまま閉じてしまった、という経験のある方がいらっしゃるのではないでしょうか。

Googleによると、ページの読み込み時間に3秒以上かかるだけで、　なんと訪問者の50％以上が離脱してしまうという結果も報告されています。

参考：Think with Google

Googleは上記の結果を受け、2018年に検索順位の評価要素の1つとして、Webページの表示速度を組み込むことを発表しました。

ユーザーはページの読み込み速度を非常に気にかけています。読み込み速度これまでもランキングシグナルとして使用されていましたが、デスクトップ検索を対象としていました。そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。
引用：Google検索セントラル

ページの表示速度は、ユーザーの離脱率に大きく影響し、SEOにとっても特に重要な要素となっています。また、ページネーションを実装することで1ページあたりの容量を抑えることができるため、ページの表示速度を上げることにつながり、SEOの効果も期待できます。

▼関連記事
表示速度はSEOにとって重要！計測方法＆改善方法の事例をご紹介

PV数の向上につながる

ページネーションで1記事を数ページに分割して掲載している場合、ユーザーは、結果的に1記事を見るのに複数ページを遷移しないと1記事全てを見ることはできません。
ページネーションを導入することで、PV数と回遊率（ユーザーが１回の訪問でどれだけのページ数を閲覧したかを指す指標）が向上することになります。

例えば、1つの長文記事を大きな見出しごとに分割したり、ECサイトであれば商品一覧ページをジャンルごとに分割したりすると、ユーザーはページを跨いで知りたい情報・欲しい商品を見つけに行くことになります。

このようにページ送り・ジャンル分けなどでコンテンツを分割すすれば、PV数を上げることができます。
メディア運営であれば見られるページ数が増えることは、全体のPV数増加に繋がり、大きなメリットになります。
また、ショッピングサイトであれば、ジャンル分けすることで、よりユーザーが求めている商品を見つけやすくなります。そして、商品との接触機会は増えることになり、売り上げ向上にも期待することができます。

UX評価が高くなる

3つ目のメリットは、UX（ユーザー・エクスペリエンス）の向上が期待できる、という点です。

例えば、アパレルECサイトが運営するブログ記事を例にあげてみましょう。

1つのページに「春服コーデの基本」「今年の流行」「スタッフの参考コーデ」といったように、関連トピックが連なり、かつ10,000字を超えるような長文になっている場合を考えてみます。

この場合、ページネーションでトピック毎にページ分けした方が、読者にとって欲しい情報にアクセスしやすく、読みやすい記事となるでしょう。

UX向上はSEOの観点でも重要な対策となります。
GoogleはUXについて、以下のように公式の見解を述べています。

サイトが第一の目標に掲げるべきは優れたユーザーエクスペリエンスの提供であり、これはランキングにも影響します。優れたユーザーエクスペリエンスの実現にはさまざまな要素が関連します。
引用：Google検索セントラル – ユーザーエクスペリエンスの管理

具体的な基準となる指標は明示していませんが、ユーザーがストレスなく、すぐに欲しい情報を見つけられるのか、と言う点は検索エンジンの評価基準の1つとなっているようです。

文量の調整により、ユーザーに見やすくなる

特に記事コンテンツに言えることですが、記事が長文かつ複数のトピックに跨がる場合、1ページあたりの文章量を調整した方がいいケースや先に記事の概要を明示し、「続きを読む」などのボタンを設けた方がいいケースがあります。

欲しい情報が載っているのか分からずに、長尺の文章を読んでいると読者にとってストレスになる場合があります。

例えば、経済関連のニュース記事などは、通勤時間にビジネスマンが読んでいるシーンが思い浮かぶのではないでしょうか。そんな限られた時間で、数あるニュースの中から取捨選択し、素早く見たい記事にたどり着ける構成になっていれば、きっとユーザーに好まれるサイトになるでしょう。

ただし、文章が長ければ全てページを分割すればいい、という訳ではありません。
記事のジャンル・読者層・閲覧デバイスによっては、ページ分割が逆に煩わしく感じられるケースもあります。

あくまでユーザーの目線に立ち、ページネーションを実装するかどうかを考えることがUXの向上につながり、本質的な対策になります。

▼関連記事
SEOに文字数は関係する!?上位表示を目指すためのポイントを解説

ページネーションの実装方法

ページネーションを実装する方法として、例えばHTMLでは、タグを利用するなどの方法があります。

コードやタグ周りの知識に明るい方以外は、少し難しい説明となるかもしれませんが、ページネーションの実装方法について、代表的な実装方法をご紹介します。

ページネーションの実装については、以下の3つの方法に分けてご説明します。

HTMLで直接記述する方法

WordPressで実装する方法

JavaScriptライブラリ（JQUERY）で実装する方法

ご自身のサイト環境に応じた部分をご覧ください。

HTMLで直接記述する方法

HTMLで直接ページネーションを実装する場合、先ほど例に挙げたように<link rel=”next”>、<link rel=”prev”>タグを用います。

例を上げてご説明した方が分かりやすいかと思いますので、以下のような3つのページがあると仮定します。

1ページ目：http://www.example.com/page1.html
2ページ目：http://www.example.com/page2.html
3ページ目：http://www.example.com/page3.html

上記の3ページを「連続したコンテンツを分割したページである」と検索エンジンに認識させるための作業を行なっていきます。

具体的には,以下の①から③の作業を行います。

①1ページ目に次ページがあることを認識させる

②2ページ目に前ページと次ページがあることを認識させる

③3ページ目に前ページがあることを認識させる

1ページ目に次のページがあることを伝える作業から始めます。

1ページのhead要素内に、

<link rel="next" href="http://www.example.com/page2.html">

という形で記載しましょう

“next”と”page2”というコードを入れることで、2ページ目の存在を読み込ませることができます。

次に、2ページ目に前ページと次ページがあることを認識させる作業です。
1ページ目の作業は「次のページがある」ことを認識させるのに対し、2ページ目は「前と次のページがある」ことを認識させる必要があります。

1ページ目=”prev”、3ページ目=”next”という形で、その存在を伝えます。
具体的には以下の様になります。

2ページ目のhead内に、

<link rel="prev" href="http://www.example.com/page1.html">
<link rel="next" href="http://www.example.com/page3.html">

と記述することで、検索エンジンにその前後のつながりを伝えることができます。

3ページ目は最後のページなので、使うのは前ページを意味する”prev”のみの記述となります。

3ページ目のhead内に

<link rel="prev" href="http://www.example.com/page2.html">

と記述することで、2ページ目の存在を検索エンジンに伝えることができます。

WordPressで実装する方法

サイトをWordPressで作られている場合、ページネーションの実装方法は、

PHP言語を用い自身でソースを編集する方法

プラグインを用いて実装する方法

の2通りがあります。
今回は後者のプラグインを用いた方法を紹介します。

プラグインで実装する方法

プラグインとは、WebブラウザやCMSなどに機能を追加し、使いやすくするためのプログラムのことを言います。簡単に言ってしまうと拡張機能となります。
WordPressにもたくさんのプラグインがあり、プラグイン毎に機能が異なっており、有料のもの無料のもの、さらに公式、非公式のものがあります。

注意点としては、非公式のプラグインの中には、情報を抜き取るために作られた悪質なものもあったりするので、ユーザーの評価や現在も運営されているのかなどを確認して
自己責任で導入をしてください。

今回は「WP-Page Navi」という定番のプラグインを用いた、ページネーションの実装方法を解説していきます。
手順は以下の3STEPです

①「WP-PageNavi」のインストールと有効化

②「WP-PageNavi」基本設定

③「WP-PageNavi」基本的な使用方法

ひとつずつ説明していきます。

①「WP-PageNavi」のインストールと有効化

「WP-PageNavi」をインストールするには、まずワードプレスの管理画面の左側メニューにある「プラグイン」を押下し、「新規追加」を選択します。

画面右上の検索窓に「WP-PageNavi」と入力して検索すると、検索結果に出てきます。

上記の画面が確認できたら、「今すぐインストール」を押下します。

インストールが終わりましたら、有効化ボタンを押下すると利用可能になります。

②「WP-PageNavi」基本設定

上記の手順で有効化まで完了したら、基本設定に移ります。

管理画面の左側メニューから「設定」をクリックして、「WP-PageNavi」を選択します。
すると、PageNaviの設定画面が出てきますので、このページで文章やデザインなどの編集を行います。

デザイン内容は好みでカスタマイズが可能ですが、CSS言語の知識が必要です。
初期設定で実装しても問題ありません。

③「WP-PageNavi」基本的な使用方法

では、ここから具体的にPageNaviでのページネーション方法を解説していきます。

基本的には、ページネーションを設置したい箇所に

<?php wp_pagenavi(); ?>

というコードを記述すればOKです。
※<?php wp_pagenavi(); ?>とは、「ここでページを分割してね」とWordPressに認識させる文字列です。

「PHP」と呼ばれる言語で記述されたものですが、今回詳細は割愛します。
一旦ここでは、記述内容と意味だけご理解頂ければ問題ありません。

まず管理画面の左にある「外観」→「テーマファイルエディター」をクリックします。

するとコードが記述できるページが表示されますので、右の「テーマファイル」からページネーションを導入したいページの、分割したい部分に<?php wp_pagenavi(); ?>を記述すれば完了です。

※参照テーマファイルやコードの挿入位置などは、テーマによって異なりますのでご注意ください。
※本記事の画像サンプルは、国内で最もシェアが高い「SWELL」というテーマを使用しています。

JavaScriptライブラリ（JQUERY）で実装する方法

JavaScriptでページネーションを実装する方法はいくつかありますが、本記事では「jqPagination」というプラグインを使った実装方法を解説します。

まず、以下の「paginnathing.js」からをダウンロード、解凍を行い、HTMLファイルへ読み込ませます。

▼paginnathing.js ダウンロードページ
https://beneverard.github.io/jqPagination/

ファイルの読み込みが終われば以下のようにページネーションを追加したい要素を任意のclassを追加した枠で囲みます。

その後、以下のjQueryを〜のクロージングタグの前に記述します。

また、以下の記述をすることで、任意にデザインをカスタマイズすることもできます。

・firstLast：最初のページへ・最後のページへボタンを表示するかしないかを設定できます。
・firstText：最初のページへ移動するボタンの設置。文字列は任意で指定できます。
・lastText：最後のページへ移動するボタンの設置。文字列は任意で指定できます。
・prevNext：「前のページ」「次のページ」のボタンを表示する、しないの設定ができます。

Googleから高く評価されるページネーションとは？

さて、ここまではどのようにページネーションを実装するか、という解説をいたしました。

先ほどページネーションはUXに影響するというお話をしました。
ではSEOの観点で、より検索エンジンに評価されやすいページネーションとは、どのようなものなのでしょうか。

ページネーションに限らず、検索エンジンに高く評価されるサイトを構築するために必要なことは「徹底的にユーザービリティを考える」ということになります。
上記を念頭に置いた上で、ページネーションにおいて、押さえるべきは下記の2点です。

「最後に飛べるボタン」を設置する

ページネーションはサイト中央下部に配置する

順番にご説明します。

最後に飛べるボタンを設置する

ページネーションを実装する際には、上の画像の枠線部分のように「最後のページ」に飛べるよう設置する事をおすすめします。

なぜかというと、一定の読者はブログの最後のページ=最初に投稿された記事を閲覧しにいく傾向にあるからです。
雑記系のブログであれば、最初から順番に読んでみたい、という方もいらっしゃるでしょう。

加えて、専門性のあるお役立ち系のブログであれば、入門的な記事が最初にくる場合もあります。枝葉となるキーワードから記事にたどり着いて、その内容が複雑だった場合、より基礎的な記事も目を通したいと思うかもしれません。

このような理由から、ユーザーが回遊しやすいように最新⇆最初の記事をすぐに行き来できるよう、構成しておくのがおすすめです。

ページネーションはサイト中央下部に配置する

こちらは見つけやすさと、操作性の点での配慮となります。

普段使うことが多いサイトに共通しているデザインついて、ユーザーは無意識にその役割を記憶し、直感的に操作する傾向があります。
例えば、サイトを閲覧していると、左右どちらかの上部に3本線のメニューをよく見かけます。

これは「ハンバーガーメニュー（ボタン）」と呼ばれ、よく使われる定番のメニューデザインです。

初めて訪れたサイトでも同じ位置にこの3本線があれば、「ここでメニューが開ける」と直感的にわかります。

ページネーションも同様に、Googleをはじめ、多くのサイトが下部中央あたりに設置しています。

直感的にユーザーが「最下部にページ送りがあるはずだ」と見つけやすくなります。

もしページ送りのボタンが左上などに配置された場合、単純に見つけづらいですし、一度下まで記事をスクロールした後に最上部に戻るのは、ユーザーにとって手間になるでしょう。

そういった意味でも、ページネーション実装の際には、サイト中央下部あたりに設置することをおすすめします。

まとめ

本記事ではページネーションの意味と実装方法、SEOにおける効果について解説しました。

実装の部分では少々技術的な説明も入りましたが、要点をまとめると以下3点になります。

1.ページネーションを行うことで、ページの表示スピードが上がるとともに、UXが向上し、検索順位向上を狙える。

2.長文のブログやショッピングサイトのジャンル分けなどに使用することで、記事の読了率や、サイト回遊率が上がりPVアップが期待できる。

3.全てのコンテンツで必ずしもページネーションした方がいいという訳ではない。
ユーザー層やコンテンツの内容によって、実装要否を判断する必要がある。

本記事が少しでもSEOにお悩みの方にお役立ていただけますと幸いです。

株式会社ヒトノテでは、本記事でご紹介したページネーションの実装やSEOに強いサイト作りのご支援をしておりますので、お気軽にお問合せください。

執筆者：川口享晟

株式会社ヒトノテのSEOコンサルタント。メディアサイトからポータルサイト、ECサイトまで様々なサイトのSEO支援を経験。売上のアップから逆算したSEO対策を得意とし、クライアントに寄り添ったオーダーメイドの提案を心がけています。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。