【Google検索セントラル解説】JavaScript SEOの基本｜3段階の処理・canonical・noindex・ソフト404と更新の経緯

2026年11月5日

中野輝規

自社サイトの文章や画像が、JavaScriptで後から表示される作りになっていることがあります。そのとき、Googleはその文章を読めているのでしょうか。

この記事では、Google検索セントラルの「JavaScript SEO の基本を理解する」を、英語版から読んで解説します。Googleがページを処理する3つの段階、書き方で注意する点、小さな会社が自社サイトで確かめる手順が分かります。

合同会社謙虚は、3つのドメインを並行して運用し、何を変えると数字が動くかを測り続けています。このページを読むのは、数字を見る前に「Googleに正しく読まれる形になっているか」を確かめる基本が、ここにまとまっているからです。

結論：3行で言うと

Googleは、JavaScriptを使うページをクロール、レンダリング、インデックス登録の3段階で処理します。ステータスコードが200のページは、JavaScriptの有無にかかわらずレンダリングの順番待ちに入ります
それでもGoogleは、サーバー側のレンダリングや事前のレンダリングを今も良い方法としています。JavaScriptを実行できないボットがあるためです
canonicalとnoindexは、最初のHTMLと、JavaScriptが動いた後の姿を食い違わせないことが、Googleの示す注意点です

このページの基本情報

項目	内容
原題（英語）	Understand the JavaScript SEO basics
日本語版の題名	JavaScript SEO の基本を理解する
英語版の最終更新日	2026-03-04
日本語版の最終更新日	2026-03-05
Google検索セントラルの中の位置	クロールとインデックス登録の章の、JavaScriptの節
直近の主な更新	2026年3月4日に、アクセシビリティに関する節を削除。2025年12月15日・17日・18日に、noindex、canonical、200以外のステータスコードの扱いを追記

原文は、英語版と日本語版で読めます。

Googleがこのページで言っていること

JavaScriptを処理する3つの段階

Googleは、JavaScriptで作られたウェブアプリを、クロール、レンダリング、インデックス登録の3段階で処理します。クロールは情報を集めること、レンダリングはJavaScriptを動かして画面を組み立てること、インデックス登録は検索の対象として保存することです。

Googlebot（Googleのクロール用プログラム）は、ページをクロールとレンダリングの両方の順番待ちに入れます。

クロール：順番待ちからURLを取り出し、まずrobots.txtでクロールが許されているかを確かめます。許されていないURLにはリクエストを送りません。HTML内のリンク（href属性）も読み取り、新しいURLを順番待ちに足します
レンダリング：ステータスコードが200のページを順番待ちに入れます。Googleの資源に余裕ができると、画面を持たないChromiumがJavaScriptを実行します。待ち時間は数秒のこともあれば、それより長いこともあります
インデックス登録：描画後のHTMLを読んで、ページを登録します。描画後に現れたリンクも改めて拾います

robots.txtでブロックしたファイルやページについて、Google検索はJavaScriptのレンダリングを行いません。

JavaScriptでリンクを挿入すること自体は問題になりません。ただし、そのリンクは「クロールできるリンク」のベストプラクティスに沿った形にする必要があります。

リンクをたどらせたくない場合は、nofollowの仕組みを使います。

「最初のHTML」にどこまで書いてあるか

HTMLの中にすべての内容が入っている従来型のサイトや、サーバー側で描画するページは、クロールしてHTMLを読むだけで内容が分かります。

一方、アプリシェル方式のサイトは、最初のHTMLに実際の内容が入っていません。Googleは、JavaScriptを実行して初めてページの内容を見ることができます。

200のページは、JavaScriptが無いページも含めて、すべてレンダリングの順番待ちに送られます。robotsメタタグやヘッダーでインデックスを禁止している場合は例外です。

200以外のステータスコード（たとえば404のエラーページ）では、レンダリングが省かれることがあります。

Googleは、サーバー側や事前のレンダリングを今も良い方法と書いています。ユーザーにもクローラーにも速くなり、JavaScriptを動かせないボットもあるからです。

タイトルと説明文

内容が伝わる独自のtitle要素とメタディスクリプションは、利用者が目的の結果を見つける助けになります。どちらも、JavaScriptで設定したり変更したりできます。

canonicalの設定

rel=”canonical”のリンクタグは、Googleがページの正規バージョンを見つける手がかりです。設定の最善の方法は、HTMLに書くことです。

