ページネーションをWordPressで実装するポイント

2022.08.01 Web制作

皆さんは「ページネーション」という言葉を耳にしたことがあるでしょうか？ Webマーケティングに携わる方だけでなく、WebやIT分野に携わったことがある方ならば、一度は見聞きしたことがあるかもしれません。

「ページネーション」とは、一言でいうとWebページにおける「ページ分割」のこと。文字数が多く、ユーザーのスクロール負担が大きくなるようなページで設定されることの多い機能です。

記事では、そんな「ページネーション」の概要や必要性、設定するうえでのポイントやWordPressで設定する方法についてまとめてお伝えします。「ページネーション」に関わる全体の概要を知りたい方は是非続きをご覧ください。

1 ページネーションとは
- 1.1 ページネーションとSEOの関係
2 ページネーションのポイント
3 ページネーションを設置する方法
- 3.1 プラグインを利用する場合
- 3.2 phpファイルでページネーションを設定する場合
4 ページネーションに関するよくある質問
5 おわりに

ページネーションとは

ページネーションとは、Webサイトにおける「ページ分割機能」のことです。特に、記事を取り扱うWebメディアなど読み物のページで設定されます。Webサイトを人気CMS「WordPress」で構築している場合はプラグインで簡易に、自ら実装する場合もテンプレートコードのコピペで設定できるのが特徴です。

実装するポイント

イメージが掴めないという方は、上記画像がページネーションのイメージです。一つ目の画像は、よくあるWebメディアのページネーション。全部の記事を一覧にすると長くなってしまうので、指定した記事数でページが分割されます。二つ目の画像は、皆さんにも馴染み深いであろうGoogleのページネーションです。このように、実際にご覧いただくとご理解いただきやすいかと思います。

ページネーションの概要についてご説明しましたが、ではページネーションはどんな理由から必要となるのでしょうか。次に「ページネーションの必要性」についてご説明したいと思います。

ページネーションの必要性は、大きくユーザビリティとSEO効果の2点から考えることができます。なお、ユーザビリティとは平たく「ユーザーの使いやすさ」と理解してください。

まず前者のユーザビリティの観点から。これは、ここまで記事を読まれた方であれば大方予想がつくのではないでしょうか。ユーザビリティから考えると「1ページの読み込み速度」と「読了の負担」が関係します。

Webページは読み込みたいページのデータ量が多ければ多いほど、ページの表示が完了するまでの表示時間は遅くなります。Google検索画面のページネーションを設定することができますので、試しに「設定」→「検索の設定」の「ページあたりの表示件数」を100にしてみてください。

ページあたりの表示件数

すでに、調整箇所に「速い」「遅い」と表記されていますが、実際に100にして何かGoogle検索してみると、その表示速度が遅くなることがわかるでしょう。（Googleのデフォルトページあたりの表示件数は10件）

ユーザビリティの2つ目の観点は「読了の負担」。ユーザーの個人差はもちろんありますが、一般的に1ページが5,000文字を越えると、ユーザーは一読するのに負担を感じるといわれています。

昨今人気のメディアプラットフォーム「note」など、ページネーションの機能を持たないWebページやメディアも存在しますが、ページネーション機能を持たせる持たせないは、Webサイトやメディアの運営方針との折り合いによって方針は変わります。メディアの広告収益がある場合は、PV数を多くした方が広告収益が高くなることもあるので、戦略次第となります。
ただし、1ページあたりの情報量を減らし、ページネーション設定をすることでユーザビリティの向上が期待できるのも一つの効果があることは念頭に入れておきましょう。

ページネーションとSEOの関係

ページネーションで記事を分割する場合、従来のGoogleSEO対策では、タグにrel=prevとrel=nextを設定するのがSEOのベストプラクティスでした。ただし、以下のようにGoogleはrel=prev/nextのサポートを終了しました。

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 Webmasters (@googlewmc) March 21, 2019

そのため、今はrel=prev/nextが不要です。ただし、Bingはrel=prev/nextのサポートを継続しているので、rel=prev/nextの設定を対応するかどうかは検討が必要です。

rel=prev/nextの代わりとなるベストプラクティスの発表はGoogleから現時点でありません。しかしページネーションをする場合は、以下に注意しながらページが分割されていることを分かりやすくしてあげましょう。

分割されたページ番号をアンカーテキストに含める
前後のページのリンクを設置する
タイトル・見出しに○○ページ目と入れる

また、ページネーションによって分割されたページは、しっかりとクロールできることが必要です。各分割ページにno indexやno followの設定を避け、表示されているページのURL自身にcanonicalを設定するようにしましょう。

