※本記事は、2015年7月29日に公開された記事をマケスト提供により一部再編集を行っております。

本記事で学ぶ内容

・ページネーションの正しい設定方法

一覧ページなどでよく見るページネーションですが、一見1ページ目と2ページ目でデザインがほぼ同じだからといって、2ページ目を1ページ目に向けたcanonicalなどを用いてしまいがちです。
しかし、それは誤った設定です。ページネーションを正しく設定しないと思わぬ落とし穴にハマってしまうこともあります。

本記事では、ページネーションの正しい設定方法を解説します。

1. ページネーションとは

ページネーションとは、大量の情報をページを分割して見せているときに、それぞれのページヘ遷移しやすくするために設置するナビゲーションのことを指します。
ページネーション

ページネーションを用いることで、ユーザーにとっては現在いるページが分かることだけでなく、この先どれだけコンテンツがあるかも分かり、それぞれのページヘ遷移もしやすくなります。
検索エンジンも、ページネーションがあることでクローリングしやすくなります。

2. ページネーションの設定方法

ページネーションの設定には、それ専用の属性タグが用意されています。
それがです。

これを正しく設定することで、前述したようなユーザー検索エンジン双方にメリットがあるだけでなく、一連のページの順序を正しく検索エンジンに伝えることができ、検索結果にも1ページ目から表示されるようになります。

では、早速具体的な設定方法を紹介します。

下記のようなページが存在しているとイメージしてください。

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

2.1. 1ページ目のhead要素の中に2ページ目の存在を記述する

1ページ目は前のページがなく、後ろのページだけ存在しているため、nextを用いて2ページ目の存在を伝えます。

<head>
<link rel="next" href="http://www.example.com/page2.html">
</head>

next" href="http://www.example.com/page2.html">で後ろのページ(2ページ目)の存在を伝えています。

2.2. 2ページ目のhead要素の中に、1ページ目と3ページ目の存在を記述する

2ページ目は、前後にページが存在しているのでprevとnextを使います。

<head>
<link rel="prev" href="http://www.example.com/page1.html">
<link rel="next" href="http://www.example.com/page3.html">
</head>

prev" href="http://www.example.com/page1.html">で前のページ(1ページ目)の存在を伝えています。
next" href="http://www.example.com/page3.html">で後のページ(3ページ目)の存在を伝えています。

2.3. 3ページ目のhead要素の中に、2ページ目の存在を記述する

3ページ目は最後のページなので、後ろのページの存在は伝える必要がありません。よって、prevだけを使って前のページの存在を伝えます。

<head>
<link rel="prev" href="http://www.example.com/page2.html">
</head>

prev" href="http://www.example.com/page2.html">で前のページ(2ページ目)の存在を伝えています。

3. 注意点

3.1. 必ず処理されるわけではない

rel=prev/nextはコンテンツを理解するためのヒントとして使われているため、必ず処理されるわけではないことに注意しましょう。

3.2. パラメータ付きのURLの場合は、next/prevにも付与して記述しなければいけない

パラメータが含まれている場合は、prev/nextにも同じパラメータを付与する必要があります。

http://www.example.com/page2&sessionid=123
というページには、次のようなパラメータを含めるようにします

<link rel="prev" href="http://www.example.com/page1&sessionid=123" />
<link rel="next" href="http://www.example.com/page3&sessionid=123" />

3.3. canonicalと一緒に使うことができます

たとえば、http://www.example.com/page2&sessionid=123 というページには、次のように設定します。

<link rel="canonical" href="http://www.example.com/page2"/>
<link rel="prev" href="http://www.example.com/page1&sessionid=123" />
<link rel="next" href="http://www.example.com/page3&sessionid=123" />

3.4. 実装を間違っても、処理は行われます(Googleの場合)

実装方法を間違えたとしても、ページインデックスされGoogleの経験則に則って処理されます。
ただし、正しく処理されるかどうかはGoogle次第なので正しく設定しておきましょう。

まとめ

多くの情報を発信した場合、それらを正しくGoogleに認識してもらうのはSEOの基本です。
設定していなくてもある程度はGoogleが処理してくれますが、少し対応するだけで正しく処理されるヒントになるのであれば正しく設定しておきましょう。

数行追加するだけの簡単な作業なので、正しく理解して自サイトで使ってみてください。

SEO対策の効果を上げるサービス・ツールを今すぐ活用![マケスト提供]

ここがポイント

1.rel=prev/nextは構成URL間の関係を示す
2.rel=prev/nextは強力なヒントとなり、1ページ目を検索結果に表示する