JavaScriptで設定してもよいのですが、元のHTMLで指定したURLと違うURLに変えることは避けます
JavaScriptを使うなら、常に元のHTMLと同じ値にします
HTMLに書けない事情があるときは、元のHTMLには書かず、JavaScriptだけで設定する方法もあります
JavaScriptで挿入する場合は、そのタグがページ上で唯一であることを確かめます。実装を誤ると、タグが複数できたり、既存のタグが書き換わったりして、予期しない結果になるおそれがあります

互換性のあるコードと、ステータスコード

JavaScriptは速く進化しており、Googleがサポートする機能には一定の制約があります。必要な機能が無い環境を検出し、差分配信とポリフィル（足りない機能を補う部品）を使うよう勧めています。

ステータスコードは、クロールで何が起きたかをGooglebotに伝える手段です。見つからないページは404、ログインが要るページは401、移転したページは転送、というように、意味のあるコードを返します。

シングルページアプリでソフト404を避ける

シングルページアプリは、ページの切り替えをブラウザ側のルーティングで行います。その場合、意味のあるステータスコードを返せないことがあります。

ソフト404（エラー画面なのにステータスが200のまま）を避ける方法を、Googleは2つ挙げています。

エラーページへ転送する：JavaScriptで、サーバーが404を返す専用のURLへ転送します
noindexを足す：JavaScriptで、エラーページにnoindexのrobotsメタタグを追加します

フラグメントではなくHistory APIを使う

Googleがリンクを見つけられるのは、href属性を持つa要素だけです。ページ内容の切り替えに「#」以降のフラグメントを使うと、GooglebotはURLを確実に取り出せません。

クライアント側ルーティングのアプリでは、History APIで画面の切り替えとURLの更新を行います。リンクのhrefには「/products」のような通常のパスを書きます。

robotsメタタグの注意点

robotsメタタグは、インデックス登録やリンクの追跡を止めるために使い、JavaScriptで追加したり内容を変えたりもできます。

ここに大事な注意があります。Googleはnoindexを見つけると、レンダリングとJavaScriptの実行を省くことがあります。

したがって、元のHTMLにnoindexがあり、JavaScriptでそれを消す作りは、思いどおりに動かないことがあります。

ページをインデックスさせたいなら、元のコードにnoindexを入れません。

長期キャッシュ、構造化データ、Webコンポーネント、遅延読み込み

長期キャッシュ：Googlebotはキャッシュを積極的に使い、描画の仕組みはキャッシュのヘッダーを無視することもあります。古いJavaScriptやCSSが使われるおそれがあるため、ファイル名に中身由来の識別子を入れる方法が挙げられています
構造化データ：必要なJSON-LDをJavaScriptで生成して、ページに挿入できます。問題を避けるため、実装を必ずテストします
Webコンポーネント：Googleはサポートしています。描画のときにShadow DOMとLight DOMの内容は平らにされ、描画後のHTMLに見える内容だけがGoogleに見えます。リッチリザルトテストかURL検査ツールで、描画後のHTMLを確認します。見えない内容は、インデックスに登録されません
画像と遅延読み込み：ユーザーが見る直前にだけ画像を読み込む遅延読み込みは良い方法です。検索に配慮した実装は、別の遅延読み込みのガイドラインに従います

英語版と日本語版の違い

最終更新日は、英語版が2026-03-04、日本語版が2026-03-05です。日本語版が1日遅れています
節の順序と数は一致しています。2025年12月に加わったnoindex、canonical、200以外のステータスコードの3点も、日本語版に入っています

2026年11月5日に両方の原文を読み比べた時点で、内容の差は見つかりませんでした。

更新の経緯

Googleの変更履歴ページで、このページに関わる更新を確かめました。確かめられたものだけを並べます。

時期	変更履歴にある内容
2020年5月12日	JavaScriptで作るリンク、フラグメントではなくHistory API、ソフト404の回避を、このガイドに追加
2022年6月30日	JavaScriptでcanonicalのリンクタグを挿入する場合の情報を追加
2024年2月6日	JavaScriptに関する3つのガイドを見直し、古い情報や不要な情報を整理
2025年12月15日	JavaScriptを使うページでのnoindexの扱いを明確化
2025年12月17日	JavaScriptでのcanonicalのベストプラクティスを追加
2025年12月18日	200以外のステータスコードでは、JavaScriptの実行が省かれることがある旨を追記
2026年3月4日	古くなったアクセシビリティの節を削除

