ページネーションとは(ページ送りとは)

意味:ページネーションとは

ページネーションとは、1ページに掲載するコンテンツが多くなってしまった場合に、それを複数ページに分割し、<link rel=”next”> と <link rel=”prev”>を使ってマークアップすることで実装できるナビゲーションのことを指します。

ページネーションは、Google検索結果ページやECサイトなど様々なWebページで見受けられます。

▼Google検索結果でのページネーション

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_061318_114639_am

ページネーションの重要性

複数に分割したページを<link rel=”next”> と <link rel=”prev”>タグを使ってマークアップをすることにより、検索エンジンが1、2、3、…とコンテンツが分かれているページを、きちんと1つながりの関連性があるページとして正しく認識することができるようになります。

長い文章や画像が多く掲載されているページは、ページの読み込み速度が遅くなってしまい、ユーザーがページを見る前に離脱してしまう可能性が高まります。ページネーションを使って内容の多いページを分割すれば、1ページあたりのコンテンツ量を減らすことできるので、ページ表示スピードを速くすることができます。このように、ユーザーにストレスなくページを閲覧してもらうためにも、ページは適切な長さで分割されていることが理想です。

しかし、マークアップを適切に実装しないと、分割したページが検索エンジンから「一連のつながったページ」として認識されないため、適切な評価を受けることができない可能性があります。ページが正当な評価を受けるためには、分割したページを<link rel=”next”> と <link rel=”prev”>タグを使って、正しくマークアップしておくことを推奨致します。

ページネーションの実装方法

ページネーションを設定するためには、<link rel=”next”> と <link rel=”prev”>タグを利用します。

以下のような3つの連続したページがあると想定してください。

・1ページ目:http://www.example.com/page1.html
・2ページ目:http://www.example.com/page2.html
・3ページ目:http://www.example.com/page3.html

①1ページ目のhead要素内に2ページ目の存在を伝える。

1ページ目には、”next”を使って次のページが存在することを伝えれば良いです。
<link rel=“next” href=”http://www.example.com/page2.html”>で2ページ目の存在を検索エンジンに伝えることができます。

vnkwsnzeimiwjce1528727452_1528727622

②2ページ目のhead要素内に、1ページ目と3ページ目の存在を伝える。

2ページ目には、前のページと次のページが存在しているので、それぞれを”prev”と”next”を用いて記述する必要があります。

1ページ目の存在を<link rel=“prev” href=”http://www.example.com/page1.html”>で、2ページ目の存在を<link rel=“next” href=”http://www.example.com/page3.html”>と記述することで、それぞれのページの存在を検索エンジンに伝えることができます。

lbel0wyzr19fihx1528727644_1528727647

③3ページ目のhead要素内に、2ページ目の存在を伝える。

3ページ目は最後のページなので、”prev”を使って前のページの存在を伝えれば良いです。

<link rel=“prev” href=”http://www.example.com/page2.html”>と記述することで、2ページ目の存在を検索エンジンに伝えることができます。

le9gi_ywjc_hlxw1528727932_1528727935

実装上のポイント

ページネーションを実装する上でいくつか注意点があるのでご紹介します。

①必ずhead内に記述する。

<link rel=”next”> と <link rel=”prev”>は必ずhead内に記述するようにしましょう。body内には記述しないでください。

②相対URLではなく完全URLで記述する。

ページネーションの設定は、相対URLでも完全URLでもどちらでも可能です。ただ、サブドメインがあるサイトなどの場合、誤って本来クロールして欲しいページがクロールされず、ページ同士の関連性をしっかりと認識してもらえなくなる可能性があります。特に理由がなければ、完全URLで設定しておくことをおすすめします。

③URLのパラメータはきちんとそろえる。

ページネーションがしっかりと設定できてないケースの中に、パラメータがきちんとそろっていないものがあります。 下記のようなURLの場合、2ページ目は連続したページとみなされません。

・1ページ目:http://www.example.com/page1.html
・2ページ目:http://www.example.com/page2&referrer&twitter
・3ページ目:http://www.example.com/page3.html

このようなページに対しては、”prev”、”next”の双方に同様のパラメータを付ける必要があります。 具体的に2ページ目には、以下のように設定します。

zjqppeteqb97eah1528727948_1528727951

それぞれ、前のページを<link rel=“prev” href=“http://www.example.com/page1&referrer=twitter” />、次のページを<link rel=“next” href=“http://www.example.com/page3&referrer=twitter” />と設定しています。

④”prev”、”next”の記述は1ページに1つにする。

1つのページに、複数の<link rel=”next”> と <link rel=”prev”>を記述してはいけません。

⑤canonicalタグと併用が可能です。

ページネーションはcanonicalタグと併用することができます。

例えば、複数に分割したページをページ個々でindexしてほしい場合、<link rel=”next”> と <link rel=”prev”>に加え、自ページURLに向けたcanonicalタグを設置します。

2ページ目(http://www.example.com/page2.html)は次のように設定します。これがGoogleが推奨する最もオーソドックスなやり方になります。

wq1uvlb5k8lexeu1528727966_1528727973

ページネーションの設定に加えて、<link rel=”canonical” href=”http://www.example.com/page2.html”/>でcanonicalタグを自ページに向けることで、検索エンジンに2ページ目をindexしてほしいと伝えることができます。

まとめ

ページネーションには、ユーザーと検索エンジンの双方にとって重要な役割があります。どのサイトでもページネーションは存在していると思いますので、正しい実装方法を確認の上、実装いただければと思います。

Webサイトの運用でお困りではありませんか?

私たちが得意とするコンテンツマーケティングやSEOに限らず、Webの運営・改善に関する総合的な知見を持つ私たちなら、きっと御社の悩みを解決できると考えています。

サイト内検索

SEO・サイト運用・コンテンツマーケティングでお困りの際には ぜひお気軽にご相談ください

初級者から上級者まで幅広くコンテンツマーケティングの知識を学べるセミナーもございます

実務に役立つeBookが
無料でダウンロードできます

SEOやコンテンツマーケティングに
ご関心のある方はぜひご利用ください。

×