ページネーションとは？効果的に実装する方法などもご紹介

Webサイトを閲覧しているときに1ページ目、2ページ目、3ページ目…と続く、ページが分かれているコンテンツを見たことがありませんか？これをページネーションといい、コンテンツが長くなる場合などはページネーションを用いて分割して表示することがあります。

ここでは、ページネーションがどのようなものなのか解説するとともに、必要性や実装方法なども解説してきます。これからページネーションについて理解を深めたい方は、ぜひ参考にしてください。

また、ページネーションのほか、タイトルやディスクリプションなどのSEOで設定すべきタグについて動画で学べる動画セミナーもございます。

あわせてご覧ください。

セミナー【動画】SEO徹底解決セミナー：
第1回「内部施策の重要性〜タグ設定のポイント〜」

ページネーションとは？

ページネーションとは、前述した通り複数のページに分けてコンテンツを表示させる手法のことです。「ページ割り」や「ページ送り」と呼ばれることもあります。

最も身近なところでは、検索結果が挙げられます。
他にはECサイトの商品一覧やメディアサイトの記事一覧など、一覧ページに用いられることが多いです。また、ブログ記事などの場合でも、内容が多くなればページネーションを用いる場合があります。

ページネーションの必要性は？

ページネーションを用いる理由としては、1ページの情報を区切ることで読みやすくするためです。1ページがあまりにも長いと、読みづらさからユーザーは離脱してしまうことがあります。
また、1ページに情報がたくさんあると、その分ページを読み込む時間も長くなります。これもまたユーザーが離脱する原因になります。
ユーザーの離脱を防ぎ、満足度を高めるためにはページネーションを使ってコンテンツを区切ることがひとつの解決策になり得ます。

また、ページネーションはGoogleクローラーに対しても意味があり、Googleがサイト内の情報を取得するためのクロールを手助けする役割があります。「サイト内にこれだけ情報があって、それをページごとに適切に分けている」というのを伝えるためにも、ページネーションは役立ちます。

上記のように、ユーザーに対してもクローラーに対してもページネーションが最適に使用されていることは非常に意味があることだと言えます。

ページネーションを実装することによってSEO効果を高められるかどうかについては、Googleからの発表などはありません。しかし、Googleがサイトの構造を正しく理解するという意味では、設定しておくと良いでしょう。

Googleが公表したページネーションのベストプラクティスについて

ウェブマスター向け公式ブログではページネーションのベストプラクティスについて以下の内容が公表されています。

複数ページにまたがる記事やコンテンツをお持ちの方へ。
rel=”next” と rel=”prev” を使用したページネーションのご紹介

ウェブマスター向け公式ブログ

ここで注目したいのは、「注: 本機能（rel=”next” と rel=”prev”）につきましては、Google 検索でのサポートを終了しました。」という一文です。

これまでページネーションの実装はrel=”next” と rel=”prev”を用いた実装が最適だと公表していました。
しかし、特にこれらの方法を用いずとも、クローラーはページネーションを理解できると Google Webmaster Conference TLV 2019で公表しました。

Pagination without rel next/prev.
New guidelines are coming up soon, #GWCTLV @JohnMu pic.twitter.com/GuzFoeIdxV

— Igal Stolpner (@igalst) December 4, 2019

GoogleのJohn Mueller（ジョン・ミューラー）氏によると、閲覧中のページと前のページ、次のページが明確である、複雑なパラメータがないという状況であれば、Googleのために何か特別な対策をする必要は不要とのことです。

例を挙げると、https://example.com/1、https://example.com/2/、https://example.com/3/ のようにページは違えど、一連のコンテンツとして認識できる形であれば問題ないということです。
簡単で複雑な指示がなければ良いと言えます。

過去有効だったページネーションの実装方法　rel=”next” と rel=”prev”

それではここからはrel=”next” と rel=”prev”の実装方法について解説していきます。前述の通り、rel=”next”とrel=”prev”のサポートは終了しています。現在はサポートが終了している実装方法だとしても、知識として知っておきましょう。

①head内に設定する

対象ページのhead内にタグを記述します。まずは対象ページが1ページ目だと仮定すると、head内には以下のような記述を行います。

次にページの正規化を示すcanonicalを設定します。
このcanonicalは重複ページが発生してしまうのを防ぐ役割があります。1ページ目に限らず、2ページ目、3ページ目…と全てのページで実装しましょう。

1ページ目の記述としては以上になります。

②2ページ目のhead要素内に、1ページ目と3ページ目の存在を伝える。

2ページ目も1ページ目の設定と同じようにhead内にタグを記述します。

これで前のページ/次のページとの前後関係を明らかにします。
このようにして、各ページに設定しておけば実装は完了です。

これがない場合でも、前後関係が明白であればGoogleは理解できるとして、サポートは終了したということです。

ページネーション実装する上でのポイント

ページネーションを実装する上で、いくつか注意する点があります。以下の点に気を付けて実装するようにしてください。

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

ページネーションはユーザーが読んでいる途中で中断するものになります。
1ページ目に掲載する情報が少ないのにもかかわらずページネーションを用いるのは避け、適度な長さで分割するようにしましょう。
ページ内容によって異なるので、一概に何文字程度で区切ると良いとは断言できませんが、自分で読み返してみたときに分割が煩わしく感じない程度にしましょう。

クリックできる要素を大きく表示する

ページを分断して次のページへユーザーを遷移させたい場合は、「ここを押せば次のページ（前のページ）へ進む」というのが明確でなければなりません。
ページネーションでクリックするボタンは大きく表示して、わかりやすいように設置しましょう。

現在の閲覧ページ目か分かるように設定する

現在閲覧しているページが何ページ目なのかユーザーが理解できるようにすることもポイントです。
たとえば、メディアサイトで上から最新記事から順番に古い記事を読んでいったとします。一旦サイトを離れて再度訪問したときに「あれ？どこまで読んだだろうか…」とユーザーが迷ってしまうこともあるでしょう。

このようにユーザビリティ向上のためにも閲覧しているページが何ページ目なのかを示すようにしましょう。

まとめ

ページネーションとはどのようなものか、必要性や実装方法などを解説していきました。よく見かける機能ですが、正しく使用しないとユーザビリティ的にもクローラー的にも良くありません。ここで解説した内容をよく理解して、適切な箇所で使用してみてください。

SEOトレンドレポートのご紹介

株式会社ジオコードは毎月、無料のSEOトレンドレポートを発行しています。
皆様のWebマーケティング活動にお役立てください。

記事【SEOトレンドレポート】過去の注目トピックまとめ！【1/31更新】