ページネーションのポイント

ページネーションがユーザビリティの観点、そしてSEO観点から必要性のある設定であることをお伝えしてきました。では、実際にページネーションの設定を行う際、なにかポイントはあるのでしょうか。次はページネーションのポイントについて解説いたします。

適度にページを分割

ページネーションで一番意識していただきたいのが「適度にページを分割する」ということ。先ほどもご説明したように、「ページネーションを設定すればSEO効果が高まる」「ページネーションを設定することでPV数を効率的に稼ぐことができる」という考えから、過度に設定されているWebサイトをたまに散見します。

しかし、あくまでも一番に向き合うのは「ユーザー」。その次に「SEO効果」という順であるべき。1ページの情報量（一般的には文字数）がどれくらいに達すればページネーションするべきか、は各Webサイトの運営方針によっても違ってきます。

ですから統一された基準はありませんが、おおよそ1ページの文字数が3,000〜5,000文字に達するのであれば、ページネーションをするべきと考えるべきでしょう。

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

二つ目のポイントは「現在の閲覧ページが分かるようにする」ということ。これは、普段からWebサイトを閲覧する機会の多い方なら、当然のようにご存知であろうUI（ユーザーインターフェイス）面のポイントです。

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

具体的にどういうことかというと、上の画像をご覧いただければすぐ分かると思います。上の画像では、「2ページ目」を表す「2」を囲う四角が黒色で表示されています。このように、ページネーションでは現在閲覧しているページが何ページ目であるかをページ番号のデザインを変えることで、ユーザーに伝えるのが通例です。

このデザインの機能は、後ほど説明するWordPressでページネーションを設定する場合はデフォルト（標準）で搭載されていることが多く、自らコーディングする際もそう複雑な記述は必要ありません。

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

三つ目のポイントは「前後のページへのリンクを設置する」ということ。こちらも先ほどの「現在の閲覧ページが分かるようにする」と同じく、Webサイトの利用機会の多い方であれば、想像に難くないポイントです。

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

具体的には、上の画像にあるページネーションの「前へ」「次へ」のボタンをクリックすることで、現在閲覧しているページ前後のページへ移動できる設定のことを指します。

当然ではありますが、ページネーションは本でいう「ページをめくる機能」のようなものですので、前後のページはもちろん、指定するページへ移動できないとそもそもページネーションとしてユーザビリティの視点から基準を満たしていません。（指定したページへの移動は、各ページ番号をクリックすることで移動できます）

なお、こちらも後ほどご説明しますが、WordPressで設定する場合も自らコーディングする場合も設定の作業は難しくはありません。

ページネーションを設置する方法

最後に、Webサイトで実際にページネーションを設置する方法について解説したいと思います。ここでは、国内外問わず人気のCMSツール「WordPress」をベースに、WordPressのプラグインを利用したケース、プラグインに頼らず実装するケースの2つの方法別にお伝えいたします。

プラグインを利用する場合

WordPressでページネーションを設定するプラグインには、メジャーなもので「WP-PageNavi」「WP-Paginate」「WP Page Numbers」の3つがあります。そのなかから、記事ではもっとも親しまれている「WP-PageNavi」のプラグインの導入手順についてご説明します。

「WP-PageNavi」はWordPressの管理画面 > 「プラグインを検索」より検索しインストール。または公式サイトよりダウンロードすることで使用可能です。なお、管理画面からインストールした方が後の設定が簡単であることを抑えておきましょう。

管理画面からインストールし終えたら、次に「有効化」します。「有効化」することで、管理画面の「設定」>「PageNavi」より詳細の設定が可能になります。以下はPageNavi設定の設定画面です。

プラグインを利用する場合

WordPressの管理画面では、ページネーションのテキスト（文章）設定や簡易的なデザインや表示設定を行うことができます。そのうえで、どのページに表示させるのか、細かなデザイン（CSS）の変更についての設定は、使用テーマに関する各ファイルの記述を適宜書き換える必要があります。

詳細の作業内容につきましては、説明が長くなりますので、以下「WORDPRESS.ORG」の「使い方」に従って進めてください。

参考元：WORDPRESS.ORG 日本語「WP-PageNavi」

phpファイルでページネーションを設定する場合

ページネーションはWordPressのプラグインをインストールするだけでなく、phpファイルの設定で自ら実装することもできます。Wordpressはプラグイン同士が干渉して不具合が起きることもあるので、phpファイルでページネーションを設定すると、表示速度の最適化ができ、今後の開発作業に柔軟性が生まれやすくなるというメリットがあります。

