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

更新日:
ページネーションとは?ページ送りの重要性と適切なHTMLの記述方法

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

ページネーションとは

ページネーションとは、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”を使って前のページの存在を伝えれば良いです。

<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してほしいと伝えることができます。

SEOについて詳しく知りたい方はこの記事も読んでみてください。

まとめ

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

SEO対策の全体像を知りたい方は以下の記事も読んでみてください!検索エンジンの仕組み、リスティング広告との違い、技術要件、コンテンツ制作について1つ1つ解説しています。

\ご不明な点は、ナイルにいつでもご相談ください!/

ナイル編集部
監修:ナイル編集部

この記事は、ナイル株式会社のマーケティング相談室編集部が監修しており、わかりやすく役に立つ記事を目指しています。編集長青木がライティング、編集、入稿の全工程をチェックしています。記事内に気になる点がございましたら、こちらよりご連絡くださいませ。

関連記事

隠しテキスト・隠しリンクとは?検索エンジンスパムとみなされる手法について

隠しテキスト・隠しリンクとは?検索エンジンスパムとみなされる手法について

Googleハネムーンとは

リンク否認ツールの使い方・注意点・使用事例などまとめ

リンク否認ツールの使い方・注意点・使用事例などまとめ

新着記事

ChatGPTの賢い使い方を伝授

あきらめる前に試したい!ChatGPTの「地に足つけた使い方」

マーケティング課題調査

マーケティングにおける課題調査|2023年8月実施

日本語のGoogle検索でもSGE機能が展開されました!【動画で解説】

サイト内検索

もっと効果的な集客施策
してみませんか?

Web戦略の情報を
定期的に受け取りたい方

取材・メディア掲載に関するお問い合わせは、こちらからお問い合わせください。