Google、SEOに適したLazyloadの仕様を公開

投稿日：2018年11月7日 by 

[レベル: 上級]

SEO と相性がいい Lazyload の実装を解説するドキュメントを Google はデベロッパー向けサイトで公開しました。

3つのアドバイス

ドキュメントには3つの指針が書かれています。

1. viewport 内で見えるようにする

viewport 内にあるコンテンツは、必ず Google にも見えるようにしておきます（viewport は簡単に言えば、スクリーンに表示される領域）。
つまり、重要なコンテンツが viewport に入ったときは確実に読み込ませます。

IntersectionObserver API と polyfill を実装するように Google は指示しています。

2. 無限スクロールでは paginated loading を使う

無限スクロールを採用している場合は、paginated loading を実装します。

paginated loading を実装すると、無限スクロールで、ページをスクロールしていくとある地点で URL を変えることができます。
無限スクロールなのですが、指定した場所に一意の URL を割り当てることができます。

paginated loading がどんなふうに動くのかは、John Mueller（ジョン・ミューラー）氏が作ったサンプルページで確認できます（URL に注意しながら、スクロールしてみてください）。

paginated loading を使うと、スクロールしない（できない）Googlebot でも URL をたどれば無限スクロール ページのコンテンツを取得できます。

paginated loading は History API を使って実装します。

3. 検証

検索エンジンフレンドリーな Lazyload が実装できているかどうかをテストします。

検証方法の1つとして、ヘッドレスブラウザの Puppeteer を利用したスクリプトを Google は準備しています。

第 2 版、第 3 版に更新あり？

詳しいガイドラインはドキュメントを参照してください。
と言っても、この記事で説明した以上に、もっとずっと詳細にドキュメントが解説しているわけではありません。
かなりあっさり目です。

仕様策定に関わっている Martin Splitt（マーティン・スプリット）氏は “the first version” と言っているので、さらに詳しい内容に今後更新するのでしょう。

※マーティンに来週会えるので聞きたいことがあれば代わりに聞いてこれると思います。コメントか Twitter でどうぞ。

いずれにしても、SEO に適した Lazyload の仕様を Google が定めてくれたことは助かります。