【Wordpress】非同期ページネーションとは？方法！自作！SEO効果!自作！

URLをコピーしました！

今回はページネーションを実装します。SEOへの期待も持てます。

ページネーション（pagination）とは、直訳すると「丁付け」や「ページ割り」という意味で、Webサイトにおいては、検索結果一覧やカテゴリ一覧などのリスト化された縦長ページを複数ページに分割する機能のことです。

【Wordpress】非同期ページネーションとは？

ページネーションとは、丁付け、ページ割りという意味の英単語です。

Webページに長い文章を掲載する際に、同じデザインの複数のページに分割し、各ページへのリンクを並べたものをこのように呼ぶ。

下記の画像のようのものがページネーションです。

WordPressでページネーションをJavaScriptの自作の方法

function.phpに以下のコードを追記します。

function the_pagination() {
  global $wp_query;
  $bignum = 999999999;
  if ( $wp_query->max_num_pages <= 1 )
    return;
  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'    => '&larr;',
    'next_text'    => '&rarr;',
    'type'         => 'list',
    'end_size'     => 3,
    'mid_size'     => 3
  ) );
  echo '</nav>';

ation">}

prev_textとnext_textは、それぞれ前のページ、次のページへのリンクテキストを指定してます。
このコードでは、それぞれ「←」、「→」という左右の矢印を指定しています。

end_size：ページ番号のリストの両端（最初と最後）にいくつの数字を表示するか。

mid_size：現在のページの両側にいくつの数字を表示するか。ただし現在のページは含みません。

ページネーション設置

archive.phpやcategory.php、index.phpなどアーカイブ用テーマファイルに設置します。
次のコードを、ページネーションを設置したい場所にコピペします。

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

ページネーションのHTML

出力されるページネーションは、次のようなHTMLでマークアップされます。

ページネーションのSEO効果は？

<nav class=”pagination”>
<ul class=”page-numbers”>
<li><span class=”page-numbers current” aria-current=”page”>1</span></li>
<li><a class=”page-numbers” href=”https://×××.com/page/2/”>2</a></li>
<li><a class=”page-numbers” href=”https://×××.com/page/3/”>3</a></li>
<li><a class=”page-numbers” href=”https://×××.com/page/4/”>4</a></li>
<li><span class=”page-numbers dots”>…</span></li>
<li><a class=”page-numbers” href=”https://×××.com/page/8/”>8</a></li>
<li><a class=”page-numbers” href=”https://×××.com/page/9/”>9</a></li>
<li><a class=”page-numbers” href=”https://×××.com/page/10/”>10</a></li>
<li><a class=”next page-numbers” href=”https://×××.com/page/2/”>→</a></li>
</ul>
</nav>

ページネーションは、基本的に必要ありません。
なぜかというと、ユーザーは、1ページに全ての情報が含まれたコンテンツの方を好むからです。
これは、Google公式に調査した独自データによるものです。

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

※引用元：Google ウェブマスター向け公式ブログ [JA] : 検索結果に「すべて表示」ページを優先的に表示する方法

一覧ページのリストの多さなどによって、ロード時間が非常に長くなることがあります。
また、根本的に1ページよりも複数ページの構成を好んでるとします。

そうなれば、離脱が増えるなどして、ユーザー行動が悪くなるでしょう。
そして、これが、ページエクスペリエンスに関われば、SEO効果に悪影響が出ます。

２ページ目以降の正規化

ページネーションを実装する際に、2ページ目以降を1ページ目に正規化すること控えましょう。

2ページ目以降を1ページ目に正規化すれば、うまくいかない可能性が高いです。
なぜかというと、2ページ目以降の各ページのコンテンツは、1ページ目と全く同様または、同様に近いコンテンツが含まれてないためです。

noindexやnofollowを使わない

また、ページネーションを実装したページにnoindexやnofollowを使ったり、robots.txtでクロール拒否することは控えましょう。
さらに、metaタグの「rel=”next”」「rel=”prev”」のURLの記述ミスに気を付けましょう。

ページ分割された各ページにnoindexやnofollowを使えば、それらのページがインデックスされなかったり、クロールされづらくなります。
そうなれば、分割されたページ同士の関連性をわかりやすく明示したり、ページごとの評価を統合することによる良いSEO効果が薄れます。

この記事を書いた人

アネックス（ANNEX）

More
芸能と音楽をを追求しつづけるメディアです。東京都内に住んでいます。アネックといいます。
子供の頃から芸能・音楽・テレビっ子でした。ですので昔の芸能音楽や芸能の知識は自信があります。好きな芸能ニュースに自分の見解をいれますので意見もいただけますと幸いです。今だけでなく昔の芸能もお伝えして楽しんでいただければと感じます。とくに皆さんが興味をもってもらえるような懐かしい気持ちに浸れるメディアとしたいと考えています。
法人サイトの実績：
①某大手総合商社系メディア／コーポレイトサイト３件でインフラやセキュリティの技術面で要件定義から運用
②渋谷の大手ファッションモールのショッピングサイトのインフラ担当エンジニア

【資格】
Webディレクション資格認定者、Google アナリティクス個人認定資格（GAIQ）など他　IT資格を取得

【お問い合わせ先メールアドレス】
ybox4907@gmail.com

この著者の記事一覧へ

【WordPress】非同期ページネーションとは？方法！自作！SEO効果!自作！

【Wordpress】非同期ページネーションとは？