お急ぎの方はお電話ください

ページネーションとは？ページ送りの重要性と適切なHTMLの記述方法

更新日：2023年08月14日

Google

＼プロのノウハウを詰め込みました！資料ダウンロードはこちらから／

ページネーションとは

ページネーションとは、1ページに掲載するコンテンツが多くなってしまった場合に、それを複数ページに分割するナビゲーションのことを指します。

ページネーションは<link rel="next"> と <link rel="prev">を使ってマークアップすることで実装できます。

(2019年11月15日追記)
2019年3月に、Googleの検索エンジンはprev／nextのサポートを終了していたことを明かしました。つまり、現在はprev/nextの記述を行わなくても検索エンジンは複数に分割したページの関連性を正しく理解することができます。つきましては、下記prev/nextの記述につきましては、rel属性の1つとして読んでいただければと思います。

ページネーションは、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ページあたりのコンテンツ量を減らすことできるので、ページ表示スピードを速くすることができます。このように、ユーザーにストレスなくページを閲覧してもらうためにも、ページは適切な長さで分割されていることが理想です。

しかし、マークアップを適切に実装しないと、分割したページが検索エンジンから「一連のつながったページ」として認識されないため、適切な評価を受けることができない可能性があります。ページが正当な評価を受けるためには、分割したページを<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”を使って前のページの存在を伝えれば良いです。

le9gi_ywjc_hlxw1528727932_1528727935

＼プロのノウハウを詰め込みました！資料ダウンロードはこちらから／

実装上のポイント

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

①必ずhead内に記述する。

②相対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” />と設定しています。