ページネーションとは？効果的な作り方や実装方法・SEO効果を解説！
ツイート
シェアWeb制作で「ページネーション」という言葉を聞く機会は多いです。ですが、ページネーションの意味を正確に理解している人は案外少ないです。
今回は、ページネーションについて意味やSEOへ期待出来る効果・実際の実装方法まで解説していきます。
ページネーションの意味を理解して、実際に活用できるように解説していくので、ぜひ参考にしてください。
ページネーションとは？
ページネーションは「ページの分割やページ番号」のことを意味します。
一般的にはWebサイト内にある情報を分割し、訪問者に対してサイト情報を区切っていることを明示する役割があります。
ページネーションは具体的に以下のような場面で確認することができます。
- Webサイト内のカテゴリーページ（アパレルサイトのMEN,WOMEN,KIDS、BABY等）
- GoogleやAmazonの検索結果や掲示板の「1ページ目」「2ページ目」「最後のページ」等と列挙したボタン
- 長文記事の内部にある「次のページ」に誘導したボタン（Yahooニュースの「記事本文を読む」等）
ページネーションの設置が必要になってくる一般的な目安としては、情報量が10件を超えた場合や、1記事の長さが5,000文字を超えて長文になった場合です。
仮にページネーションが実装されない場合には、表示されるページが文字だらけになり一覧性が著しく悪いものとなってしまいます。
ページネーションのSEO効果
ページネーションはWebサイトのSEO効果を高めるためにも重要となります。
Googleウェブマスター向けガイドラインでもサイト構造について以下方針を明示しています。
Google がページを理解できるよう手助けする-コンセプトに基づいたわかりやすいページ階層となるようにサイトをデザインします。
ページネーションをWebサイトに設置することで、多くの情報が整理されることとなります。
単なる情報整理に過ぎないページネーションなのですが、実はSEO効果が少なくとも3つあります。
ページネーションの3つのSEO効果を理由と一緒に紹介していきます。Webサイトの収益を上げるためにも、ぜひ確認してみてください。
回遊しやすく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効果につながってくるという点も確認しておきましょう。
ページネーションの実装方法
Webサイトにページネーションを実装する方法を紹介していきます。
今回紹介する実装方法は大きく分けて3つの場合に分けて紹介していきます。
- WordPressを利用している場合
- JavaScriptを使用している場合
- HTMLのサイトを作成している場合
ご自身のWebサイトに参考にできそうなやり方を確認してみてくださいね！
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でページネーションを設置した場合、サイト内の情報が増えるたびにリンク先も対応するようにタグを追加していくことになるため作業の手間がかかることも忘れないようにしましょう。
ページネーションの効果的な作り方
ページネーションを実際にWebサイトに実装する際には「サイトの下部に設置する」「表示するページは5ページまで」「必ず最後に飛べるようにする」の３点が重要です。
ページネーションの役割上、設置位置はサイト下部がベストです。
サイトの上部や中程にページネーションを設置しても、利用されないため読者に「邪魔」と感じられてしまう事がほとんどです。
また、ページネーションとして表示するボタンの数は５つ程度が理想です。
それ以上ですと多すぎて邪魔ですしそれ以下ですと少なすぎて先のページに飛びたいときに不便です。
その他、必ず「最後に飛ぶ」ボタンを設置する事も重要です。
過去の記事からチェックしたい場合などWebページ上の「最後へ」のボタンを押す機会が多いことが理由です。
これら３つのポイントについて、より詳しく解説していくので、ページネーションの実装を考えているようでしたら参考にしてください！
ページネーションはサイト下部に設置する
ページネーションは、サイトの下に設置をするのが効果的です。
サイト下部が効果的な理由は、ユーザーインターフェース（UI）が良くなるためです。
具体的にはWebサイトの見た目や操作性が良くなる傾向にあります。
訪問者はWebサイト上ではローマ字のZ字のような目線をたどって読み進めていきます。
情報がなさそうであれば、目線の最後の方まで流し読みをして初めて「次のページをみてみようかな」と考えるようになります。
ページネーションをサイトの下に設置すると、訪問者が最後まで見終わった位置になることから訪問者の気持ちに寄り添ったサイト設計となります。
次行こうかなと思ったときにページネーションのボタンがあるため、サイトが見やすくなります。
ページネーションのボタンを実装する際には、一通り情報を見終わった位置にするのがおすすめです。
表示するページ数は5までがおすすめ
ページネーションを設置する際には、ページ数は5ページ目までにするのが効果的です！
5ページまでとする理由は、2点あります。
- 訪問者が今現在どのにいるかを分かりやすくできるため
- スマホなどのタッチパネルでボタンを押しやすくするため
訪問者がページをまたいで読み漁っているときに、ページ数が多すぎると次に何ページ目に行けばいいのかが忘れてしまいやすくなります。
Webサイトの情報を読み漁っていて、今6ページ目にいるのか、7ページ目にいるのかわからなくなった経験はありませんか？ページ数が少ない方が、迷子になりづらいです。
また、スマホでWebサイトを見ていてボタンの押し間違いをする事があると思います。
ボタン同士の隙間が狭すぎて、間違って他のボタンをクリックしてしまうことはWeb製作で良く突き当たる問題です。
訪問者目線で見ると、ページボタンを押してみたら意図していなかったページに行ってしまって、さっきまで見たかった情報が見つけられずとてもイライラします。
ページネーションで表示するページ数を適度にしておくと、訪問者の現在位置がわかりやすくなり離脱せずに必要とする情報が探しやすくなります。
そのため、ページネーションのボタンは5ページ分がおすすめです。
必ず「最後」に飛べるようにする
ページネーションを設置する際には「最後」までのボタンを設置するのもおすすめです。
最後まで飛べるようにした方がいい理由は、訪問者の中には1番古い情報を見たいと思っている場合や、総合的な情報量が何件あるのか知りたいと思っている場合があるためです。
皆さんの中に、Webサイトのコミックを探していて1巻から買い始めたいと思ったことはありませんか？通常1ページ目に出てくるのはコミックの最新刊なので、1巻を見つけるためには最後のボタンを押すかと思います。
その他、ぐるなびや食べログなどで地域別のおすすめディナー情報を見ていても、総合的にヒット件数が少ない地域よりもヒット件数が多い地域の方でリサーチをするケースは多いです。
ページネーションを設置する際には、訪問者が見たいときに見られるように、最後までジャンプできるようにしておくのが効果的です。
まとめ
今回は、まず初めに「ページネーション」という用語の意味合いを紹介しました。
ページネーションは「ページ番号やページ割り」を意味しています。
ページ数が何ページもある際に、1ページ、2ページと区分していく役割があります。
また、ページネーションには3つのSEO効果が期待できます。
1点目は、回遊率とPV率が上昇する効果があります。
2点目は、目的の記事にたどり着きやすくユーザーにとって都合のいい検索体験へとつながる効果があります。
3点目は、文章量が多いページを分ける効果があり、興味を持った読者が最後まで読みやすくなるという効果です。
そして、ページネーションの実装方法を3つ紹介しました。
WordPressを使用している場合とjQueryを使用する場合、HTMLサイトを使用している場合に分けていますので、ご自身のWebサイトと合うものを選んでみてください。
最後に、ページネーションの効果的な作り方を3つ紹介しました。
訪問者にとって利用しやすいWebサイトを設計する観点から説明しています。
訪問者がWebサイトを利用している場面を想像しつつ、確認してみてください。
是非、この記事で紹介した内容を確認していただいて、ご自身のWebサイトの収益を伸ばしていってください。
- SEO対策でビジネスを加速させる「SEO Dash! byGMO」
-
SEO対策でこんな思い込みしていませんか？
- 大きいキーワードボリュームが取れないと売上が上がらない・・
- コンサルに頼んでもなかなか改善しない
- SEOはコンテンツさえ良ければ上がる
大事なのは自社にあったビジネス設計です。 御社の課題解決に直結するSEO施策をご提案します
- プロフィール
-
-
GMO TECH株式会社
- 2012年より一貫して検索エンジン領域のコンサルティング業務に従事。 2017年にGMO TECH社に参画。営業組織の構築、新商材開発、マーケティング部門立ち上げをおこなう。 現在、MEOコンサルティング、SEOコンサルティング、運用型広告などSEM領域全体を統括し、 お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。
-
GMO TECH株式会社
