無限スクロールと「もっと見る」のSEO｜商品をクロール可能にする実装
目次
無限スクロールや「もっと見る」は、ページを切り替えずに商品を追加表示できる仕組みです。スマートフォンでも使いやすい一方、利用者のスクロールやボタン操作に頼った実装では、検索エンジンが後半の商品を見つけられない場合があります。
SEOでは、画面上の操作方法とは別に、追加される商品群へ固有URLとクロール可能なリンク経路を用意します。JavaScriptをやめる必要はありません。利用者には連続表示を提供しながら、検索エンジンとURL共有にはページ単位の構造を残します。
三つの表示方式の違い
ページネーションは、ページ番号や前後リンクで別URLへ移動します。「もっと見る」は、ボタンを押すと同じ画面へ商品を追加します。無限スクロールは、画面下部へ近づくと自動で商品を読み込みます。
どの方式にも長所と短所があります。ページネーションは現在位置が分かりやすく、無限スクロールは連続して閲覧できます。「もっと見る」は利用者が追加タイミングを選べます。商品数、比較行動、フッターへの到達、表示速度を踏まえて選びます。
検索エンジンは利用者の操作を前提にしない
Googleは一般に、href属性を持つa要素のURLをクロールします。ボタンを押す、最後までスクロールするなどの利用者操作を必ず実行して、全商品を読み込むわけではありません。
初期HTMLに最初の20商品しかなく、残り180商品が操作後にだけAPIから返る場合、後半の商品へのリンクが発見されない可能性があります。XMLサイトマップや商品フィードも役立ちますが、カテゴリからのリンク経路も整えます。
ページ単位のURLを用意する
追加商品のまとまりに「?page=2」「?page=3」などのURLを持たせます。各URLを直接開いたときに、そのページの商品が表示される必要があります。URLの#以降だけでページを区別しないようにします。
画面上は商品を連結して見せても、HTML上では次ページへのa要素リンクを用意できます。利用者に見せるUIと、検索エンジンがたどるページ構造を両立させます。
履歴と共有に対応する
無限スクロールで100商品目まで進んだ後、商品詳細から戻ると先頭へ戻ってしまうと使いにくくなります。スクロール位置と対応するURLをHistory APIで更新し、戻る操作で同じ位置を再現できるようにします。
URLを共有した相手が同じ商品範囲を開けることも確認します。ただし、JavaScriptでcanonicalを別の値へ頻繁に切り替えるのではなく、各ページURLの正規設定を安定させます。
読み込み失敗への備え
通信が遅い、JavaScriptが失敗する、APIがエラーになると、追加商品が表示されません。読み込み中、失敗、再試行の状態を明確にし、通常リンクで次ページへ進める代替手段を用意します。
画像の遅延読み込みでも、画面内へ入るまで画像URLを出さない実装は確認が必要です。商品名と商品リンクは取得でき、主要画像には適切なsrcや検索エンジンが認識できる実装を使います。
フッターと重要リンクを隠さない
無限に商品が追加されると、利用者がフッターへ到達できません。会社情報、配送、返品、利用規約など重要なリンクがフッターにしかない場合、操作性に影響します。
一定件数で「もっと見る」へ切り替える、固定のナビゲーションを用意するなど、商品閲覧以外の経路も残します。SEOだけでなく、アクセシビリティと購入前の安心にも関わります。
表示速度とのバランス
一度にすべての商品をDOMへ追加すると、通信量だけでなくブラウザの処理も重くなります。初期表示件数、追加件数、画像サイズ、API応答、キャッシュを測定して調整します。
「もっと見る」を押すたびに大量の商品を読み込むのではなく、利用者が比較できるまとまりで追加します。表示速度の改善が必ず順位向上につながると断定はできませんが、使いにくい一覧は商品選びや購入にも影響します。
ECサイトでの具体例
コスメサイトの「リップ」カテゴリに300商品あるとします。初期表示は30商品とし、下部の「もっと見る」で次の30商品を追加します。裏側では「?page=2」以降のURLを用意し、各ページから前後へ通常リンクで移動できます。
60商品目まで表示した時点でURLと履歴を更新し、商品詳細から戻っても同じ位置へ復帰できるようにします。JavaScriptが使えない場合でも、ページネーションリンクから商品を閲覧できます。
色やブランドのフィルタを組み合わせた場合は、フィルタURLの検索対象方針を別に決めます。無限スクロールを実装したことで、不要なパラメータURLまで大量にリンクされないようにします。
アクセシビリティへの配慮
無限スクロールでは、追加された商品を読み上げ利用者へ知らせ、フォーカス位置を不意に移動させないことが重要です。「もっと見る」ボタンには、何件追加されるかを示すと理解しやすくなります。
キーボード操作だけで商品とフッターへ到達できるか、読み込み中に操作が閉じ込められないかを確認します。クロール可能なリンクを用意することは、利用者の代替操作にも役立ちます。
フィルタ変更時の状態管理
後半までスクロールした後に色やブランドを変更すると、商品集合とページ番号が変わります。以前の位置を引き継いで空画面にならないよう、先頭へ戻す、URLと履歴を更新するなどの仕様を決めます。
フィルタ解除後に古いpageパラメータが残ると、存在しないページへ移動する場合があります。商品集合が変わる操作ごとに、URL、canonical、読み込み位置をテストします。
計測イベントを設計する
通常のページビューだけでは、「もっと見る」が何回使われ、何件目の商品まで見られたか分かりません。追加読み込み回数、成功と失敗、商品詳細への移動、戻る操作をイベントとして計測します。
閲覧深度が高いほど良いとは限りません。希望の商品を見つけられず延々とスクロールしている可能性もあります。絞り込み利用や購入と合わせて評価します。
サーバー側レンダリングとの関係
各ページURLをサーバー側または事前生成HTMLで返せると、商品リンクを安定して提供しやすくなります。クライアント側レンダリングでも実現できますが、APIエラーやレンダリング遅延を含めて検証が必要です。
技術方式の名前だけで可否を決めず、URLを直接開いた結果、HTML内の商品リンク、HTTP応答、表示速度を確認します。検索エンジン向けだけ別内容を返さず、利用者と同じ商品集合を提供します。
テスト方法
ブラウザでJavaScriptを無効にした状態や、ネットワークを遅くした状態で商品リンクへ到達できるか確認します。ページ2のURLを直接開き、想定の商品、title、canonical、前後リンクが表示されるかを見ます。
Search ConsoleのURL検査でレンダリング後のHTMLを確認し、後半商品のリンクが取得されているかを調べます。ログやアクセス解析では、追加読み込みの失敗率、戻る操作、閲覧深度も確認できます。
よくある間違い
一つ目は、button要素のクリックだけが唯一の追加経路になっていることです。通常リンクと固有URLを用意します。
二つ目は、全商品を一つのURLへ読み込み、ページ番号URLを作らないことです。共有、履歴、クロール、エラー復旧が難しくなります。
三つ目は、検索エンジン向けにだけ別の隠しリンクを大量に置くことです。利用者にも意味のあるページ構造として実装し、画面と内容を一致させます。
確認項目
- 追加商品群に直接開けるURLがあるか
- 次ページへhref付きリンクで到達できるか
- ボタンやスクロール操作なしでも商品を発見できるか
- 戻る操作とURL共有で同じ位置を再現できるか
- 読み込み失敗時の代替経路があるか
- フッターや重要リンクへ到達できるか
- ページURLごとのcanonicalが正しいか
公開前の端末別テスト
無限スクロールは、画面サイズ、通信速度、ブラウザによって挙動が変わりやすい機能です。パソコンとスマートフォンで、初回表示、追加読み込み、戻る操作、フィルタ変更、通信失敗を確認します。キーボード操作や画面読み上げでも「もっと見る」に到達できるかを見ます。
検索エンジン向けの確認では、2ページ目相当のURLを新しい画面で直接開き、その商品群が最初から表示されるかを確認します。画面をスクロールした後にだけ作られるリンクでは不十分です。HTMLやレンダリング結果に通常のa要素で前後ページへの経路があり、リンク先が200で応答する状態を目指します。
計測では、追加読み込み回数だけでなく、何番目の商品まで見られたか、商品詳細へ移動した位置、読み込みエラーを記録します。回遊が少ない場合は、表示方式だけを原因と決めつけず、商品順、絞り込み、価格情報、読み込み時間も併せて調べます。
商品一覧以外の要素をどう見せるか
一覧の末尾にガイド、関連カテゴリ、フッターがある場合、無限に商品が追加されると利用者がそこへ到達できません。重要な案内は一覧上部や固定の補助領域にも置く、一定回数で自動読み込みを止めてボタンへ切り替えるなど、商品探索とサイト内移動を両立させます。広告やおすすめ枠を途中に差し込む場合も、商品番号や戻り位置がずれないようにテストします。
まとめ
無限スクロールや「もっと見る」を使う場合も、商品群をページ単位の固有URLへ分け、通常リンクでつなぐことが基本です。利用者の操作を待たなくても、検索エンジンが後半の商品へ到達できるようにします。
まず2ページ目相当のURLを直接開き、商品リンク、前後リンク、canonical、戻る操作を確認してください。画面の滑らかさだけでなく、URLとして成立しているかをテストすることが重要です。