一方で、開発スキルに自信がない方からすると、少し作業が難しく感じられるかもしれないデメリットがあります。以下でご紹介する実装方法は、以下に紹介するコードを基本的にはコピペするだけです。ただし、誤ったphpファイルの記述をするとサイトの表示がされない可能性もあるので、十分な配慮が必要です。

はじめに、全ページに反映される関数を定義するファイル「function.php」を管理画面の「外観」>「テーマの編集」より選択し開きます。そして「function.php」内に以下コードをコピペします。

function the_pagination() {
global $wp_query;
$bignum = 999999999;
if ( $wp_query->max_num_pages <= 1 )
return;
echo '<nav class="pagination">';
echo paginate_links( array(
'base' => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ),
'format' => '',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'prev_text' => '←',
'next_text' => '→',
'type' => 'list',
'end_size' => 3,
'mid_size' => 3
) );
echo '</nav>';
}

Webサイトごとに調整が必要だと考えられる箇所は、「prev_text」「next_text」「end_size」「mid_size」引数と「=>」の右側のオプション部分のみ。

それぞれ、「prev_text」と「next_text」では前後のページへのリンクテキストを指定しています。オプションには「&larr」「&rarr」が記述されていますが、これは画面上では「←」「→」と表示されることを指示しています。

また、「end_size」引数ではページ番号のリスト両端にいくつの数字を表示するのか。「mid_size」引数では現在閲覧しているページの両端にいくつの数字を表示するのか（ただし現在閲覧中のページは含まない）を指示しています。

このように「function.php」ファイルに上記コードをコピペしたら、実際にページネーションを表示させたい画面のファイルの表示箇所を示す箇所に以下コードをコピペします。

<?php if( function_exists("the_pagination") ) the_pagination(); ?>

基本的にWordPressであれば、「archive.php」や「category.php」「index.php」がコピペするファイルに該当するかと思います。

一見すると複雑そうに感じられる自ら実装する方法ですが、ご説明したように既存コードのコピペで済みます。もちろん、別の記述法で紹介されているコードもありますし、可能な方は完全にイチから書いてみても構いません。リソースや要件を鑑みて、適切な作業方法を選択されてみてください。

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

ページネーションを設置するメリットは？

ページネーションを設置すると、PV数や広告の表示回数の増加などメディアサイトの収益につながるメリットがあります。また、ページを分割することによってユーザーがテンポよく記事を読むことができる速面があります。

多くの情報を1ページにまとめるより分けた方が良いの？

何回もスクロールするのはユーザーにとって負担に感じます。1ページの情報量を減らしページネーションを設定することはユーザビリティ向上に期待できますが、ただページを分割すれば良いというものではないので、サイト運営方針を定めた上で選択しましょう。

ページネーションのSEO設定ポイントは？

前後のページに内部リンクを設け、見出しやtitleタグでどのページを見ているかページ番号を付けるとよいでしょう。かつてはprevやnextのメタタグ情報が必須となっていましたが、現在Googleはこの情報を見ていません。

ページネーションを設置した場合すべてのページをインデックスさせる必要はある？

2ページ目以降にユーザーにとって有益な情報が書かれているのであれば、検索エンジンに認識してもらう必要があります。各ページにnoindexやnofollowを使用する必要はないでしょう。

うまくページネーションの設定ができません。どうすればいいですか？

ページネーションは不適切に設置してしまうとサイトの質を下げることに繋がります。もしうまく設置できない、設置方法がよく分からないという場合は当社の「Webサイト制作」にご相談ください。

SEOの内部施策を満たしたWebサイト制作

Webサイト制作に関して以下のお悩みを持ったことはありませんか？

「検索エンジンに好まれる内部施策をWebサイトに実装してくれるのか・・・」

「SEOに強いWebサイト制作会社を探してる・・・」

以前、私がWebサイト制作を外注する時に「SEO要件を満たしたWebサイトを作ってくれる会社なのか」「成果を最大化するアドバイスがもらえるのか」こうした会社を見つけることが出来ませんでした。

当社はWebサイト制作はもちろんのこと、SEO歴16年以上の実績を持つ「SEOの相談ができるWebサイト制作」を依頼できる会社です。なぜなら、SEO相談実績1000社以上で多くのWebサイトのSEO改善を図ってきたからです。また、経験豊富な専任コンサルタントが社内のSEOコンサルタントや制作チームと連携してWebマーケティングの収益最大化を目指すことができます。

当社の強みは以下にあります。