Google 検索でコンテンツを輝かせる方法 from #ChromeDevSummit 2019

[レベル: 上級]

この記事では、先日参加した Chrome Dev Summit 2019 での検索にフォーカスしたセッションをレポートします。

セッションスピーカーは Martin Splitt(マーティン・スプリット)氏、セッションタイトルは “How to make your content shine on Google Search”(Google 検索でコンテンツを輝かせる方法)です。

Googlebotのレンダリングが劇的に高速化していることを先日お伝えしました。
この情報は、スプリット氏がこのセッションで言及したことでした。

ここではセッション全体をまとめてレポートします。

Martin Splitt at Chrome Dev Summit 2019

Evergreen Googlebot

Googlebot を改良した。

  • 最新の Chrome と同じレンダリングエンジン
  • 1,000 以上の新しい機能をサポート
  • Chrome(安定版)に合わせてレンダリングエンジンもアップデート
  • 各種検索ツール(モバイルフレンドリーツール、AMP テストツール、リッチリザルト テストツール、URL 検査ツール)もあわせてアップデートされる
  • Bingbot も evergreen になった

Googlebot は Chrome と同じくらいに強力になった。
ユーザーが見ているのと同じものをインデックスできる。

User-Agent

Googlebot のユーザーエージェント (UA) は、まだ更新していない。
UA 文字列には “Chrome 41” が含まれたまま。
UA で判別しているシステムがウェブにあるので互換性を保つため。
いずれ変更する予定。
[※すずき補足: 12 月に変更するとアナウンス済み]

バージョン番号は更新されるので、UA で判定する場合でも、Chrome のバージョンまで含めて識別しないようにしてほしい。
おおまかに “Googlebot” の文字列だけの判定にする。
本当に Googlebot かどうかを確実にするには DNS のリバースルックアップを使う。
[※すずき補足: Googlebot の確認方法はヘルプ記事に解説あり]

レンダリング速度の向上

レンダリング処理が完了してインデックスされるまでに、かつては(最大で)1 週間程度かかっていた。
しかし、劇的に改善した。

現在は、レンダリング処理に関して次のようなデータが出ている。

  • 中央値で 5 秒
  • 90 パーセンタイルが数分以内

レンダリングの遅延をもう心配する必要はない。

ウェブページの取得

Googlebot のレンダラーはページのロードが完了するまでのエリアをレンダリングする。
[※すずき補足: Googlebot の Viewport(スクリーンの高さ)はどのくらいかという問題。Googlebot はスクロールしないので、ページを “ひとかたまり” として取得する。いわば非常に高い Viewport を持っている。詳しくはこちらこちらの解説記事を参照]

「ロードの完了」には複雑な判定を用いている(ので、サイト側は気にしなくていい)。

Shadow DOM なども含めて、Chrome とまったく同じレンダリング処理を Googlebot のレンダラーができるように Google は取り組んでいる。
なので、いいウェブサイトを作ることにフォーカスしてほしい。

ある調査によれば、(JavaScript を多用している)ナショナル・ジオグラフィックのサイトは 100 %のコンテンツが速やかにインデックスされたとのこと。

その他の改良

ネイティブ Lazy-load

Chrome がネイティブ Lazy-load をサポートしたが、Googlebot もサポートしている。
[※すずき補足: Chrome のネイティブ Lazy-load についてはこちらの記事を参照}

より高度な Lazy-load には IntersectionObserver API を用いる。
この API を Googlebot はサポートしている。
[※すずき補足: IntersectionObserver API の Googlebot のサポートについてはこちらのドキュメントを参照]

ウェブ コンポーネント

Shadow DOM など、ウェブ コンポーネントを Googlebot はサポートしている。

画像

画像には img タグを使うこと。
<img scr="/cute-cat.jpg" alt="かわいいネコ"/>

CSS で読み込んだ画像はインデックされない。
<div style="background-image: url(cute-cat.jpg)">

画像検索に関しては、大きなサイズの高解像度の画像を公開することを推奨する。
間もなく、構造化データを使って Search Console から高解像度の画像であることを Google に伝えることができるようになる。
画像検索や Google Home で大きな画像を表示できるようになる。

構造化データ

検索でコンテンツを際だたせるために、構造化データを使うことを推奨する。
さまざまなリッチリザルトを利用できる。

ツール

Search Console

新しい Search Console ではレンダリングの検証や監視ができる。
URL 検査ツールでは、インデックス状況の確認ほか、JavaScript のデバッグも可能。

スピードレポート

サイトの速度をレポートする機能として、スピードレポートをリリースした。
Chrome ユーザーエクスペリエンス レポートを利用して、実際のユーザーのデータに基づいている。
Lighthouse でも速度の検証ができるが 1 ページ単位になる。
スピードレポートは何百万ページもあるようなサイトでも、全体像を把握できる。
[すずき補足: スピードレポートの公開はこちらの記事で紹介]

レポートは以上です。

スプリット氏は、次のように最後を締めくくりました

開発者と SEO 施策者は協力しあってウェブサイトの運営にあたってほしい。

特に大きな組織では、SEO 担当者とデベロッパーの協調・連携は大切です(もっと言えば、マーケティングチームやセールスチームなども巻き込んだ横断型の構造が理想的ですね)。

レポート記事では一部省略した部分もあります。
完全なセッションはこちらの動画で視聴できます。