SEOコンサルティングサービスのご案内
専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。
無料ダウンロードする ＞＞
Webサイトで大量のコンテンツを扱う際、すべての情報を1ページに詰め込むと、ページの読み込みが遅くなり、ユーザビリティが低下します。そこで活用されるのが「ページネーション」です。本記事では、SEO担当者が知っておくべきページネーションの基礎知識から実装方法、SEO効果を最大化するためのポイントまで詳しく解説します。
目次
ページネーションとは、大量のコンテンツを複数のページに分割して表示する手法のことです。「1, 2, 3…」といったページ番号や「次へ」「前へ」といったナビゲーションリンクを使って、ユーザーが各ページを移動できるようにします。
ECサイトの商品一覧ページ、ブログの記事一覧ページ、検索結果ページなど、多くのコンテンツを持つページで広く採用されています。英語では「pagination」と表記され、日本語では「ページ送り」や「ページ分割」とも呼ばれます。
ページネーションの主な目的は、ユーザーエクスペリエンスの向上とページパフォーマンスの最適化です。1ページあたりのコンテンツ量を適切に制限することで、ページの読み込み速度を改善し、ユーザーが求める情報にアクセスしやすくします。
一般的に、ページネーションは以下の要素で構成されています。
これらの要素を適切に組み合わせることで、ユーザーが直感的にコンテンツをナビゲートできる環境を提供します。
ページネーションを適切に実装することで、さまざまなSEO上のメリットが得られます。
検索エンジンのクローラーは、リンクを辿ってWebページを発見します。ページネーションによって各ページが適切にリンクされていると、クローラーがすべてのコンテンツを効率的に発見し、インデックスできるようになります。特に深い階層にあるコンテンツや新しく追加されたコンテンツへのアクセス性が向上します。
1ページに表示するコンテンツ量を制限することで、ページサイズが小さくなり、読み込み速度が向上します。Googleはページ速度を重要なランキング要因としているため、これはSEOに直接的なプラスの影響を与えます。特にモバイルデバイスでの閲覧において、ページ速度の重要性は高まっています。
適切なページネーションは、ユーザーが目的のコンテンツを見つけやすくし、サイト内の回遊を促進します。滞在時間の増加や直帰率の低下といったユーザー行動の改善は、間接的にSEOにプラスの影響を及ぼします。
すべてのコンテンツを1ページに詰め込むと、検索エンジンがページの主要なテーマを判断しにくくなる可能性があります。ページネーションによってコンテンツを分割することで、各ページが適切な量のコンテンツを持ち、検索エンジンがページの内容を正確に理解しやすくなります。
大規模サイトでは、検索エンジンがクロールできるページ数に制限があります。ページネーションによって重要なコンテンツへのアクセスパスが明確になることで、クロールバジェットをより効率的に使用できます。
当社の案件でも、DB系のサイトのように特にテクニカルな施策が重視される（クローリング・インデキシングが重要であり、クロールバジェットの最適化がメインとなる）場合、ページネーションの仕様について改修を提案する場合があります。
1ページ目をメインとするか、各ページをインデックスさせるべきかは、そこで取り扱っているコンテンツ（情報）の重要度によって異なります。
サイトや事業において、重要or補足的なコンテンツなのか、基本的に類似するコンテンツor独自性の高いコンテンツなのかなど、判断基準は都度異なります。
たとえば、上記の仕様書をお出しした案件では、QA詳細ページはログイン必須のものが多く、詳細ページを多くインデックスさせるよりはカテゴリトップを強くした方がよさそうでした。
Q&Aは今後も増えていく事が予想されるため、クロールバジェットを制御したほうが良いという考えから、2ページ目以降を全て1ページ目にCANONICALが良いと提案しています。
これまでの我々の案件における経験を基に、ページネーションの一覧にcanonicalなどをどのように判断し、設置するか？について、フローチャートにまとめました。お悩みの際に、参考になれば幸いです。
ページネーションを正しく実装することは、SEO効果を最大化するために不可欠です。ここでは、最も一般的な実装方法を紹介します。
静的サイトやカスタムCMSでは、HTMLとCSSを使って直接ページネーションを実装します。
ページネーションのHTMLは、navタグでラップしたリスト構造を使用するのが一般的です。navタグには「aria-label=”ページネーション”」属性を付けてアクセシビリティを確保します。リストの各項目には、「前へ」「次へ」ボタン、ページ番号リンク、現在のページ表示、省略記号などを含めます。
現在のページは、spanタグで囲み「aria-current=”page”」属性を付けることで、スクリーンリーダーにも現在位置が伝わるようにします。「前へ」「次へ」ボタンには、rel=”prev”とrel=”next”属性を追加しておきます。
また、視覚的なアイコン（矢印など）を使用する場合は、「aria-hidden=”true”」を設定し、スクリーンリーダー用には別途テキストを「sr-only」クラスで非表示にして提供します。
ページネーションのリストは、flexboxを使って横並びに配置します。各リンクには、最小幅と高さを設定し（モバイルでは44×44ピクセル以上推奨）、クリックしやすい領域を確保します。ボーダー、パディング、適度な余白を設定して視認性を高めます。
現在のページは、背景色を変更し、ポインターイベントを無効化してクリックできないようにします。ホバー時には背景色やボーダー色を変化させ、インタラクティブな要素であることを示します。
レスポンシブ対応として、メディアクエリを使用してモバイル表示時にはリンクのサイズを小さくしたり、一部のページ番号を非表示にしたりする調整を行います。
各ページのhead内には、自己参照のcanonicalタグを設定します。また、前後のページへのリンクとしてrel=”prev”とrel=”next”を含むlinkタグも追加します。タイトルタグとメタディスクリプションには、ページ番号と表示範囲を含めて、各ページが固有のメタデータを持つようにします。
動的なページネーションやSPA（Single Page Application）では、JavaScriptやjQueryを使用して実装します。
JavaScriptでページネーションを実装する場合、まずページネーションクラスまたは関数を作成します。このクラスには、現在のページ番号、総ページ数、コンテナ要素、ページ変更時のコールバック関数などを設定します。
HTMLの生成では、現在のページ、前後数ページ、最初と最後のページを表示し、中間は省略記号で繋ぎます。現在のページから一定範囲（例：前後2ページ）を計算して表示するページ番号を決定します。
イベント処理では、ページネーションリンクのクリックイベントを監視し、クリックされたページ番号を取得してページを切り替えます。この際、History APIを使用してURLを更新し、ブラウザの戻る・進むボタンにも対応させます。
コンテンツの読み込みは、Fetch APIを使用してサーバーからデータを取得し、ページに表示します。読み込み完了後は、ページトップへスムーズにスクロールする処理も追加すると良いでしょう。
jQueryを使用する場合、プラグインパターンで実装すると再利用しやすくなります。基本的な考え方はVanilla JSと同じですが、jQueryのメソッドを使用することでDOM操作がシンプルになります。
ページネーション要素の生成には、jQueryの要素作成メソッドを使用します。現在のページ番号を中心に、表示するページ範囲を計算し、リンクを動的に生成します。
イベント委譲を使用して、ページネーションリンクのクリックを処理します。クリックされたリンクからページ番号を取得し、History APIでURLを更新し、Ajaxでコンテンツを読み込みます。読み込み完了後は、animateメソッドを使ってページトップへスクロールします。
JavaScriptで実装する際は、必ずURLが変更されることを確認してください。History APIを使用して、各ページに固有のURLを割り当てます。また、そのURLに直接アクセスした際にも、同じコンテンツが表示されるようサーバーサイドで適切に処理する必要があります。
検索エンジンのクローラビリティを確保するため、サーバーサイドレンダリング（SSR）やプリレンダリングの使用を検討してください。初期HTMLに少なくとも最初のページのコンテンツとページネーションリンクが含まれていることが重要です。
エラーハンドリングも忘れずに実装し、APIからのデータ取得に失敗した場合の処理を用意します。また、ローディングインジケーターを表示して、ユーザーにデータ読み込み中であることを伝えることも重要です。
どの実装方法を選択する場合でも、以下の注意点を守ることが重要です。
サイト全体で統一されたURL構造を使用してください。クエリパラメータ方式（例：「?page=2」）とパス方式（例：「/page/2」）のどちらを選んでも構いませんが、セクションごとに異なる方式を混在させないようにします。
JavaScriptで動的にコンテンツを読み込む場合、URLが変更されること（History APIを使用）、そのURLに直接アクセスしても同じコンテンツが表示されること、サーバーサイドレンダリング（SSR）またはプリレンダリングの使用、検索エンジンがコンテンツをクロールできることの4点に注意してください。
Googleは2019年以降これらを使用していませんが、他の検索エンジンやアクセシビリティのために設定しておくことが推奨されます。headタグ内に前後のページへのlinkタグを追加します。
ページネーションページがrobots.txtでブロックされていないことを確認してください。すべてのページがクロール可能である必要があります。
ページ1のURLはパラメータなしが望ましいです。「?page=1」でアクセスされた場合は、301リダイレクトでパラメータなしのURLに転送することを検討してください。
タイトルタグとメタディスクリプションには、ページ番号を含めて重複を避けます。例えば、「商品一覧 – ページ2 | サイト名」や「商品一覧の2ページ目。全500件から21-40件目を表示中。」といった形式で設定します。
当社の案件でも以下のように仕様（これはディスクリプションの指示例です）を細かく提示しています。
存在しないページ番号へのアクセスに対して、適切に404エラーを返すか、最後のページにリダイレクトする処理を実装してください。
特にJavaScriptでの実装では、画像の遅延読み込み（Lazy Loading）、キャッシュの活用、不要なリクエストの削減、ページ遷移時のローディングインジケーター表示などのパフォーマンス対策を行ってください。
すべての実装方法で、適切なARIA属性とセマンティックHTMLを使用し、キーボード操作やスクリーンリーダーでの利用を考慮してください。
SEO効果を最大化し、ユーザビリティを向上させるためには、以下のポイントに注意してページネーションを実装する必要があります。
1ページに表示するアイテム数は、ユーザビリティとSEOの両面から重要です。少なすぎるとページ遷移の回数が増えてユーザーの負担になり、多すぎるとページの読み込みが遅くなります。
一般的な目安として、以下の範囲が推奨されます。
業種やコンテンツの性質、ターゲットユーザーに応じて最適な数を設定し、実際のユーザー行動データをもとに調整していくことが重要です。競合サイトがどれぐらいの数をどのように出力しているか？を参考に決めていくと良いでしょう。
サイト全体で一貫したURL構造を使用してください。例えば、あるセクションではクエリパラメータ方式、別のセクションではパス方式というように混在させると、ユーザーにも検索エンジンにも混乱を招きます。
現在どのページにいるのか、全体で何ページあるのかを明確に示すことで、ユーザーが自分の位置を把握しやすくなります。
例：
<p>ページ 2 / 全25ページ（500件中 21-40件を表示）</p>
各ページネーションページには独自のコンテンツがあることを確認してください。ページごとに異なるタイトルタグやメタディスクリプションを設定し、ページ番号を含めることで重複を避けます。
例：
<title>商品一覧 – ページ2 | サイト名</title>
<meta name=”description” content=”商品一覧の2ページ目です。500件の商品から21-40件目を表示しています。”>
ページ1は通常、最も重要で権威のあるページです。他のページネーションページから常にページ1に戻れるようにしてください。また、ページ1のURLは可能な限りシンプルにします。
例：
推奨：https://example.com/products
非推奨：https://example.com/products?page=1
ただし、ページ1に「?page=1」でアクセスした場合は、301リダイレクトでパラメータなしのURLに転送することをお勧めします。
カテゴリフィルタや価格フィルタなどと併用する場合、URL構造を慎重に設計してください。
例：
https://example.com/products?category=electronics&price=low&page=2
一般的に、ページネーションページにnoindexを設定することは推奨されません。これを行うと、それらのページに含まれるコンテンツが検索結果に表示されなくなり、トラフィックを失う可能性があります。
ただし、非常に深い階層のページ（例：50ページ目以降）や、クロールバジェットの問題がある大規模サイトでは、戦略的にnoindexを使用することも検討できます。
noindexは、SEOのプロジェクトを数々進行した中でも、かなり強力なシグナルを送るマークアップです。ですので、もしnoindexを展開する場合でも、一気に展開せず、テスト的にひとつのカテゴリで試してみてから、クローリング・インデックスデータを観測し、検証したうえで全体展開することをお勧めします。
モバイルデバイスでも使いやすいページネーションを実装してください。タップしやすいボタンサイズ、適切な余白、レスポンシブデザインが重要です。
ページネーションを実装する主な理由の一つがパフォーマンスの向上です。各ページが素早く読み込まれるように、画像の最適化、遅延読み込み、キャッシュの活用などを行ってください。
SEOだけでなく、ユーザビリティの観点からもページネーションのデザインは重要です。優れたユーザーエクスペリエンスは、エンゲージメントの向上を通じてSEOにもプラスの影響を与えます。
背景色を変える、太字にする、下線を引くなどの方法で、ユーザーが自分の現在位置を一目で把握できるようにします。現在のページはクリックできないようポインターイベントを無効化しておくことも重要です。また、特にモバイルデバイスでは、タップ可能な領域を十分に確保してください。Appleのヒューマンインターフェースガイドラインでは最低44×44ピクセル、Googleのマテリアルデザインでは48×48ピクセルが推奨されています。
ページ数が多い場合、すべてのページ番号を表示するとナビゲーションが煩雑になります。省略記号（…）を使って表示を簡潔にします。一般的な表示例としては、「< 1 2 3 … 10 11 12 … 48 49 50 >」のような形式があります。現在のページの前後2〜3ページ、最初と最後の数ページを表示し、その間を省略記号で繋ぐデザインが効果的です。
またページ番号リンクに加えて、「前へ」「次へ」ボタンを配置することで、連続してページをめくるユーザーの利便性が向上します。これらのボタンは、ページネーションの両端に配置するのが一般的です。
スクリーンリーダーを使用するユーザーのために、適切なARIA属性を使用してください。navタグにはaria-label属性でページネーションであることを明示し、現在のページにはaria-current=”page”を設定します。また、「前へ」「次へ」ボタンには、視覚的なアイコンとは別にテキストラベルを提供します。視覚的には隠してもスクリーンリーダーでは読み上げられるよう、適切なCSSクラスを使用します。
ページ数が非常に多い場合、特定のページに直接ジャンプできる入力フィールドを提供すると便利です。「ページ番号:」というラベルとともに数値入力フィールドと移動ボタンを配置します。
ページが切り替わる際、特にJavaScriptで動的に読み込む場合は、ローディングインジケーターを表示してユーザーに処理中であることを知らせます。
「全500件中 21-40件を表示」といった情報を表示することで、ユーザーが全体のコンテンツ量と現在位置を把握しやすくなります。
画面サイズに応じてページネーションの表示を調整します。モバイルでは表示するページ番号を減らし、重要な要素だけを残すことで、使いやすさを維持します。メディアクエリを使用して、モバイル表示時には一部のページ番号リンクを非表示にするなどの工夫を行います。
ページネーションと並んで、大量のコンテンツを表示する手法として「無限スクロール」があります。それぞれにメリットとデメリットがあり、使用するシーンによって適切な方法を選択する必要があります。
無限スクロールは、ユーザーがページの下部に到達すると自動的に次のコンテンツが読み込まれる仕組みです。ページ遷移がなく、シームレスにコンテンツを閲覧できるため、SNSのフィードなどでよく使われています。
ページネーション・無限スクロールがそれぞれどのようなケースで適しているか、下記の図にまとめます。
こちらをご覧いただくとわかるように、基本的に無限スクロールが必要なケースは限られると言えます。
もし使い分けに悩んだ際は、この使い分けの基準を参考に、自社のサイトで無限スクロールが本当に必要かを検討してみてください。
両方のメリットを活かすハイブリッドアプローチも検討できます。
「もっと見る」ボタン
無限スクロールの代わりに、ページ下部に「もっと見る」ボタンを配置する方法です。ユーザーがボタンをクリックすると次のコンテンツが読み込まれます。これにより、フッターへのアクセスを確保しつつ、シームレスなコンテンツ閲覧を実現できます。
初期は無限スクロール、深い階層でページネーション
最初の数ページは無限スクロールで表示し、一定量を超えたらページネーションに切り替える方法です。
デバイスに応じた切り替え
モバイルでは無限スクロール、デスクトップではページネーションというように、デバイスに応じて最適な方法を選択することもできます。
最後に、ページネーションと無限スクロールをSEOとパフォーマンスの観点から比較してみます。
SEO・パフォーマンスどちらの観点でみても、ページネーションと比較すると無限スクロールの方が難易度が高くなります。
使い分けでもご説明した通り、基本的にはページネーションを使うケースが多いですが、もし無限スクロールの実装が必要な場合は、経験のある専門家に依頼するのが安心です。
ページネーションは、大量のコンテンツを効率的に表示し、ユーザビリティとSEOの両面で機能します。
1ページあたりのアイテム数は20〜50件程度を目安としつつ、競合サイトなどのデータ分析に基づいて最適化してください。クローラビリティの確保、ページ速度の最適化、各ページへの固有のメタデータ設定が、SEOの効果を最大化する鍵です。ユーザビリティでは、明確な視覚的フィードバック、十分なクリック領域、アクセシビリティへの配慮が不可欠です。
一般的に、ページネーションページにnoindexを設定することは推奨されません。noindexを設定すると、そのページが検索結果に表示されなくなり、ページに含まれる個々のコンテンツ（商品や記事など）も検索結果に表示されにくくなります。その結果、貴重な検索トラフィックを失う可能性があります。
ただし、以下のような特殊なケースでは、深い階層のページ（例：50ページ目以降）にnoindexを適用することを検討できます。
それでも、まずはサイト構造の最適化やクロールバジェットの効率化など、他の方法を検討することをお勧めします。
2019年3月、Googleはrel=”next”とrel=”prev”属性をランキングシグナルとして使用しなくなったと発表しました。つまり、これらの属性がなくてもGoogleは自動的にページネーションの関係性を理解できるようになっています。
ただし、以下の理由から実装しておくことには依然として価値があります。
実装の手間が大きくなければ、rel=”next”とrel=”prev”を含めておくことをお勧めしますが、これがないからといってSEOに大きな悪影響はありません。
正しいアプローチはサイトごとに異なります。
すべてのページネーションページを1ページ目にcanonicalを向けると、2ページ目以降がインデックスされなくなり、それらのページに含まれるコンテンツが検索結果に表示されなくなります。2ページ以降もサイトにとって重要なコンテンツの場合、避けるべきでしょう。
基本的には各ページネーションページに自己参照のcanonicalタグを設定となりますが、場合によってはcanonicalで1ページ目に評価を集めた方が良い案件が存在することも事実です。詳しくは「3．アイオイクスでのページネーションに関する施策事例」部分をご確認ください。
JavaScriptで動的にコンテンツを読み込むページネーション（例：Reactなどのフレームワークを使用）も、適切に実装すればSEOに問題はありません。重要なのは以下の点です。
Googleは最近のJavaScriptを理解できますが、完璧ではありません。可能な限り、重要なコンテンツとリンクは初期HTMLに含めることをお勧めします。
カテゴリフィルタ、価格フィルタ、並び替えなどの機能とページネーションを組み合わせる場合、URL構造の設計が重要です。
推奨されるアプローチとして、クエリパラメータを使用して「https://example.com/products?category=electronics&sort=price&page=2」のような形式でURLを構成します。
注意点として、フィルタを適用した状態の各ページも独立したページとして扱い、自己参照のcanonicalタグを設定してください。ただし、フィルタの組み合わせが膨大になる場合、一部のフィルタページにはnoindexを適用することを検討しても良いでしょう。
また、ユーザーがフィルタを変更した際にページ番号を1にリセットすることで、存在しないページへのアクセスを防ぎます。
2002年設立から、20年以上に渡りSEOサービスを展開。支援会社は延べ2,000社を超える。SEO/CRO（コンバージョン最適化）を強みとするWebコンサルティング会社。日本初のSEO情報サイトであるSEO Japanを通じて、日本におけるSEOの普及に大きく貢献。
SEO最新情報やセミナー開催のお知らせなど、お役立ち情報を無料でお届けします。
