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

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

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

サイトのページ上のコンテンツがすべて確実に Googlebot で認識されるようにするには、遅延読み込みを実装する際、IntersectionObserver APIPolyfill を使うことにより、どの関連コンテンツも、ビューポートに表示できる場合に必ず読み込まれるようにします。

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

無限スクロール機能を実装する場合は、必ずページごとの読み込みができるようします。ページごとの読み込みは、ユーザーがサイトのコンテンツを共有したり再び利用したりするのに役立つため、重要なものです。また、ページごとの読み込みができれば、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 によるクロールとインデックス作成の対象としたいコンテンツがすべて含まれていることを確認します。

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