コンテンツを分割してユーザーに提示する「ページネーション(パジネ―ション)」は回遊率を高める目的で利用されることも多いですが、SEO的にも効果が期待できることをご存知ですか？このページではページネーションの概要やタグの廃止について。加えて近年のベタープラクティスとSEO施策としての事例をご紹介します。

ページネーションとは？

ページネーションとは、直訳で「ページ割り」を意味し、一般的にWebコンテンツを複数ページに分割すること、もしくはそのデザインを指します。デザインを指す場合はページごとに番号を振り、ユーザーをナビゲーションするものが一般的です。

ページネーションのSEO効果・メリット

ページネーションを設定する意味は、ユーザビリティとSEOの2点から考えることができます。ユーザーへのメリットだけでなく、Googleにコンテンツを認識してもらうためにもページネーションは効果的です。

SEOとは？基礎知識と初心者がやるべき対策をわかりやすく解説

自社サイトの流入数を増やし、ビジネスを成長させるにはSEO対策(検索エンジン最適化)が欠かせません。このページでは初心者の方でもわかりやすいように、「SEO対策がそもそもどのようなものなのか？」を解説します。基本的な概念をどこよりもわかりやすくご紹介するので、SEO対策を検討されている方はぜひ参考にしてみてください。

回遊率を高める

ページを分割するということは何ページにもわたって読者はコンテンツを回遊することになります。こうした回遊率を高めるためにページネーションは用いられる場合もあります。基本的に記事コンテンツであれば4000文字前後以上になる場合にページネーションを活用するのをおすすめします。「あまりにも分割ページが多すぎないか？」を一度検討してみましょう。

クローラビリティを高める

一覧ページなどを、ページネーションで区切り連番を振ることで、クローラーがコンテンツの全容を把握しやすくなります。固有のURLを割り当てることで、クローラーによってコンテンツが発見されインデックスを促進することも期待できます。
一方で無限スクロールや「もっと見る」などでのコンテンツ追加をしている場合はクローラーが回遊するのに適しておらず、上手くGoogleにサイトのコンテンツが認識されていない可能性があります。

目的の記事にたどりつきやすくなりUXが高まる

まず、1ページに多くの情報を詰め込むと、ページ読み込みに時間がかかり、ユーザーの離脱につながりかねません。しかし、ページネーションを使用することで情報を分割し、表示速度を向上させます。その結果、ユーザーはストレスなく目的の記事にアクセスできるでしょう。
さらに適切にページネーションを設置すれば、情報が整理され、読みやすくなります。分割されたページは、ユーザーや検索エンジンクローラーがクロールしやすく、ページ評価の向上に期待できます。
ページネーションは、WebサイトのUX（ユーザーエクスペリエンス）を向上させ、SEOにも効果的と言えるでしょう。

読みやすくなり読破率が上がる

文章量が多いページを複数に分割することで、訪問者が最後まで読み通す読破率が高まります。これは、ページネーションによって文章が適切な箇所で区切られるため、訪問者はスムーズに読み進めれるからです。
継続的なスクロールや長い文章はユーザーの読み疲れを引き起こすため、サイトの利便性がいいとは言えません。
また、ページネーションを使用してタイトルや文章の最初の魅力的な部分を強調することで、訪問者の興味を引きつけ、最後まで読み続けてもらう確率が高まります。結果的に、コンテンツへの関与が増加し、SEOのランキング向上も見込めるでしょう。

ページネーションのデメリット

ページネーションを導入するメリットは多くあるのですが、逆にデメリットも存在します。
ここでは、ページネーションを導入するデメリットを解説していきます。

ユーザーにとって読みづらくなる可能性がある

情報を得るのに何度もページを読み進めるのはユーザーにとって負荷になることもあります。
実際、ページネーションに対してGoogleは以下のような見解を示しています。

ユーザーは、情報の一部だけが表示されているページを適宜めくっていく （「次へ」をクリックして次のページを閲覧する）コンテンツよりも、1 ページに情報のすべてが表示されたコンテンツの方を好むということが、我々が実施した調査の結果、判明しました。
引用：Google検索セントラル「検索結果に「すべて表示」ページを優先的に表示する方法」

