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

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

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

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

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

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

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

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

テスト

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

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

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

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