ECサイトなどで商品一覧ページに掲載する商品点数が多くなる場合、複数のページに分割して表示させている、という事は多くあるのでは無いでしょうか？

そういった場合、分割されたページ同士の関係性を、Googleに対して教える方法があります。
※上手くいかない事もありますが、Google側でも自動で判別してくれます。

それが、rel=“next”要素とrel=“prev”要素です。
今回はそれらの使用方法と、注意点について述べたいと思います。

rel=“next”とrel=“prev”の使用方法

同一のコンテンツを複数のページに分けて表示している場合、それぞれのページのHeadに対して、ソースを記述するだけです。
実際の記述方法を例を使って記載します。

例）

  • http://www.example.com/goods1.html
  • http://www.example.com/goods2.html
  • http://www.example.com/goods3.html
  • http://www.example.com/goods4.html
  • http://www.example.com/goods5.html

という、同一カテゴリのコンテンツを分割したページ郡があったとします。
同一カテゴリのコンテンツというのは、

  • リスト表示されているECサイトの商品一覧
  • ブログの記事一覧
  • 記事が長いので分割したニュース記事ページ

などを想像して下さい。

これらのページのHeadに、それぞれタグを記述します。

1ページ目のhead
<link rel=”next” href=”http://www.example.com/goods2.html”>

2ページ目のhead
<link rel=”prev” href=”http://www.example.com/goods1.html”>
<link rel=”next” href=”http://www.example.com/goods3.html”>

3ページ目のhead
<link rel=”prev” href=”http://www.example.com/goods2.html”>
<link rel=”next” href=”http://www.example.com/goods4.html”>

4ページ目のhead
<link rel=”prev” href=”http://www.example.com/goods3.html”>
<link rel=”next” href=”http://www.example.com/goods5.html”>

5ページ目のhead
<link rel=”prev” href=”http://www.example.com/goods4.html”>

ルールとしては、
rel=”prev”には前のページのURLを記載
rel=”next”には次のページのURLを記載
します。

最初のページは、前のページがありませんので、rel=”prev”は記載しません。
最後のページは、次のページがありませんので、rel=”next”は記載しません。

記述するURLは絶対パスでも相対パスでも問題ありません。

設定としては、これだけです。
ページが多いと大変ですが、割と手軽に利用出来ますよね。

しかも、結構メリットが多いのです。

rel=“next”要素とrel=“prev”要素のメリットと注意点

冒頭にも書きましたが、このタグは必須ではありません。
使用しなくても、Googleはページネーションを理解してくれたりします。
ただ、上手く理解してくれない場合もありますw

まずは、使用した際のメリットから説明します。

rel=”canonical”の同時使用が可能

先ほどの例を使用すると、

http://www.example.com/goods1.html
と内容がほぼ同一の
http://www.example.com/goods1a.html
があったとします。

その場合、正規化したいURLを
rel=”canonical”
で指定し、更に
rel=”next”
を使用する事が出来ます。

http://www.example.com/goods1.html
に正規化する場合は、

<link rel=”canonical” href=”http://www.example.com/goods1.html”>
<link rel=”next” href=”http://www.example.com/goods2.html”>

と記述します。

リンク評価を一まとめにしてくれるが、検索結果には個別ページが表示される

  • http://www.example.com/goods1.html
  • http://www.example.com/goods2.html
  • http://www.example.com/goods3.html

に対して、それぞれ、リンクが付いていたとします。
その場合、リンク評価を別々のページに分散させずに、1つのグループにまとめてくれます。

しかも、rel=”canonical”とは違い、検索結果には、それぞれのページが出てきます。
使用してみて、これが一番凄いな、と思いました。
rel=”canonical”だと正規化されたURLしか出てきません。

では、次に注意点です。

rel=“next”とrel=“prev”を使用する場合でもtitleタグはユニーク化する

rel=“next”とrel=“prev”はrel=”canonical”とは違い、重複を回避するタグではありません。
なので、複数のページそれぞれに、異なるtitleタグを付ける必要があります。

これは、ちょっと大変かも知れませんが、最適な検索結果を返す為の重要なヒントにされている可能性が高いので、対応しておきましょう。

ページネーションをまとめたページがある場合、そちらを正規化する事が推奨されている

例えば、ページネーションを1ページにまとめた
http://www.example.com/goods-all.html
が存在する場合は、
rel=“next”とrel=“prev”
では無く、

  • http://www.example.com/goods1.html
  • http://www.example.com/goods2.html
  • http://www.example.com/goods3.html
  • http://www.example.com/goods4.html
  • http://www.example.com/goods5.html

のページに、
<link rel=”canonical” href=”http://www.example.com/goods-all.html”>
を記述し正規化する事が推奨されています。

でも、
http://www.example.com/goods-all.html
のボリュームが多く、ページを開くために時間がかかる、長くて見るのが大変、というのであれば、お勧めしません。
ページネーションの方が良いと思います。
この辺りは、その場その場で判断して下さい。

開くことでブラウザが落ちるレベルであれば、そもそも、内容をまとめたページは不要だと思います。
ユーザーにとっても迷惑です。

今回の記事のまとめ

rel=“next”とrel=“prev”は登場してから1年ほど経っていますが、比較的マニアックな部類の様な気がします。
ただ、立て続けに、この仕様を実装するサイトに携わりまして、調べた内容をまとめたりしてみました。

海外SEOブログさん、Googleウェブマスター向け公式ブログ、ウェブマスターツールヘルプの内容を参考にさせて頂きました。
以下の記事に、詳しく内容が記載されています。

参考

※本ブログに記載されている情報は、私の見解に基づく場合が多々ございます。
 掲載記事を参考にした事による損害については、その責任を負いかねます。
 自己責任で、掲載情報を参考にして頂ければと思います。