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

Wordpressページネーション
  • URLをコピーしました!
Ajaxページネーション
Ajaxページネーション

今回はページネーションを実装します。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_textnext_textは、それぞれ前のページ、次のページへのリンクテキストを指定してます。
このコードでは、それぞれ「←」、「→」という左右の矢印を指定しています。

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

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

ページネーション設置

archive.phpcategory.phpindex.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ページ目以降の正規化

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

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

noindexやnofollowを使わない

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次
閉じる