最後の削除の理由として、Googleは、数年前からJavaScriptを描画しているため、内容をJavaScriptで読み込んでも検索が難しくなるわけではない、という趣旨を書いています。

このページから、言えること・言えないこと

言えること	言えないこと（よくある誤解）
GoogleはJavaScriptを最新のChromiumで実行し、描画後のHTMLをインデックス登録に使う	JavaScriptで作ったページは、どんな場合でも必ず正しく読まれる（robots.txtのブロック、noindex、200以外のステータスコードでは描画が省かれることがある）
サーバー側や事前のレンダリングは、今も良い方法とされている	JavaScriptの実行は、すべてのボットが行う（Googleは、行えないボットもあると書いています）
canonicalは、HTMLで設定するのが最善	JavaScriptでcanonicalを自由に書き換えてよい（元のHTMLと違う値にするのは避ける）
noindexを見つけると、JavaScriptの実行が省かれることがある	JavaScriptでnoindexを消せば、ページはインデックスされる

中小企業の視点で、どう受け取るか

ここからはGoogleの説明とは別の、私の読み取りです。従業員が数人から数十人の会社が、WordPressなどで作ったサイトで確かめる順番を考えます。

1. 最初のHTMLに本文があるかを見る

WordPressで作った一般的なサイトは、サーバーが本文入りのHTMLを返します。まず、そうなっているかを自分の目で確かめます。

AIのクローラーを想定した確認は、AIクローラーとJavaScriptの記事で実務の手順を扱っています。

確かめる手順は、ブラウザで大事なページを開き、右クリックから「ページのソースを表示」を選ぶことです。表示された文字列の中で、ページの見出しや本文の一文を検索します。

見つかれば、最初のHTMLに本文が入っています。

2. Googleが見た描画後のHTMLを、Search Consoleで見る

公式の説明では、描画後のHTMLを確かめる方法として、リッチリザルトテストかURL検査ツールが挙げられています。Search ConsoleのURL検査で、Googleが描画したHTMLを表示し、その中に本文の一文があるかを探します。

具体的な画面操作は、公式ページには書かれていません。操作は、Search Consoleのヘルプで確かめてください。

ここで本文が見つからなければ、Googleにその内容が見えていない可能性があります。ページのソースにはあるのにここに無い、という食い違いも手がかりです。

3. canonicalとnoindexが、プラグインやタグ管理でぶつかっていないか見る

WordPressでは、SEOプラグイン、テーマ、タグ管理の仕組みが、それぞれcanonicalやrobotsメタタグを出すことがあります。ページのソースでrel=”canonical”を検索し、1件だけかを確かめます。

ブラウザの開発者ツールの「要素」の画面は、描画後の姿です。ページのソース（最初のHTML）と見比べ、canonicalやnoindexが後から変わっていないかを確かめます。

4. 存在しないURLが404を返すかを確かめる

存在しないURLを開いたときに、画面はエラー表示でも、裏のステータスが200だと、ソフト404になります。ブラウザの開発者ツールの「ネットワーク」で、ステータスコードを見られます。

アプリ型のサイトを制作会社に作ってもらった会社は、本文がサーバー側で描画されているか、存在しないURLが404を返すかを、制作会社に尋ねてみてください。

弊社のサイトで確かめたこと

2026年11月5日に、kenkyo.aiに対して次の確認を行いました。JavaScriptを動かさず、サーバーが返す最初のHTMLだけを読んだ結果です。

確認	結果の要点
トップページを取得して読む（curlコマンド）	最初のHTMLに、タグとスクリプトを除いて約1万600字の文章が入っていました。h1、title、メタディスクリプションも入っています
同じページのcanonical、robotsメタタグ	canonicalは1件でした。robotsメタタグはmax-image-preview:largeの指定だけで、noindexはありません
解説記事（リンクの張り方の解説）を取得して読む	最初のHTMLに本文約9,300字、h1、canonical1件、構造化データ1ブロックが入っていました。robotsメタタグにnoindexはありません
ページ内の「#」で始まるリンクの数	トップページと解説記事の両方で0件でした
存在しないURLを取得	ステータスコード404が返りました
robots.txtを取得	Disallowは管理画面の/wp-admin/だけで、admin-ajax.phpはAllowです