無限スクロールのSEOはページ分割URLを用意しpushStateで現在位置を示す
公開日： 執筆：佐藤
無限スクロールを使う場合も、記事や商品をページ分割したURLから開けるようにします。最初のHTMLだけを取得したGooglebotが、画面をスクロールして追加内容を読み込むとは限りません。
JavaScriptによる連続表示は利用者向けの操作方法です。検索エンジンが各項目へ到達する経路は、直接開けるURLとリンクで別に用意します。この二つを同じデータから作れば、表示方法を変えても、検索対象となる項目の範囲を保てます。
先にページ分割したURLを成立させる
Googleの無限スクロールに関する推奨は、無限スクロールとともに、JavaScriptを使わなくても開けるページ分割を用意するよう説明しています。
説明用に、記事一覧を20件ずつ分けるとします。
https://example.com/articles?page=1
https://example.com/articles?page=2
https://example.com/articles?page=3
それぞれのURLを直接開いたときに、対応する20件が本文へ含まれる状態にします。1ページ目を開き、何度もスクロールした利用者だけが2ページ目以降を見られる構成にはしません。
ページ番号をURLの#2のようなfragmentだけで表す方法も避けます。サーバーへ送られないfragmentへ取得範囲を任せず、各範囲をHTTPで取得できるURLにします。
項目を重複させず、抜けも作らない
ページ分割では、すべての項目がいずれかのページへ含まれ、同じ項目が複数ページへ重複しないようにします。
たとえば、1ページ目を1件目から20件目、2ページ目を21件目から40件目と決めます。無限スクロールの先読みで一部を重ねる場合も、検索エンジン向けのページ分割では同じ項目を二つのURLへ重ねない設計にします。
公開中に記事が追加される一覧では、単純な開始位置だけで分けると、取得の途中で項目が前後へ移る場合があります。何を一単位として並べ、同じURLを後から開いたときに何が表示されるかを決めます。days-ago=3のように閲覧日で範囲が変わる値は、同じURLの内容を安定させにくくします。
検索対応は、ページ数を増やすことではありません。各URLから、利用者が探している項目へ到達できることが目的です。1ページへ入れる件数は、目的の項目を見つけられる長さと、読み込み時間の両方から決めます。
無限スクロールとURLを同じ区切りへ合わせる
ページ分割が成立したら、その区切りを無限スクロールにも使います。2ページ目の範囲が画面へ入ったときは2ページ目のURL、3ページ目へ進んだときは3ページ目のURLが、表示中の範囲と対応するようにします。
JavaScriptでは、History APIのpushState()またはreplaceState()で、ページ全体を再読み込みせずにアドレス欄と履歴を更新できます。
利用者が「次のページを開く」操作に近い動きをしたときは、pushState()で履歴を追加する方法が候補になります。ブラウザーの戻る操作で、直前に見ていた範囲へ戻れるためです。スクロールのわずかな変化ごとに履歴を増やすのではなく、ページ分割の境界を越えたときだけ更新します。
最初の表示位置を現在のURLへ合わせる場合や、履歴を増やさず現在項目を置き換える場合はreplaceState()を検討します。どちらを使う場合も、アドレス欄のURLを直接開けば同じ範囲へ到達できることが前提です。
画面を戻したときの項目と位置を確認する
URLだけが変わり、画面の内容が対応していなければ、履歴として役に立ちません。次の順で確認します。
- 1ページ目から2ページ目の範囲へ進む
- アドレス欄が2ページ目のURLへ変わる
- さらに3ページ目へ進む
- ブラウザーの戻る操作を行う
- 2ページ目の項目と位置へ戻る
- 表示されたURLを別のタブで直接開く
この確認では、URL、一覧項目、スクロール位置を分けて記録します。URLが正しくても項目が違う、項目は合っていても先頭へ戻る、同じ項目が重複して追加される、といった失敗を見分けるためです。
JavaScriptを無効にした状態では、通常のリンクで次のページへ進めることも確認します。無限スクロールを外したときにも一覧として利用できれば、表示機能の障害とコンテンツへの到達経路を分けられます。
範囲外のURLは404を返す
ページが30までしかないのに、page=999が空の一覧を200 OKで返す構成は避けます。存在しない範囲には404 Not Foundを返します。
範囲外を常に1ページ目へ転送すると、入力したURLと表示内容の対応が崩れます。空のページを無制限に200で返すと、項目のないURLを増やします。総件数が変わる一覧では、最後の有効なページと、その次のページの応答を公開後も確認します。
表示機能とページ分割の責任を分けて引き継ぐ
実装を委託するときは、無限スクロールのJavaScriptだけでなく、ページ分割URLの規則、並び順、1ページの件数、重複を防ぐ条件、範囲外の応答、履歴を更新する境界を受け取ります。
JavaScriptを停止した場合のページ移動も、納品条件へ含めます。画面効果の担当者と、一覧データやURLを作る担当者が別でも、同じ区切りを使う責任者を決めます。
最初の一手は、現在の一覧をページ分割URLで直接開き、2ページ目の全項目が最初のHTMLに存在するかを確認することです。存在しなければ、スクロール処理を直す前に、URLとHTMLで取得できるページ分割を作ります。
関連記事
