ページネーションとは？効果的な作り方や実装方法・SEO効果を解説！

回遊しやすくPVが伸びやすい

SEO効果の1点目は、訪問者の回遊率が高まりPV数が伸びやすくなるというものです。

回遊率やPV数が伸びやすくなる理由は、ページネーションのボタンがあることで訪問者が興味のあるページや別のカテゴリに飛びやすくなっているためです。

スクロールしながら、たくさんの文字を目で追わなくてもページネーションのボタンで見たいところに一足飛びで行けるようになるのでサイト内の回遊率が高くなります。

さらに、訪問者が1回の訪問で1つの記事だけではなく、他に気になった記事を2個閲覧した場合には合計で3PVカウントされることとなります。

具体例

• ページネーションがないサイトで1記事だけ見た場合・・・1PV
• ページネーションがあるサイトで、次ページも一緒に見た場合（合計3ページ）・・・3PV

1回の訪問で他の記事を見ないで離脱した場合と比べてもPV数が伸びやすくなります。

ページネーションは、実装するだけでサイト内の回遊性やPV数の数値が向上する可能性を高めてくれる便利なボタンです。

目的の記事にたどり付やすくUX評価が高い

SEO効果の2点目は、訪問者が見たい記事（目的）を探しやすくなって、User Experience（UX）評価が良くなるというものです。

UX評価が良くなる理由としては、Webサイト自体がユーザーインターフェース（UI）の観点から良くなるためです。

具体的には、以下2つの場面でUX評価が高まります。

• 膨大になったWebサイトの情報のページ表示スピードが上昇する。
• 訪問者が検索行動で無駄な時間を浪費せずに済む。

訪問者は欲しい情報はいち早く入手したいと考える傾向にあることから、ページネーションが設定されており目的のページに早くたどり着くと「いい検索体験になった（便利で使いやすい）」と感じます。

ご自身でもサイトを見ていて、欲しい情報が書いていそうなのに見つからなくてイライラした経験ってありませんか？そんな時、他サイトでバシッと書かれている情報が見つかると、嬉しく感じます。

具体例（「お弁当」と検索した場合）

• Yahoo知恵袋の場合・・・1、2、3、、次へといったページネーションが表示される
• 5ちゃんねるの場合・・・ページネーションがなくずっとスクロールしなければならない

※Yahoo知恵袋のほうが使いやすい設計になっている

また、Googleウェブマスター向けガイドラインでもページスピードの最適化について明確に言及されています。

訪問者がページを利用しやすいよう手助けをする-ページの読み込み時間を最適化します。表示の速いサイトはユーザーの満足度を高め、ウェブ全体の質を向上させます（特にインターネット接続速度が遅い場合）。PageSpeed Insights や Webpagetest.org などのツールを使用してページの読み込み速度をテストすることをおすすめします。

ページネーションは、サイトに情報を探しに来てくれた人に対して少しでも見つけやすくして、満足してもらうための役割も担っています。

文量の多いページを分割する事で読破率が上がる

SEO効果の3点目は、文章量が多い記事（ページ）を何個かに分けることで最後まで読んでもらいやすくなるというものです。

読破率が上がる理由としては、ちょうどいいところで区切ることで訪問者も続きが気になってくるためです。

タイトルやつかみの文章で興味をひきつつ、途中でメインの内容を伝えるような分量の多い記事では「続きを読む」などといった誘導をすることで、訪問者が最後まで読んでくれる確率があがります。

具体例

• YahooニュースやAmeba News・・・見出しと「続きを読む」として区切る
• アメブロなどのブログ・・・本文全体を載せる

※ニュース記事で短文だけを目にしたほうが中身が気になってくる

もちろん、短文日記のような1,000文字程度で終わる記事であれば分割する必要はありません。不自然に分割されると訪問者は読む気が失せてしまう可能性もあるため注意が必要です。

ページネーションは訪問者にとって適切な位置に実装することで、読破率の観点からSEO効果につながってくるという点も確認しておきましょう。

WordPressの場合の実装方法

ページネーションをWordPressに設置する方法は2種類あります。

• プラグインでWPに組み込み
• PHPを書いて自作する

WordPressにページネーションを設置する際に、楽な方法はプラグインでWPに組み込む方法です。

WP内にある検索機能で使い易そうなものをクリックして設置するだけです。

しかし、プラグインで実装した場合には自由度がある程度限られていてプラグインで許容できる範囲内でした調整ができません。

もし、自分自身で好きなように実装する場合にはWPのPHPにページネーションのタグを作成する方法がおすすめです。

