JavaScript SEOの基本を解説するドキュメントをGoogleが公開

[レベル: 上級]

JavaScript を多用するウェブサイトの SEO のために必要な基本知識を解説するドキュメントを Google はデベロッパーサイトで公開しました。

ドキュメントに書かれている内容をざっくり紹介します。

Googlebot が JavaScript を処理するプロセス

Googlebot による JavaScript の処理は次の 3 つのプロセスに大きく分かれます。

  1. Crawling(クローリング)
  2. Rendering(レンダリング)
  3. Indexing(インデックシング)

2 番目のレンダリングが、静的な HTML ドキュメントにはないプロセスになります。
レンダリングが完了して初めて最終的なコンテンツがインデックシング プロセスに渡されます。

クローリングもレンダリングも、すぐ実行されるとは限りません。
“キュー” に保存され順番に処理されます(なので、レンダリング完了までの時間を短縮するために SSR やプリレンダリングが推奨される)。

ユニークな title と meta description を設定する

JavaScript を利用する場合でも、各ページに固有の title タグと meta description タグを設定します。
JavaScript による生成も可能です(ただし、上述したように遅延が発生するので要注意)。

互換性のあるコード

Googlebot のレンダリングエンジンは常に最新の Chrome 相当ですが、完全に同等ではありません。
実行できない JavaScript が一部あります。

サイトで使用している JavaScript が Googlebot のレンダリングエンジンと互換性がないときの対処方法を解説するドキュメントを Google は併せて公開しています。

適切な HTTP ステータスコードを返す

適切な HTTP ステータスコードを返すことは JavaScript を多用したサイトであっても重要です。

301 や 404、5xx などの各ステータスコードが表す意味を理解しておく必要があります。

robots meta タグを正しく使う

noindex robots meta タグを利用することで、インデックスを拒否できます。
nofollow robots meta タグを利用することで、そのページにあるリンクを Googlebot がクロールすることを禁止できます。

注意点としては、noindex タグを Googlebot が発見したときは、レンダリングを停止する仕様があります。

初期状態では noindex が構成されていて、JavaScript で取り除くようにしたとします。
ところがそのページを Googlebot はレンダリングしないので(noindex を最初に認識するから)、noindex が取り除かれることはありません。
結果として、インデックスされず検索結果に出ることもありません。

lazy-load の使用

読み込み速度向上のために画像を遅延読み込みさせるときのベストプラクティスを Google は公開しています。

具体的には、IntersectionObserver API(と互換のための polyfill)を構成します。
現在の Googlebot は IntersectionObserver API をサポートしています。

以上です。

新しいことが書かれているわけではありません。
これまでに、いろいろな場面で単発的に説明してきたことを、一箇所にまとめて文書化したものです。
開発者と一緒に読んでおくといいでしょう。

なお、今のところは日本語化されていません。
必要であれば Google 翻訳を使ってください。