JavaScript SEOの基本を解説するドキュメント Googleが公開
JavaScriptウェブサイトの SEO のために基礎知識を説明するドキュメントを Google がデベロッパーサイトで公開しました。内容をざっくり紹介させて頂きます。
JavaScript をGooglebot が処理するプロセス
Googlebot による JavaScript の処理は次の 3 つのプロセスに分かれます。
・Crawling(クローリング)
・Rendering(レンダリング)
・Indexing(インデックシング)
レンダリングが、静的な HTML ドキュメントにはないプロセス。レンダリングが完了して最終的なコンテンツがインデックシング プロセスに渡されるのです。クローリングもレンダリングも、すぐ実行されるとは限らず“キュー” に保存され順に処理されます。
title と meta description を設定
JavaScript を利用する場合でも、各ページに固有の title タグと meta description タグを設定。JavaScript による生成もOKです。ただ、遅延が発生するので要注意です。
互換性のあるコード
Googlebot のレンダリングエンジンは常に最新の Chrome 相当、しかし完全に同等ではないのです。実行できない JavaScript が一部あり。サイトで使用中の JavaScript が Googlebot のレンダリングエンジンと互換性がないとき、対処方法を解説するドキュメントを合わせて公開しています。
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 をサポートしています。
まとめ
新しいことは書かれていません。いろいろな場面で単発的に説明してきたことを、まとめて文書化したものです。なお、今のところは日本語化されていませんが、
開発者とともに一読すると新しい発見があるかもしれません。