プラグインのような制限を受けないため、独自性が高く訪問者にとっても魅力的なWebサイトになります。

PHPにタグを書き加えていく場合には、PHPに関するスキルが必要となるため作業の手間がかかることも覚えておくようにしましょう。

jQueryでの実装方法

ページネーションを実装するため方法として、JavaScriptの一部でもあるjQueryを使用することができます。

jQueryを実装するための具体的な手順は以下となります。

• jQueryプラグインをダウンロードする
• WebサイトのHTMLにjQuery（ページネーションをまとめたテンプレート）を載せる
• CSSで体裁を整える

Webサイト上にページネーションを実装するためのjQueryのテンプレートはインターネット上に多く紹介されています。

代表的なプラグインとしては、「paginathing.js」などがあげられます。

Webサイトに導入するためには、外部サイトから、「paginathing.js」ファイルをダウンロードしてhtmlファイルへ書き込みます。

無理に0から作成しなくても、データを無料ダウンロードして作成してみてもいいかもしれませんね！

HTMLでの実装方法

Webサイトにページネーションを実装する方法としては、HTML上の記載にジャンプリンクを入れるものもあります。

HTMLを実装するための具体的な流れは以下となります。

• Webサイト内のHTML上でジャンプリンクを作成する
• （必要に応じて）CSSで調整

HTMLで実装するためにジャンプリンクを設置するのは、ある意味一番簡単な方法でもあります。

トップページや記事の下部に他ページへリンクタグを設置するようにしましょう。

ただし、HTMLでページネーションを設置した場合、サイト内の情報が増えるたびにリンク先も対応するようにタグを追加していくことになるため作業の手間がかかることも忘れないようにしましょう。

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

ページネーションは、サイトの下に設置をするのが効果的です。

サイト下部が効果的な理由は、ユーザーインターフェース（UI）が良くなるためです。

具体的にはWebサイトの見た目や操作性が良くなる傾向にあります。

訪問者はWebサイト上ではローマ字のZ字のような目線をたどって読み進めていきます。

情報がなさそうであれば、目線の最後の方まで流し読みをして初めて「次のページをみてみようかな」と考えるようになります。

ページネーションをサイトの下に設置すると、訪問者が最後まで見終わった位置になることから訪問者の気持ちに寄り添ったサイト設計となります。

次行こうかなと思ったときにページネーションのボタンがあるため、サイトが見やすくなります。

ページネーションのボタンを実装する際には、一通り情報を見終わった位置にするのがおすすめです。

表示するページ数は5までがおすすめ

ページネーションを設置する際には、ページ数は5ページ目までにするのが効果的です！

5ページまでとする理由は、2点あります。

• 訪問者が今現在どのにいるかを分かりやすくできるため
• スマホなどのタッチパネルでボタンを押しやすくするため

訪問者がページをまたいで読み漁っているときに、ページ数が多すぎると次に何ページ目に行けばいいのかが忘れてしまいやすくなります。

Webサイトの情報を読み漁っていて、今6ページ目にいるのか、7ページ目にいるのかわからなくなった経験はありませんか？ページ数が少ない方が、迷子になりづらいです。

また、スマホでWebサイトを見ていてボタンの押し間違いをする事があると思います。

ボタン同士の隙間が狭すぎて、間違って他のボタンをクリックしてしまうことはWeb製作で良く突き当たる問題です。

訪問者目線で見ると、ページボタンを押してみたら意図していなかったページに行ってしまって、さっきまで見たかった情報が見つけられずとてもイライラします。

ページネーションで表示するページ数を適度にしておくと、訪問者の現在位置がわかりやすくなり離脱せずに必要とする情報が探しやすくなります。

そのため、ページネーションのボタンは5ページ分がおすすめです。

必ず「最後」に飛べるようにする

ページネーションを設置する際には「最後」までのボタンを設置するのもおすすめです。

最後まで飛べるようにした方がいい理由は、訪問者の中には1番古い情報を見たいと思っている場合や、総合的な情報量が何件あるのか知りたいと思っている場合があるためです。

皆さんの中に、Webサイトのコミックを探していて1巻から買い始めたいと思ったことはありませんか？通常1ページ目に出てくるのはコミックの最新刊なので、1巻を見つけるためには最後のボタンを押すかと思います。

その他、ぐるなびや食べログなどで地域別のおすすめディナー情報を見ていても、総合的にヒット件数が少ない地域よりもヒット件数が多い地域の方でリサーチをするケースは多いです。

ページネーションを設置する際には、訪問者が見たいときに見られるように、最後までジャンプできるようにしておくのが効果的です。