SEO対策に関する実験やデータ分析などを公開します

seoラボラトリー

  • follow us in feedly

ページネーションのデザイン・wordpressプラグインとSEOについて

2016/08/22 2017/10/17

ページネーションを設置し、ユーザービリティを高めながら、ブログサイトを運営することが大切です。

今回は、ページネーションのデザイン・wordpressプラグイン、ページネーションとSEOについて中心に解説したいと思います。

ページネーションのデザイン・wordpressプラグインとSEOについて

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

ページネーションとは

ページネーション(pagination)とは、サイトに設置するページ送り機能のことです。
ページネーションは別名、「ページ分割」「ページ送り」「ページング」「ページャー」とも呼ばれてます。

ページネーションは、一覧ページの記事数を最適化し、ユーザービリティ向上やサイトの読み込み速度改善に役立つ機能です。
近年は、ブログサイトでのページネーション活用が目立ちます。

ページネーションは、wordpressプラグイン、php、jquery、javascript、ajax、apiなどのスクリプトを活用し、さまざまな方法で実装することが可能です。

ページネーションのデザインとCSS

ユーザーが使いやすいページネーションを効率的にデザインするために、以下のようなサンプルサイト参考にしましょう。

【まとめ】ページングCSSおすすめデザインコピペサイト 5選
CSSでページャー(ページネーション)をコーディングする例
ページ送りのサンプル|CSS HappyLife

wordpressプラグイン「WP-PageNavi」でページネーション設置する方法

wordpressプラグイン「WP-PageNavi」を利用して、ページネーションを設置する方法は以下です。
※wordpressプラグイン「WP-PageNavi」を使うには、wordpressでサイト構築してることが前提です。

①wordpress管理画面にログイン後、左メニューのプラグイン>新規追加から、「WP-PageNavi」を検索し、「今すぐインストール」をクリックします。
その後、ホスト名、FTP ユーザー名、FTP パスワードを入力後、「開始」ボタンをクリックすれば、インストールが完了します。「WP-PageNavi」プラグインの設定を有効化しておきましょう。

wordpressプラグイン「WP-PageNavi」でページネーション設置する方法 イメージ①

②インストールしたwordpressプラグイン「WP-PageNavi」を使ってページネーションを表示させるには、以下のタグを表示させたい部分に記述します。

<?php wp_pagenavi(); ?>
※以下タグにすれば、プラグインが停止しても、ページネーションが表示されるようです
<?php if(function_exists(’wp_pagenavi’)) { wp_pagenavi(); } ?>

③実装すると以下のようなページネーションが表示されるようになります(※当ブログ「SEOラボ」のページネーション)

wordpressプラグイン「WP-PageNavi」でページネーション設置する方法 イメージ②

ページネーションとjquery、phpでの実装

ページネーションをjqueryで実装するために以下のようサイトを活用すると便利です。

面倒なページネーション実装よさらば!jQueryでサクッとページネーション実装を実現するプラグインはこれだ! #jQuery #javaScript #CSS|CodeIQ MAGAZINE
jQueryプラグイン無料配布 ページネーション [Cool Web Window]
jQueryで静的HTMLファイルをページネーション(ページ分割)する方法 | jQuery.lab

また、ページネーションをphpで実装するために、以下のようなサイトを活用すると便利です。

[PHP] ページング機能の仕組みとか作り方とか | WebTecNote
PHPでシンプルなページャーつくってみた | webOpixel

上記のよう、自分でページネーションを構築し、外部サービスに頼らず管理できるのが一番理想です。

プログラム知識があまりなければ、phpより簡単に実装できるjqueryを使って、ページネーション構築するのも一つの手段です。

ページネーションとSEOについて

ページネーションにより、以下のようなSEO効果が期待できます。

ページ/セッションの改善
⇒必要な記事コンテンツ探しに役立ち、1訪問(セッション)当たりのページビューが改善できるので、SEO効果が期待できる

・読み込み速度の改善
⇒コンテンツ量が最適化され、負荷軽減でページ読み込み速度が改善されるので、SEO効果が期待できる

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

ページネーションとcanonical、noindex指定について

ページネーションによる重複コンテンツ回避のため、以下のような方法で最適化しておく方法があります。
※参考:ページネーションにおけるrel=“canonical”タグの正しい使い方 at SMX West 2011 | 海外SEO情報ブログ

・2ページ目以降にnoindexを指定する
⇒noindexを指定することで、検索結果にページが表示されなくなるので、重複コンテンツを回避できる

例:<meta name=”robots” content=”noindex”>

・全コンテンツが載っている一覧ページに向けて、canonicalタグを指定する
⇒canonicalタグを指定し、URL正規化することで、重複コンテンツ回避できる

例:<link rel=”canonical” href=”http://example.com/list.html”>

ページネーションとGoogle推奨の「rel=”next”タグ」「rel=”prev”タグ」

Googleでは、ページネーションによる続き物のページに対して以下のような3つの対策を推奨してます。
※参考:Google ウェブマスター向け公式ブログ:複数ページにまたがる記事やコンテンツをお持ちの方へ rel=”next” と rel=”prev” を使用したページネーションのご紹介

①特に何も対策はしない
⇒rel=”next”、rel=”prev” の有無に関係なく、Google は最も関連性の高い検索結果を表示するよう努める

②rel=”canonical” に「すべて表示」ページを指定する
⇒個々のページから、すべて表示に向けて、canonicalを指定する

③rel=”next” と rel=”prev” を指定し、URL間の関係性をGoogleに示す
インデックス登録がより正確にでき、Googleは最も関連性の高いページ(通常は最初のページ)をユーザーに表示するようになる

まとめ

ページネーションを適切に使い、サイトのパフォーマンスを向上させましょう。

使いやすいページにし、コンテンツの質を管理しながら、順位上昇を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

順位が上がらないのは、何が原因??
順位決定の仕組と、
サイトの問題点をアドバイス(無料)

お申込みはこちらから

上位表示を目指すURL

※アメブロ、jimdo、fc2ブログのURLはご遠慮ください

上位表示を目指すキーワード

会社名/組織名

ご担当者様名

電話番号

メールアドレス

※個人情報の管理は「プライバシーポリシー」に同意の上お申し込みください

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

最新記事

本日の順位変動幅順位変動情報へ