以上のようにGoogleは記事コンテンツの場合は基本的にページネーションを推奨していません。
周遊させることに意識を向けすぎず、あくまでユーザーが読みやすいことを第一に考えています。

ページの評価が分散することがある

ページネーションのデメリットは、Googleの検索エンジン上で各ページが独立したものとして評価されることです。これは、1つのコンテンツを複数のページに分割するために発生します。この分散した評価は、1ページあたりの情報の網羅性に影響を与え、SEOに不利に働く可能性があります。

通常、1つの包括的なページは多くの情報を提供し、検索エンジンはそれを一つのコンテンツとして評価します。しかし、ページネーションでは情報が分割され、各ページが独立して評価されるため、全体のコンテンツ価値が分散し、ランキングに影響を及ぼす可能性がある点に留意しなければなりません。

読み込み速度が遅いと離脱につながる

ページネーションでは1つのコンテンツが複数のページに分割されます。ユーザーが次のページに移動するたびに、新しいページの読み込みに時間がかかり、ユーザーにストレスを与えかねません。

特に重たいサイトや遅い接続速度を持つユーザーにとって、ページの読み込み待ち時間は不快に感じられ、離脱の原因となります。ユーザーはサクサクとコンテンツを閲覧したい傾向があり、読み込み速度の遅さはその体験を損なう可能性があるため、注意が必要です。

ページネーションの設置をした方がいいケース

サイトによっては、ページネーションを設置した方がいいケースはさまざまです。
ここではページネーションの設置をした方がいいケースを紹介します

ニュースや調査レポート、インタビュー記事など長文のもの

ニュースや調査レポート、インタビュー記事などの長文のコンテンツでは、1ページに全てを詰め込むと読み手に圧迫感を与え、読みづらくなります。
ページネーションを導入することで、コンテンツを適度に区切り、読みやすさを向上させることが可能です。さらに、展開に応じて区切りを設けることで、読みやすさが向上し、UX（ユーザーエンゲージメント）も高まります。

商品ページやカテゴリページなど多岐にわたるもの

ECサイトなど、商品紹介は種類が多く情報量が多いため、全てを1ページに詰め込むとUX（ユーザーエクスペリエンス）が悪化します。ページネーションを導入することで、ユーザーは簡単に目的の商品にアクセスでき、情報の整理が効率的に行えます。
特に商品を画像一覧で紹介する場合、ページ内の画像データが多くなり、ページデータが重くなりがちです。ページネーションは、ページを分割して読み込みを軽減してくれるため、ECサイトや商品紹介に向いていると言えるでしょう。

ページネーションタグは2019年3月21日に廃止！

Spring cleaning!

As we evaluated our indexing signals, we decided to retire rel=prev/next.
Studies show that users love single-page content, aim for that when possible, but multi-part is also fine for Google Search. Know and do what's best for *your* users! #springiscoming pic.twitter.com/hCODPoKgKp

— Google Search Central (@googlesearchc) March 21, 2019

ページネーションしたコンテンツ群を認識させるために、以前は「rel=”next”」と「rel=”prev”」というタグが使われていました。しかし2019年3月21日に廃止。Googleでのサポートは終了しています。(Bingでは現在もサポートされています)

※サポート終了ついては下記ページで告知されています

https://developers.google.com/search/blog/2011/09/pagination-with-relnext-and-relprev?hl=ja

タグ廃止後のページネーションのベストプラクティスについて

ページネーション実装にあたってのベストプラクティスは今も明確なものは示されていませんが、上記を意識してページネーションを実装できると間違いがないでしょう。

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

ここでは、主なページネーションの実装方法について紹介します。ぜひ運営しているサイトの参考にしてみてください。

JavaScript ・jQueryでの実装方法

ページネーションを実装する方法は、JavaScriptとそのライブラリであるjQueryを使用する方法があります。
具体的な手順は下記のとおりです。

代表的なjQueryプラグイン「paginathing.js」です。
「paginathing.js」は、静的なHTMLページに簡単にページネーションを追加できる便利なjQueryプラグインです。ページネーションのスタイル、表示件数、ページ切り替え方法など、多くのオプションが提供されています。

HTMLでの実装方法

HTMLでページネーションを実装する方法はシンプルです。ジャンプリンクを使用して、ページ内の特定のセクションに簡単に移動できます。
具体的な手順は下記のとおりです。

