HOME内部対策 > ページネーションのデザイン・wordpressプラグインとSEOについて

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

2016/08/22内部対策[最終更新日]:2017/03/07
このエントリーをはてなブックマークに追加

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

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

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

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

PR

ページネーションとは

ページネーション(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は最も関連性の高いページ(通常は最初のページ)をユーザーに表示するようになる

まとめ

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

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

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

PR
あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
期間限定!今だけ両方プレゼント!「Googleが嫌うリンク3つ教えます」と【順位が上がらない方へ】SEO内部レポートプレゼント
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *

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

このエントリーをはてなブックマークに追加
最新記事
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
このブログが役に立つと思ったら、ぜひ『いいね!』して下さい。
follow us in feedly