コンテンツを分割してユーザーに提示する「ページネーション(パジネ―ション)」は回遊率を高める目的で利用されることも多いですが、SEO的にも効果が期待できることをご存知ですか？このページではページネーションの概要やタグの廃止について。加えて近年のベタープラクティスとSEO施策としての事例をご紹介します。
ページネーションとは？
ページネーションとは、直訳で「ページ割り」を意味し、一般的にWebコンテンツを複数ページに分割すること、もしくはそのデザインを指します。デザインを指す場合はページごとに番号を振り、ユーザーをナビゲーションするものが一般的です。
ページネーションを設定する意味
「ページネーション」を設定する意味は、ユーザビリティとSEOの2点から考えることができます。ユーザーへのメリットだけでなく、Googleにコンテンツを認識してもらうためにもページネーションは効果的です。
回遊率を高めようとする意味
ページを分割するということは何ページにもわたって読者はコンテンツを回遊することになります。こうした回遊率を高めるためにページネーションは用いられる場合もあります。しかし回遊率だけを意識したページネーションはユーザーの体験を損ねることも考えられます。基本的に記事コンテンツであれば4000文字前後以上になる場合にページネーションを活用するのをおすすめします。「あまりにも分割ページが多すぎないか？」を一度検討してみましょう。
備考：コラムのページネーションに対するGoogleの見解
ユーザーは、情報の一部だけが表示されているページを適宜めくっていく （「次へ」をクリックして次のページを閲覧する）コンテンツよりも、1 ページに情報のすべてが表示されたコンテンツの方を好むということが、我々が実施した調査の結果、判明しました。
引用：Google検索セントラル「検索結果に「すべて表示」ページを優先的に表示する方法」
この引用文からもわかる通り、Googleは記事コンテンツの場合は基本的にページネーションを推奨していません。何度もクリックさせてページを回遊させることは、ユーザーにとって悪と考えているためです。
読み込み速度遅延を緩和する
余りにもページが長くなってしまうと、その分コンテンツも増えてページスピードにも支障をきたしてしまいます。これを改善するために、ページネーションを使用しコンテンツを分割する場合があります。
クローラビリティを高める
一覧ページなどを、ページネーションで区切り連番を振ることで、クローラーがコンテンツの全容を把握しやすくなります。固有のURLを割り当てることで、クローラーによってコンテンツが発見されインデックスを促進することも期待できます。
一方で無限スクロールや「もっと見る」などでのコンテンツ追加をしている場合はクローラーが回遊するのに適しておらず、上手くGoogleにサイトのコンテンツが認識されていない可能性があります。
ページネーションタグは2019年3月21日に廃止！
Spring cleaning!
As we evaluated our indexing signals, we decided to retire rel=prev/next.
Studies show that users love single-page content, aim for that when possible, but multi-part is also fine for Google Search. Know and do what's best for *your* users! #springiscoming pic.twitter.com/hCODPoKgKp— Google Search Central (@googlesearchc) March 21, 2019
ページネーションしたコンテンツ群を認識させるために、以前は「rel=”next”」と「rel=”prev”」というタグが使われていました。しかし2019年3月21日に廃止。Googleでのサポートは終了しています。(Bingでは現在もサポートされています)
※サポート終了ついては下記ページで告知されています
https://developers.google.com/search/blog/2011/09/pagination-with-relnext-and-relprev?hl=ja
タグ廃止後のページネーションのベストプラクティスについて
・自然なリンク名
・パーマリンクなどがないシンプルなURL
・コンテンツ群をそれぞれリンクでつなぐ
・先頭ページ以外(もしくは最初の数ページ以外)は「noindex」し「canonical」設定をする
ページネーション実装にあたってのベストプラクティスは今も明確なものは示されていませんが、上記を意識してページネーションを実装できると間違いがないでしょう。
ページネーションをデザインする際のポイント
現在の閲覧ページがわかるようにする
「ページネーション」を設置する際には、ユーザーが「今、どのページを閲覧しているのか？」が一目でわかるようなデザインにしましょう。
これは、ユーザーの利便性にもつながるUI（ユーザーインターフェイス）の改善ポイントでもあります。
たとえば、上記の画像では、4ページ目を表す「4」という数字が黒色で表現されていたり、「Google」の「o」の4番目の文字が赤く色付けられたりしています。このように、ちょっとした工夫で現在閲覧しているページが何ページ目であるかを示し、ユーザーの利便性が高まります。
前後のページへのリンクを設置する
画像にある「ページネーション」の「前へ」「次へ」のボタンをクリックすることで、現在閲覧しているページの前後のページへ遷移できる、ボタンを設置しましょう。クローラーが回遊の際に前後にページを認識できるため、コンテンツ群を正確に把握することができます。
またリンクを設置する際は、ユーザーが分かりやすい表示にすることを心がけます。
たとえば「前へ/次へ」、「PREV/NEXT」など言葉を用いて表現する場合もあれば、「＜/＞」のように記号を用いて表現することもあります。
クリック要素のサイズ調整をする
クリック要素のサイズを大きくしたり、適切な間隔で配置したりすることも、「ページネーション」をデザインする上で重要です。特にモバイル端末ではクリック領域が小さかったり、間隔が狭かったりするとユーザーのストレスにつながります。
レスポンシブデザインを意識し、より多くのユーザーにWebページを閲覧してもらうため、クリック要素はできるだけ使いやすいように設計しましょう。
ページネーションを実装し流入が改善した事例
ページネーションを行うことで、コンテンツが認識されやすくなり結果的にGoogleからの評価が上がった事例をご紹介します。
ある商品一覧ページの下部には「もっと見る」というボタンが設置されているだけで、押すたびに追加の商品情報が表示されるという仕様のページがありました。このままでは商品一覧ページ全体を把握しづらく、クローラーがサイト構造を理解しにくいと考えページネーションを実装しました。
ページネーション実装では、コンテンツを1ページ目、2ページ目…、と送りリンクで設計。
これによりサイト内にある商品情報をGoogleが把握しやすくなり、実装後は順位・セッション共に順調な伸びを見せており、実装前と比較するとその成長率は200％以上でした。
ページネーションを実装し、Webサイトの品質を高めましょう
このページでは、「ページネーション」に焦点を当て、その概要や重要性、作成ポイント、設置方法、デザイン例などについて解説しました。
「ページネーション」を適切に実装すれば、ユーザーの利便性だけでなく、SEO的な効果にも期待できます。
商品ページを初めとする一覧ページなどを見直すだけでも、Googleからの評価が変わる可能性もあります。ぜひ一度自社サイトのコンテンツを見直してみてはいかがでしょうか？
株式会社ipeではSEOでの大手クライアント実績多数！もしSEO対策を検討する場合にはぜひお気軽にご相談ください。