ページ内のセクションごとに、リンク先となるジャンプリンクを作成します。
HTMLでのページネーションは簡単ですが、サイト内の情報が増えるたびにリンクを手動で追加する必要があるため、適切な管理が必要です。しかし、基本的なページネーションの実装には効果的な方法です。

WordPressの場合の実装方法

WordPressの場合、プラグインを組み込む方法と、PHPを書いて自作する方法の２種類あります。
プラグインを組み込む方法は、手軽で簡単ですが、デザインや機能には制約があります。一方、PHPを書いて自作する方法は、自由度が高く、カスタマイズが可能ですが、実装にはプログラミングスキルが必要です。
実装方法の選択は用途に応じて行いましょう。手軽な実装ならプラグインが便利ですが、デザインや機能のカスタマイズが必要な場合はPHPで自作することを検討しましょう。

ページネーションをデザインする際のポイント

現在の閲覧ページがわかるようにする

「ページネーション」を設置する際には、ユーザーが「今、どのページを閲覧しているのか？」が一目でわかるようなデザインにしましょう。
これは、ユーザーの利便性にもつながるUI（ユーザーインターフェイス）の改善ポイントでもあります。

たとえば、上記の画像では、4ページ目を表す「4」という数字が黒色で表現されていたり、「Google」の「o」の4番目の文字が赤く色付けられたりしています。このように、ちょっとした工夫で現在閲覧しているページが何ページ目であるかを示し、ユーザーの利便性が高まります。

前後のページへのリンクを設置する

画像にある「ページネーション」の「前へ」「次へ」のボタンをクリックすることで、現在閲覧しているページの前後のページへ遷移できる、ボタンを設置しましょう。クローラーが回遊の際に前後にページを認識できるため、コンテンツ群を正確に把握することができます。

またリンクを設置する際は、ユーザーが分かりやすい表示にすることを心がけます。
たとえば「前へ/次へ」、「PREV/NEXT」など言葉を用いて表現する場合もあれば、「＜/＞」のように記号を用いて表現することもあります。

クリック要素のサイズ調整をする

クリック要素のサイズを大きくしたり、適切な間隔で配置したりすることも、「ページネーション」をデザインする上で重要です。特にモバイル端末ではクリック領域が小さかったり、間隔が狭かったりするとユーザーのストレスにつながります。

レスポンシブデザインを意識し、より多くのユーザーにWebページを閲覧してもらうため、クリック要素はできるだけ使いやすいように設計しましょう。

ページは適度な長さで分割する

ユーザーが長大なコンテンツを読み続けるのは困難で、注意力を維持するのが難しい場合があります。これはUX（ユーザーエクスペリエンス）に悪影響を与えます。逆にページが非常に短い場合、頻繁なページ遷移がユーザーに手間をかけさせ、ストレスを引き起こす可能性があります。
ページはコンテンツの性質に応じて適切に分割し、ユーザーにストレスなく情報を提供するためのバランスを考慮するようにしましょう。

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

多くのWebサイトでページネーションはコンテンツの最下部に配置されています。これは、読者が長いコンテンツを読み終わった後、続きを読むために自然な流れで下部にスクロールすることが期待されるためです。
ページネーションをサイトの上部に配置すると、読者がコンテンツを読み飛ばしてしまう可能性が高まります。下部に配置することで、読者はまずコンテンツを閲覧し、必要に応じてページネーションを使用してくれます。

表示するページ数は5以下にしてボタンごとの間隔を空ける

ページネーションで多くのページ番号を一度に表示すると、ユーザーが逆に選びづらくなります。多くのWebサイトは表示するページ数を限定しています。
ページネーションのページ番号は、目安としては５以下にするのがいいでしょう。Googleでも10までに抑えて表示しています。
また、表示されたページボタンが詰まっていると、誤って間違ったページに進む可能性があります。各ボタンの間隔を広げることで、ユーザーが意図したページにスムーズに移動することができるでしょう。

最後のページにも飛べるようにする

