遅延読み込みコンテンツを Google が認識できるようにする

重要でないコンテンツや非表示のコンテンツの読み込みを後回しにすることは、一般に「遅延読み込み」とも呼ばれ、ユーザー エクスペリエンスに関するおすすめの方法としてよく行われます。詳しくは、「ウェブの基礎」のサイトで画像や動画の遅延読み込みについての説明をご覧ください。ただし、こうした方法が正しく実装されていないと、対象のコンテンツを Google が認識できなくなるおそれがあります。ここでは、Google が確実に遅延読み込みコンテンツのクロールとインデックス作成を行えるようにする方法について説明します。

コンテンツをビューポートに表示できるときに読み込む

Googlebot がページ内のすべてのコンテンツを確実に認識できるようにするために、遅延読み込みを正しく実装して、すべての関連コンテンツがビューポートに表示できるときに読み込まれるようにしてください。たとえば、次のような方法があります。

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

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

無限スクロール機能を実装する場合は、必ずページごとの読み込みができるようします。ページごとの読み込みは、ユーザーがサイトのコンテンツを共有したり再び利用したりするのに役立つため、重要な手法です。また、ページごとの読み込みができれば、Google で、無限スクロールするページの最上部ではなくコンテンツ内の特定の位置へのリンクを表示することもできるようになります。

ページごとの読み込みができるようにするには、ユーザーが直接共有して読み込むことができる各セクションへの固有のリンクを指定します。History API を使って、コンテンツが動的に読み込まれる際に URL を更新することをおすすめします。

テストを実施する

実装の設定が済んだら、正しく機能することを確認する必要があります。その方法の 1 つとして、Puppeteer スクリプトを使用し、実装をローカルでテストできます。Puppeteer は、ヘッドレス Chrome を管理するための Node.js ライブラリです。このスクリプトを実行するには Node.js が必要となります。次のコマンドを使用し、スクリプトを確認したうえで実行してください。

git checkout https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

スクリプトを実行したら、作成されたスクリーンショット画像を手作業で調べて、Googlebot によるクロールとインデックス作成の対象としたいコンテンツがすべて含まれていることを確認します。

Search Console の URL 検査ツールを使用して、すべての画像が読み込まれているかを確認することもできます。スクリーンショットとレンダリングされた HTML を確認して、画像が読み込まれていることを確認してください。

フィードバックを送信...