【視聴メモ】Google Search and JavaScript Sites (Google I/O'19)

この記事は Google I/O '19 のセッションの視聴メモです。
想定読者は自分なので正確性や網羅率には問題があるかもしれません。

---

References

Speaker(s): Martin Splitt, Zoe Clifford

Abstract

Learn how Googlebot crawls and renders your website so your content can be discovered via Google Search through an optimized user experience. This session will cover architectural best practices (e.g. how to implement lazy loading), framework-specific (React, Vue, Angular) techniques for building Search friendly apps, and review various tools and reports (e.g. Search Console, LightHouse) to bring this to life.

訳

Googlebotがどのようにクローリングを行い、Webサイトをレンダリングしているのかを知り、あなたのコンテンツがどのようにGoogle Searchに見つけられるかを学びましょう。このセッションはアーキテクチャ的にベストなプラクティス（たとえばLazy Loadingなど）やReactやVueなどのフレームワーク特有のテクニックをカバーし、サーチされやすいアプリを作るテクニックを知れます。また、様々なツール（Search ConsoleやLightHouseなど）の分析結果を報告します。

Contents

• 御存知の通り、Googlebotが最新のChromeを使うようになりました！
• 最新のChromeになって何が嬉しいのかは次の通り
  • ES6以上の機能が使える
  • 様々な新しいAPIが使える
  • ポリフィルが少なくて済む
• react-snap
  • コンテンツに本質的な変動があったときに静的なファイルを生成しておけば良くね？という方法を実現できる
• VueでSSRする方法
  • vue-server-renderer -> SSR + hydration
  • prerender-spa-plugin -> pre-rendering
  • Nuxt.js -> SSR+hydration or pre-rendering
• JavaScriptでSEOする話は https://youtube.com/GoogleWebmasters で見れる
  • React Helmet でメタタグを書いたりすると良い
• Dynamic SSR
  • SSR with Hydration や pre-rendering のこと
• GoogleのSEOについてはLighthouse見るのが速いよ
• 各フレームワークにおけるメタデータの書き方
  • React -> React Helmet
  • Vue -> metaInfo
  • Angular -> @angular/platform-browser
• スクロールイベントをトリガーしたLazy Loading
  • Googlebotはスクロールしないのでスクロールイベントは発火されない
  • IntersectionObserver を使おう
  • もちろんネイティブのLazyLoadingを使ってもいいよ
• Search Console
  • Discovered But Currently Not Indexed って出るけど何？
    • Crawl Budget が低すぎてインデックスされてない
    • Crawl Budget はGooglebotがどれだけ高頻度にそのサイトをクロールできるか
    • Crawl Budget は各ページのレンダリングにどれだけ時間がかかっているかにも左右される
    • Googlebotは複数のページで同じリクエストが呼ばれているとき、その結果をキャッシュする
  • 無限ループがあったら適度なところで実行を切り上げてそこまでで評価するよ
• localStorage, sessionStorage, and IndexedDB の扱いは？
  • cookieもそうだが、有効だけど保存はされない
• feature-detect.js 的なものを作ってブラウザの各APIが有効なときだけ使える改善をやったら良い
• geolocation API の扱いには注意
  • navigator.geolocation 自体は存在するが処理を実行しようとするとエラーになる
• Permission が必要なものは基本的に全て「拒否」の動作になる
• コンテンツがないときは404を返してくれ
  • noindexとかしなくていいよ
• metaでnoindexが指定されていたらその時点でJSの実行もしない
  • あとからmetaを書き換えるという戦略は使えない

Memo

• SSRの話で始まったかと思ったらがっつりGooglebotの仕様に関する話だった
• Pre-renderすべきコンテンツの更新頻度や量はどの程度であるべきなのか