ユーザーがWebページ内を閲覧する際、最後のページに迅速に移動できることは便利です。特にECサイトはユーザーにとって使い勝手が良くなります。
ECサイトでは商品リストを価格や人気順にソートすることが一般的です。ユーザーは最後のページに移動して、最高価格や最も人気の商品を確認したいことがあります。このため、最後のページへの迅速なアクセスは重要です。
ECサイトなどのWebデザインは、ユーザーの使い勝手を意識して設計するようにしましょう。

ページネーションをシステム上実装する際の注意点

ページネーションを実装する場合は、適切な実装をしなければSEOにも大きな悪影響が出ます。
ここから、ページネーションをシステム上実装する際の注意点を解説していきます。

ページを順番にリンクする

検索エンジンにページ間の関係を認識させるには、 タグを使用して各ページに次のページへのリンクを追加しなければなりません。各ページに次のページへのリンクを追加することで、検索エンジンはページ間の関係を理解し、ユーザーがページを移動できるようになります。

シンプルなページネーションは使いやすく、わかりやすいです。
例えば、現在のページが赤く表示されるなど、視覚的に強調されることで、ユーザーは現在の位置を迅速に把握できます。また、数字が適切な間隔で配置されていると、ユーザーは次のページへの移動をスムーズに行えます。
画像引用元、コード参照先：https://techis.jp/guide/css/css3_pagination

丸いページネーション

丸いページネーションは、その丸みがあり可愛らしいデザインです。このスタイルのページネーションはウェブサイトに遊び心と魅力を与え、ユーザーに親しみやすい印象を与えます。
画像引用元、コード参照先：https://eclair.blog/example-of-pagination/

スマホでよく使用される四角枠

スマホでよく使用される四角枠のページネーションは、スタイリッシュで使いやすいデザインです。四角い枠に数字や矢印を配置し、コンテンツの切り替えが直感的に行えます。このデザインはユーザーフレンドリーで、スマホ画面に適しています。
画像引用元、コード参照先：https://codepen.io/devilishalchemist/pen/QdLVVv

ページネーションを実装し流入が改善した事例

ページネーションを行うことで、コンテンツが認識されやすくなり結果的にGoogleからの評価が上がった事例をご紹介します。

ある商品一覧ページの下部には「もっと見る」というボタンが設置されているだけで、押すたびに追加の商品情報が表示されるという仕様のページがありました。このままでは商品一覧ページ全体を把握しづらく、クローラーがサイト構造を理解しにくいと考えページネーションを実装しました。

ページネーション実装では、コンテンツを1ページ目、2ページ目…、と送りリンクで設計。
これによりサイト内にある商品情報をGoogleが把握しやすくなり、実装後は順位・セッション共に順調な伸びを見せており、実装前と比較するとその成長率は200％以上でした。

この事例の詳細を知りたい方はお問い合わせください

ページネーションに関するよくある質問

ページネーションとはどういう意味ですか？

ページネーション（pagination）は、Web制作において、多くのコンテンツを複数のページに分割し、各ページにアクセスできるようにする方法です。日本語で「ページ割り」とも呼ばれます。主要な要素はボタンで、ユーザーが次のページや前のページに移動できるようになります。

ページャーとページネーションの違いは何ですか？

ページネーション（pagination）は、Web制作において多くのコンテンツを複数のページに分割し、ボタンを設置して各ページにアクセスする方法です。一方、ページャー（pager）はページ番号をつける人やページをめくる人を指し、同じ意味で使われることもありますが、基本的にはページャーのほうが一般的です。

ページネーションを設置する意味はなんですか？

ページネーションを設置する意味は以下のものが挙げられます。

ページネーションの設置には多くのメリットがあり、SEO的な効果にも期待できます。

ページネーションを実装し、Webサイトの品質を高めましょう

このページでは、「ページネーション」に焦点を当て、その概要や重要性、作成ポイント、設置方法、デザイン例などについて解説しました。

「ページネーション」を適切に実装すれば、ユーザーの利便性だけでなく、SEO的な効果にも期待できます。

商品ページを初めとする一覧ページなどを見直すだけでも、Googleからの評価が変わる可能性もあります。ぜひ一度自社サイトのコンテンツを見直してみてはいかがでしょうか？

株式会社ipeではSEOでの大手クライアント実績多数！もしSEO対策を検討する場合にはぜひお気軽にご相談ください。