ページネーションとは、1つのページに対する内容・コンテンツが長すぎる場合に使用するもので、ページ下部にリンクを付けて設置します。
これはひとつのコンテンツが長すぎる場合だけでなく、検索結果ページやWordPressで記事がアーカイブされる場合でも表示されているため、見慣れている方も多いのではないでしょうか？
そしてこのページネーションを置く理由としては…やはり長すぎるコンテンツだとユーザーが見にくい・読み込むまで時間がかかるといった利便性を考慮したことによるものでSEOに影響する要素でもあり、ページ分割した上でナビゲーションを付けた結果ユーザビリティに良い影響を与える要素となります。
そのため、ページネーションはページそのものを分割する場合と数百から数千もの記事群を分割するケース（検索結果ページや各種メディアなど）が考えられ、全てを1ページに表示するには余りにも長すぎる・ユーザーが目的のコンテンツを見つけにくいといった理由から設置するべきです。
一方で、あまりにも分割されたページだとクリックする工程が増える分、面倒だったりユーザーにとって本当に知りたい情報がその先にあるのかどうか？といった理由から離脱してしまう可能性も0ではありません。実際検索してランディングしたページ下部にページネーションを見つけた瞬間検索結果ページへ戻ってしまうユーザーもいます。
この辺りはシビアな部分ではありますが、適切にページネーションを活用することによって読み込み速度にも良い影響を及ぼしますし、質の高い内容によってはユーザーも読み進めてくれるはずです。
では今回は、このページネーションについて、その意味と設置方法などを詳しくご説明していきたいと思います。
ページネーションとは
ページネーションとは冒頭でもお伝えした通り長すぎるコンテンツを分割し、ページ下に設置するリンク付きのナビゲーション（“ページャー”とも呼びます。）を意味し、基本的にはユーザビリティを考慮した上での要素です。
※ページネーション（pagination）を直訳すると「丁付け」や「ページ割り」となります。
ただし、1ページを分割する際の注意点としては…分割された各ページがひとつのコンテンツとしてGoogleに理解してもらうことが重要で、分割することによって評価がそれぞれ分散してしまっては検索順位にも影響してしまいます。
この場合必要となってくるのが前後のページを正しく伝える「rel=”prev” rel=”next”」といったWebページのhead内に記述するクローラー用のページネーションタグですが、このタグに関しては現在サポートを終了しているため、ユーザーに見える形で関連性がわかりやすいナビゲーションを設置することが必須となり、検索結果ページにも表示されている下記のようなリンク群なので見慣れている方も多いはずです。
そういった個別ページとは別でサイトやブログ内に記事数が多い場合でもカテゴリーやアーカイブページにページネーションを活用します。
これは当然1ページに全てのページを表示しても表示するまでに時間がかかってしまっては、せっかくの訪問ユーザーを離脱させてしまいますので、WordPressなどをお使いの場合は1ページに表示させる記事数を調整してみると良いでしょう。
ページネーションの重要性（SEO効果について）
そして気になるページネーションを設置した際のSEO効果についてですが…残念ながら特にありません。
以前は分割するほど以下のような効果があるのでは？とよく聞きましたが、どれも小手先の施策であって一時的に広告収入やPV数が増えたとしてもユーザー自体が離れてしまっては意味がありません。
- 広告収入に良い影響を及ぼす
- PV数が稼げる
- サイト内の被リンクになる
- 上位表示される可能性がある
そして昔も今もGoogleは変わらずユーザーファーストです。
そのため、ページ分割したことが理由で離脱率が上がっていれば1ページにまとめて表示させるべきでしょうし、その中でも本当に知りたいコンテンツを見つけやすいように目次や見出しをわかりやすく設置する方が大切です。要はユーザビリティを考慮した上でページネーションさせるかどうかを決めるというわけです。
無駄にページ分割されたページだとクリックする回数が増える分、訪問ユーザーは面倒だと思ってしまい、その結果離脱率を上げてしまう要因にもなりかねません。
とは言え、あまりにも文字数の多いページだとユーザーが訪問した瞬間に読む気を失ってしまいます。（およそスクロールバーでボリュームのあるコンテンツであることが伝わってしまいます。）
これをうまく解消するためにページネーションを使用し、読了率を上げるというのもひとつの方法です。
この場合、ページネーションとともに次のページにはどんな内容が記載されているのか？テキストリンクも一緒に添えてあげるとユーザーも読み進めてくれることでしょう。
ページネーションの機能
例えば何らかのテーマで2万文字もの長文コンテンツを作成し、ユーザーの見やすさを考慮した上でページを4つに分割したとします。
この場合、以前までは「rel=”prev” rel=”next”」をhead内に記述することによってGoogleにひとつのコンテンツであることを伝えられましたが、現在はこちらのページ「複数ページにまたがる記事やコンテンツをお持ちの方へ。rel=”next” と rel=”prev” を使用したページネーションのご紹介」にも“Google検索でのサポートを終了しました。”と記載されているように廃止されていますので、対応するならcanonicalタグで自己参照しましょう。（もしくは何もしない。）
また、4つのページが持つ評価を1ページ目に向けてcanonical設定するのは間違いですので、ご注意ください。（あくまでcanonicalタグは重複を解消するためのタグです。）
参考：「rel=canonical 属性に関する 5 つのよくある間違い | Google 検索セントラル ブログ」
この辺りに関してはページネーションしたページの相互関係を検索エンジンが正しく把握できるようになったため、特に検索エンジン用にページネーションのためのタグ「rel=”prev” rel=”next”」を記述する必要ありません。（「○○-2.html」といった続きものであることが明白にわかるページ名にする必要はあります。）
ただしBingに関してはまだ対応しており、Googleも新しいページネーションのガイドラインを準備中とのことですので、新たな動きがあるまでは従来通りのページネーションとタグを一緒に設置しておくと良いでしょう。
ページネーションの作り方
ページネーションは主に個別ページを手動で分割する場合だとご自身で設置する必要があり、一方でWordPressなどをご利用の場合だと自動で設置されます。
およそWordPressなどのCMSだと1ページに表示させる記事数を設定できる画面があるかと思いますので、全体の記事数も考慮した上で決めると良いでしょう。
ただし、以下の通りユーザーは分割ページを好ましくないと思われる傾向にあるようで、内容によっては読み込み速度を意識してみたり、読みやすさを考慮した見出しのデザインや行間、1段落における文字数や句読点の数などに気を使う必要があります。
ユーザーは、情報の一部だけが表示されているページを適宜めくっていく （「次へ」をクリックして次のページを閲覧する）コンテンツよりも、1 ページに情報のすべてが表示されたコンテンツの方を好むということが、我々が実施した調査の結果、判明しました。
これに関しては何となくわかりますよね？変に分割されたページだと逆にクリックという行動が必要となり、読み直したい場合にも一手間増えるため、読みにくさを感じてしまうかもしれません。そのため、内容によっては別ページとして深掘りしたコンテンツを用意して内部リンクとして繋げた方が良い結果が得られる可能性もあります。
この場合は流入キーワードや実際検索してみての順位の推移などを元に1つのページで分割するのか？それとも全く異なるテーマで記事を分けるのか？を考慮してみてください。
そして、手動でページネーション（ページャー）を設置する場合はhtmlとcssで形を整えていき、例えば…liタグでリスト化し、floatタグで横並びにすると整理しやすいかと思われます。（普通にspanタグなどで並べても良いんですが、なるべくhtmlタグをシンプルにしたいならリスト化をおすすめします。）
また、ポイントとしては以下のような点が挙げられ、ページネーションとは言えユーザーの利便性に配慮した作りにすることが大切です。
- 現在地がわかるようにする（リンクなし）
- それぞれのページをボタンのようにクリックしやすくする
- 両端に前後へのリンクも設置する
- リンクとリンクの間を適度に空ける（モバイルを考慮）
検索エンジン向けのページネーションタグ
続いて、Googleの検索エンジンは対応が終了となってしまいましたが、head内に記述するクローラビリティのためのタグをご紹介します。（先ほどもお伝えした通りBingはまだ対応していたり、記述していてもデメリット自体はありませんので今すぐ削除する必要はありません。）
これは、複数ページに分割した際にそれらがひとつのページとして正しく評価してもらうためのもので、訪問ユーザー向けではなく検索エンジンに対するmetaタグです。
そのため、head内に記述するものでbody内に記述しても無視されるのでご注意ください。
そして基本的には以下の通りページ前後のURLを指定してコンテンツの関連性を伝えます。
- 最初のページには前のページがないため次のページだけを記述
- 中間のページには前後のページを記述
- 最後のページには次のページがないため前のページだけを記述
その記述方法はこちら、この場合は「/sample.html」を最初のページとして4分割したケースを想定しています。
<!--最初のページ--> <link rel="next" href="/sample-2.html"> <!--2ページ目（rel=nextとrel=prevの両方）--> <link rel="prev" href="/sample.html"> <link rel="next" href="/sample-3.html"> <!--3ページ目（rel=nextとrel=prevの両方）--> <link rel="prev" href="/sample-2.html"> <link rel="next" href="/sample-4.html"> <!--最後のページ（rel=prevのみ）-->--> <link rel="prev" href="/sample-3.html">
また、WordPressなどをお使いの場合だとデフォルトでこのタグがカテゴリーなどアーカイブページに記述されているため、恐らくGoogleがページネーションの新たなガイドラインを発表したタイミングで各テーマがアップデートされるかと思われますので何もする必要はありません。
ただし、個別ページで分割したい場合は区切りたい場所に「<!–nextpage–>」を記述すると簡単にページ分割でき、ページネーションも自動で表示されますが、上記の「rel=”prev” rel=”next”」は自動で記述されません。
まとめ
今回はページ分割した際に設置するページ送りを意味するページネーションについて、ユーザビリティのための“ページャー”とクローラビリティに役立つ「rel=”prev” rel=”next”」について意味と設置方法などを詳しくご説明しました。
このように長すぎるコンテンツを読みやすく・表示速度も考慮したページネーションはうまく活用することで訪問ユーザーに対する利便性にも期待できる要素ではありますが、分割しすぎると逆効果にもなってしまうため、アナリティクスの滞在時間や離脱率も含めて効果検証を繰り返して最適化することが大切です。
そして基本的にページネーションはアーカイブページだと当然表示されているかと思われますが、個別ページの長いコンテンツに設置するもので、前後関係も一緒にmetaタグを記述しておく必要があります。ただし、“ページネーション”で検索してみると…“ページネーション うざい”といったサジェストが表示されるほど閲覧ユーザーにとっては邪魔な存在でもあります。
この辺りをしっかりと踏まえた上でページャーを設置するかどうか？何ページに分割するのか？あるいはひとつのページで完結させるのか？を考えてみてください。単なる広告費やPV稼ぎの為にユーザーを蔑ろにしたページネーションは後のユーザー離れに直結しますので、注意して活用するようにしましょう。
「キーワードファインダー」
コンテンツの作成や改善でお悩みですか？
「キーワードファインダー」なら、上位表示されているページ・評価される傾向の文字数や共起語、見出し（h1～3）を抽出し、検索順位を上げるために重要なチェックを簡単に行うことが可能！
もちろん関連語など自動取得したキーワードは、ご自身のサイトだけでなく競合サイトの順位・検索数も取得します。
この整理された情報を元にあなたの集客経路の拡大にお役立てください！
関連記事
検索順位を改善するには正しいSEOの知識が必要です
