読み込みの遅いコンテンツを修正する

重要でないコンテンツや非表示のコンテンツの読み込みを後回しにすることは、一般に「遅延読み込み」とも呼ばれ、パフォーマンスおよびユーザー エクスペリエンスに関する一般的なおすすめの方法としてよく行われます。詳しくは、web.dev の画像や動画の遅延読み込みに関するリソースをご覧ください。ただし、こうした方法が正しく実装されていないと、対象のコンテンツを Google が認識できなくなるおそれがあります。ここでは、Google が遅延読み込みコンテンツをクロールしてインデックスに登録できるようにする方法について説明します。

ビューポートに表示されるタイミングでコンテンツを読み込む

Google がページのすべてのコンテンツを認識できるようにするには、すべての関連コンテンツについて、ビューポートに表示されるタイミングで読み込まれるように遅延読み込みを実装します。遅延読み込みを実装する方法には、次のようなものがあります。

上記の方法は、コンテンツの読み込みにユーザーの操作（スクロールやクリックなど）を必要としません。Google 検索はページ上での操作を行わないため、この点は重要です。

ページを開いた直後に表示される可能性が高いコンテンツには、遅延読み込みを実装しないでください。ブラウザでのコンテンツの読み込みや表示に時間がかかり、ユーザー エクスペリエンスに影響する可能性があります。

必ず遅延読み込みの実装をテストしてください。

無限スクロールでページごとの読み込みができるようにする

簡単に言うと、無限スクロールとは、長いページをユーザーが下にスクロールするにつれて、後続するコンテンツやページが次々と読み込まれる技術です。複数のチャンクに分けた 1 つの長い記事や、同じく複数のチャンクに分けたアイテムの集合体などで使用できます。インデックス登録が可能なように無限スクロールを実装するには、次の方法を使用してウェブサイトがこうしたチャンクをページごとに読み込めるようにします。

  • チャンクごとに永続的かつ固有の URL を設定します。
  • 各 URL をブラウザで読み込んだときに、常に同じコンテンツが表示されるようにします。その方法の一つは、たとえばクエリ パラメータに ?page=12 を使うことで、URL の中に絶対的なページ番号を入れることです。
  • URL に ?date=yesterday のような相対的な要素を使うことは避けます。そうすることで、検索エンジンやユーザーが特定の URL で常に同じコンテンツを見つけられるようになります。これにより検索エンジンは常に適切にインデックスに登録できるようになり、ユーザーはコンテンツの特定の部分を共有したり再表示したりできるようになります。
  • 個々の URL を連続的にリンクさせることで、ページ分けされた一連のコンテンツの各 URL を検索エンジンが見つけられるようにします。詳しくは、ページ分けを実装する際のベスト プラクティスをご覧ください。
  • スクロールに応じて新たなページのチャンクが読み込まれ、ユーザーが目にする主要な要素となったら、History API を使って表示された URL を更新します。これによりユーザーは、ブラウザに表示された現在の URL を再読み込み、共有したり、その URL にリンクしたりできます。

テスト

実装の設定が済んだら、正しく機能することを確認します。Search Console の URL 検査ツールを使うと、すべてのコンテンツが読み込まれたか確認できます。レンダリングされた HTML を確認し、URL 検査ツールでコンテンツを探すことによって、レンダリングされた HTML 内にコンテンツがあることを確認します。画像や動画の URL が、レンダリングされた HTML で <img> 要素または <video> 要素の src 属性に表示されていれば、正しく設定ができています。