Googleでは、米国現地時間9月17日、無限スクロールにおけるJavaScriptガイダンスを暫定的なブログ記事から公式ドキュメントに移行したことを発表しました。公式ドキュメントとなる対象ページはJavaScriptドキュメント内の「遅延読み込みコンテンツを修正する」で、まだ英語版のみです。実際に修正された箇所は無限スクロールに関してのところのみだったのですが、せっかくですのでこの「遅延読み込みコンテンツを修正する」ページ全体を和訳しながらご紹介したいと思います。
Migrated the JavaScript guidance for infinite scroll
What: Migrated guidance from the blog post on infinite scroll to our documentation for infinite scroll. There is no change in the guidance.
Why: To make it easier to find our recommendations on infinite scroll and make sure it’s still up to date.
無限スクロールにおけるJavaScriptのご案内を移行しました
内容: 無限スクロールに関するブログ投稿のガイダンスを、無限スクロールに関するドキュメントに移行しました。ガイダンスの内容自体に変更はありません。
理由: 無限スクロールに関する推奨事項を簡単に見つけられるようにしたうえで、常に最新の状態にしておくため。
遅延読み込みコンテンツに関するガイダンス
今回は、もともとJavaScriptを使った無限スクロールの実装方法について、Googleは以前ブログ記事として掲載していましたが、ブログだと埋もれていってしまうことと、公式ドキュメントへ内容を移行することで常時最新情報に保つ社内体制に組み込むこと、を目的として、遅延読み込みコンテンツに関するドキュメントに移行しました。内容に変更はなく、ただ移行しただけです。この遅延読み込みコンテンツに関するドキュメントは日本語版と英語版がありますが、せっかくですので(今回の更新部分を含め)英語版を和訳してご紹介していきたいと思います。
…というわけで、「遅延読み込みコンテンツを修正する」英文ページをセクションごとに和訳＆解説を繰り返してご紹介します。
引用）Google Search Centralより一部和訳
こちらは、冒頭部分としてのLazy Loadの説明と注意点に関するリード文です。
ビューポート内でコンテンツが表示されたときに読み込む
Googleがページ内のすべてのコンテンツを確認できるようにするには、ビューポートに表示される全てのコンテンツを、遅延読み込みの実装によって読み込まれるようにしてください。遅延読み込みを実装する方法をいくつか紹介します：
- 画像やiframe用にブラウザ機能へ組み込む遅延読み込み
- IntersectionObserver APIとポリフィル
- ビューポート内にコンテンツが入った際にデータを読み込むJavaScriptライブラリ
これらの方法は、コンテンツを読み込むためのスクロールやクリックなど、ユーザー操作に依存しないため、検索Botがページに対して適切にできない場合でも対応可能です。
画面上部のファーストビュー等、ユーザーがページを開いたときにすぐに表示される可能性のあるコンテンツには、遅延読み込みを追加しないでください。それを行うと、コンテンツの読み込みや表示が遅くなり、ユーザーに非常に目立つ問題となることがあります。
必ず実装をテストしてからにしてください。
引用）Google Search Centralより一部和訳
「ビューポート」というのは「ブラウザの画面上に実際に表示されている部分のこと」を指しています。遅延読み込みを実装する場合は、スクロールやクリックのようなユーザーアクションによるフラグ立てではなく、「ブラウザの画面上に表示されたら」というフラグ立てによって実装してください、という内容です。
「画像やiframe用にブラウザ機能へ組み込む遅延読み込み」については、<img>タグにloading=“lazy”と記載するとブラウザ側が自動で遅延読み込みとして扱う、という機能が各ブラウザに備わっているのでそれを利用しましょう、という内容です。
「IntersectionObserverAPIとポリフィル」について、IntersectionObserver APIというものがJavaScriptの機能であり、画面上に表示されたかどうか(ビューポートに入ったかどうか)を判定できる機能なので、それを利用して遅延読み込みを実装しましょう、という内容です。「ポリフィル」というのは、古いブラウザでもこの機能と同等のことができるようにしてくれる機能のことです。
「ビューポート内にコンテンツが入った際にデータを読み込むJavaScriptライブラリ」について、ライブラリというのは、WordPressでいうプラグインのようなもので、
JavaScriptの機能を簡単に実装できるようにパッケージ化したものです。「ビューポートに入ったら」というフラグで遅延読み込みをしてくれるライブラリを使いましょう、という内容です。
無限スクロールのページ区切り読み込みをサポート
無限スクロールとは、長いページをスクロールするにつれてさらに多くのコンテンツやページを読み込む技術のことです。これには、1つの長い記事が複数のチャンクに分割されたものや、一覧ページのようなアイテムのコレクションが同様に複数のチャンクに分割されたものが含まれます。インデックス可能な方法で無限スクロールを実装するには、次のことを行ってページネーション読み込みをサポートしていることを確認してください：
- 各チャンクに固有の永続的なURLを付与する。
- 各URLで表示されるコンテンツが、ブラウザで読み込まれるたびに同じものであることを確認する。例えば、URLに絶対ページ番号を使用する(例：?page=12をクエリパラメータとして使用する)。
- これらのURLに?date=yesterdayのような相対的な要素を使用しない。これにより、検索エンジンとユーザーが常に同じコンテンツを特定のURLで見つけられるようになり、検索エンジンがコンテンツを適切にインデックスしやすくなります。また、ユーザーがそのコンテンツを共有したり再訪問したりできるようになります。
- ページネーションされたセット内でURLを順番にリンクして、検索エンジンがこれらのURLを発見できるようにする。ページネーションを実装する際のベストプラクティスについては、さらに詳しく調べてみてください。
- 新しいページのチャンクがスクロールによって読み込まれ、ユーザーにとって主要な表示要素になったときは、History APIを使用して表示されているURLを更新します。これにより、ユーザーがページをリフレッシュしたり、共有したり、現在表示されているURLにリンクしたりすることができます。
引用）Google Search Centralより一部和訳
原文中に出てくる「チャンク」という単語はプログラム用語で「塊」という意味ですが、一般的な表現としては「ブロック」や「セクション」という言葉がニュアンスとして近いです。実装方法として挙げている５点については、基本的なページネーションの実装と同様です。
- 無限スクロールで表示される部分それぞれに、固有のURLを付与する
- 固有のURLはページ番号(?page=12)などの絶対的な要素を使い、昨日(?date=yesterday)などの相対的な要素は使わず、いつでも同じコンテンツが表示されるようにする
- ◯ページ目などnページ目のリンクを表示し、検索エンジンがそれらのURLを発見できるようにする
- ブラウザの進む、戻るボタンによって、無限スクロールで表示されたコンテンツ部分であっても、表示されているURLに更新されるようにする
以上です。後は公開後にGoogle Search ConsoleのURL検査ツールでしっかりとGoogleがレンダリングしているかどうか、コンテンツを読み取っているかどうか、確認するようにしましょう、とのことです。
無限スクロールはあまり歓迎していない！？
Googleのこの推奨事項を読む限り、あくまでも無限スクロールコンテンツであっても表示されるコンテンツは個別にURLが存在するようにし、対象URLにもリンク導線があることを前提としているような形ですね。つまり、無限スクロールしなければ表示されないコンテンツはGoogleも読み込む自信がないよ、って感じです。Google自身も検索結果画面を無限スクロール表示していた時がありましたが、今では検索結果を無限スクロール化するのをやめましたよね。
あくまでも固有に存在するURLとコンテンツで作ったうえで、見せ方を無限スクロールする程度にしましょう、という感じです。
