この文書はFramerを学ぶ国内ユーザーが韓国語の資料不足により直面する困難を解決するために、公式ブログの内容を韓国語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆さんに少しでも役立れば幸いです。

インフィニットスクロールとは？

インフィニットスクロール（Infinite Scrolling）は、ユーザーがページを延々とスクロールし続けることができ、ページを読む際にスムーズな体験を提供するインタラクションです。しかし、この便利さの背後には、SEO（検索エンジン最適化）に関連する重要な考慮事項があります。特に、Core Web Vitalsの一つであるCLS（累積レイアウトシフト）がサイトのクロール方法に影響を与える可能性があります。

したがって、インフィニットスクロールを利用する際には、SEOの観点から慎重な設定が必要です。このガイドを通して、SEOへの影響を最小限に抑えつつ、スムーズなページ体験を享受するのに役立ててください。

1. CLSとは何か？

Googleによると、レイアウトシフトは以下のように定義されています。

レイアウトの変更は、ページ上の要素のサイズや位置が変わり、周囲のコンテンツの位置に影響を与えるときに発生します。

CLSは、ページが開かれている間に発生するすべての予期しないレイアウトシフトの総和を測定し、数値で示す指標です。

例えば、インフィニットスクロールを使用すると、新しいコンテンツが読み込まれる際にページ下部のフッターが押し下げられることがあり、この時にCLSが発生する可能性があります。

2. SEOへの影響を最小化するヒント

Googleは、安定的でユーザーフレンドリーなレイアウトを持つサイトを優先評価するため、サイトのCLS数値が高いとサイトランキングに悪影響を与える可能性があります。

インフィニットスクロールを使用する際、レイアウトが不安定になるとCLSが高くなるので、これを防ぐためにはフッターのような位置が固定された要素を読み込まれるコンテンツの下に配置しないことが良いです。

こうすることで、CLS数値を低く保ち、SEOスコアを保護するのに役立ちます。

また、インフィニットスクロール機能を使用する際は、Google Search Consoleを通じてCLS数値とサイトランキングをモニターすることを推奨します。

3. クロールに与える影響

インフィニットスクロールはJavaScriptに基づいて動作するため、JavaScriptを実行しないクローラはコンテンツを読めない可能性があります。したがって、リンク検索エンジンおよびクローラがサイト内のリンクの重要性を判断する方法に悪影響を及ぼす可能性があります。

しかし幸いなことに、Googleのクローラはこの規則の例外です。Googleはウェブサイトを約12,000ピクセルの高さのウィンドウで読み込むためです。Framerのインフィニットスクロールメカニズムはビューポートの高さを自動的に調整し、できる限り多くのコンテンツを読み込む方法です。このため、Googleはこの高さまでのコンテンツを正常に認識してクロールすることができます。

注意: Search Consoleで実際にクロールされたページを検査し、Googleがいくつのアイテムをクロールしたか確認できます。

4. クロール問題を減らすためのヒント

インフィニットスクロールを使用する際、クロールに悪影響を最小限に抑えるヒントを参考にしてください。

• トピック関連性に基づいた内部リンクを構成する: 各ページでトピックと関連する他のページにリンクをつなげておくと、クローラがサイト構造を簡単に理解できるようにすることができます。

• 前後のページナビゲーションを追加する: 各CMSページの下部に「前の記事」や「次の記事」のリンクを追加すると、クローラが辿ることのできる追加の経路を提供すると同時に、ユーザーがコンテンツを探索する際にも役立ちます。

• HTMLサイトマップを作成しフッターに接続する: Framerが提供する既存のsitemap.xmlとは異なり、「HTMLサイトマップ」は全ウェブサイトのすべてのリンクに関する概要を提供する一般的なページです。こうすることで、ユーザーとクローラの両方が関連するリンクをより効果的に見つけることができます。

この文章はFramer公式ブログの「Infinite scrolling and SEO」の翻訳・再編コンテンツです。