コラムColumn

TOPコラムblogJavaScript SEOとは？Googleのレンダリングの仕組みと対策、確認方法を解説

JavaScript SEOとは？Googleのレンダリングの仕組みと対策、確認方法を解説

「JavaScriptで作ったサイトが、思うように検索結果に表示されない」「サイトをリニューアルしてから、検索順位が下がった」と悩むWeb担当者は少なくありません。

ReactやVue.jsなどのフレームワークで作られたサイトが増えるなかで、JavaScriptで表示する内容を検索エンジンに正しく読み取らせる「JavaScript SEO」の重要性が高まっています。

Googleは、JavaScriptを実行してページを読み取れるようになっています。ただし、実装の方法によっては、本文やリンクが読み取られなかったり、インデックスへの反映が遅れたりすることがあります。

本記事では、JavaScript SEOの意味、GoogleがJavaScriptを処理する仕組み、レンダリング方式の違い、起こりやすい問題と対策、正しく読まれているかの確認方法、開発会社と進めるときのポイントまでを順番に解説します。

確認したいポイント結論詳細
GoogleはJavaScriptをどう処理する？クロール、レンダリング、インデックス登録の3段階レンダリングは待ち行列で順番に行われるため、JavaScriptで表示する本文やリンクの認識には時間差が生じることがあります。
SEOに向くレンダリング方式は？最初のHTMLに内容が入るSSRやSSGが基本CSRは検索に出す必要のない画面向きです。ダイナミックレンダリングはGoogleが回避策と位置づけています。
正しく読まれているか確認するには？URL検査ツールでレンダリング後のHTMLを確認本文やリンクが含まれているか、読み込めないリソースやエラーがないかを、公開時や実装の変更時に確認します。

JavaScript SEOとは？JavaScriptで作るページを検索エンジンに正しく伝える取り組み

JavaScript SEOとは、JavaScriptを使って作られたWebサイトやページを、検索エンジンが正しくクロールし、内容を理解し、インデックスに登録できるようにするための取り組みです。テクニカルSEOの一分野であり、主に実装やサイトの設計に関わる内容が中心です。

ここでは、JavaScriptで作られたページが増えている背景と、専用の対策が必要になる理由を整理します。

JavaScriptで作られたページが増えている背景

かつてのWebサイトは、サーバーが完成したHTMLを返し、ブラウザはそれを表示するだけという仕組みが一般的でした。現在は、ブラウザの側でJavaScriptを実行し、データを取得して画面を組み立てる仕組みのサイトが増えています。

特に、ページを移動しても画面全体を読み込み直さない「SPA（シングルページアプリケーション）」は、アプリのようになめらかに操作できる点が評価され、ECサイトや会員サイト、Webサービスなどで広く使われています。ユーザーにとって快適な仕組みである一方で、検索エンジンにとっては内容を読み取るための手間が増える仕組みでもあります。

JavaScript SEOが必要になる理由

一般的なHTMLのページであれば、検索エンジンはサーバーから受け取ったHTMLを読むだけで、本文やリンクを把握できます。一方で、JavaScriptで内容を組み立てるページでは、最初に受け取るHTMLがほとんど空の状態で、JavaScriptを実行して初めて本文が表示されることがあります。

この場合、検索エンジンがJavaScriptを実行できなかったり、実行に失敗したりすると、ページに何が書かれているのかを把握できず、検索結果に表示されない原因になります。サイトのデザインや機能が優れていても、検索エンジンに内容が伝わらなければ、検索からの集客にはつながりません。

インデックスされない原因は、JavaScript以外にもさまざまなものがあります。全体像は「Googleにインデックスされない原因と対処法」で解説しています。

GoogleがJavaScriptを処理する3つの段階

Google検索セントラルのJavaScript SEOの基本に関するページでは、GoogleはJavaScriptを使ったページを「クロール」「レンダリング」「インデックス登録」の3つの段階で処理すると説明されています。どの段階でつまずいているかを知ることが、問題を解決するための第一歩です。

ここでは、3つの段階の流れと、Google以外のクローラーの扱いを解説します。

クロール：HTMLを取得してリンクをたどる

最初の段階では、GooglebotがURLにアクセスし、サーバーから返されたHTMLを取得します。このとき、Googlebotはrobots.txtを確認し、クロールが許可されているかを判断します。robots.txtでブロックされているURLは、クロールもレンダリングも行われません。

取得したHTMLの中にある<a href>のリンクは、この段階で次にクロールするURLとして登録されます。JavaScriptを実行しないと現れないリンクは、次のレンダリングの段階まで発見が遅れることになります。

レンダリング：JavaScriptを実行してページを組み立てる

HTTPステータスコード200を返したページは、レンダリングの待ち行列（キュー）に入ります。Googleの資源に余裕ができると、最新のChromiumをもとにしたヘッドレスブラウザがページを読み込み、JavaScriptを実行してページを組み立てます。

Googleは、ページがキューで待つ時間は数秒の場合もあれば、それ以上かかる場合もあると説明しています。JavaScriptで表示する本文やリンクは、このレンダリングが終わるまでGoogleに認識されないため、反映に時間差が生じることがあります。

インデックス登録：組み立てた内容を解析して登録する

レンダリングが終わると、Googleは組み立てられたHTMLを解析し、内容をインデックスに登録します。レンダリング後のHTMLに含まれるリンクも、ここでクロールの対象として追加されます。

なお、元のHTMLにnoindexが含まれている場合、Googleはレンダリングを省略することがあります。この仕組みは、後ほど解説する「JavaScriptでnoindexを外す」実装が失敗する原因にもなります。

Google以外の検索エンジンやAIのクローラーの場合

GoogleはJavaScriptの実行に対応していますが、すべての検索エンジンやクローラーが同じように処理できるとは限りません。生成AIのサービスが使うクローラーの中には、JavaScriptを実行せずに元のHTMLだけを読み取るものもあるといわれています。

AIの回答で引用されることも意識するなら、重要な内容をJavaScriptに頼らず、最初のHTMLに含めておく設計がより安全です。AIの検索への対応については「AI SEOとは？AI時代の検索対策」で解説しています。

レンダリング方式の違いとSEOへの影響

JavaScriptを使ったサイトでは、ページのHTMLを「どこで」「いつ」作るかによって、いくつかのレンダリング方式があります。どの方式を選ぶかによって、検索エンジンへの内容の伝わりやすさや表示速度が大きく変わります。

ここでは、代表的な方式の特徴と、SEOの観点での向き不向きを整理します。

CSR（クライアントサイドレンダリング）

CSRは、サーバーからはほとんど空のHTMLとJavaScriptのファイルを返し、ブラウザでJavaScriptを実行して画面を組み立てる方式です。ページを移動したときの動きがなめらかで、アプリのような操作感を作りやすい点が特徴です。

一方で、本文がJavaScriptの実行後にしか現れないため、検索エンジンへの伝わり方はレンダリングの成否に左右されます。初回の表示も遅くなりやすく、管理画面やログイン後の画面など、検索結果に表示する必要のないページに向いた方式です。

SSR（サーバーサイドレンダリング）

SSRは、ユーザーや検索エンジンからアクセスがあるたびに、サーバーでJavaScriptを実行してHTMLを組み立ててから返す方式です。最初に受け取るHTMLに本文やリンクが含まれているため、検索エンジンは内容をすぐに把握できます。

Googleも、ユーザーと検索エンジンの両方にとって表示が速くなる方法として、SSRや事前に作るレンダリングを勧めています。ただし、アクセスのたびにサーバーで処理を行うため、サーバーの負荷や運用の手間が増える点には注意が必要です。

SSG（静的サイト生成）とISR

SSGは、サイトを公開する前のビルドの段階で、すべてのページのHTMLを作り置いておく方式です。完成したHTMLを配信するだけなので表示が速く、検索エンジンにも内容が伝わりやすい方式です。

ただし、ページ数が多かったり、内容が頻繁に変わったりするサイトでは、ビルドに時間がかかります。必要なページだけを一定の間隔で作り直す「ISR」などの仕組みを組み合わせると、速さと更新のしやすさを両立しやすくなります。Next.jsやNuxtなどのフレームワークでは、ページごとに方式を選べるものも多くあります。

ダイナミックレンダリングはあくまで回避策

ダイナミックレンダリングとは、アクセスしてきたのが検索エンジンのクローラーかどうかを判定し、クローラーにだけサーバーで組み立てたHTMLを返す方式です。かつてはJavaScriptのサイトの対策として紹介されることがありました。

現在、Googleはダイナミックレンダリングを長期的な解決策ではなく回避策と位置づけ、SSRや静的なレンダリング、ハイドレーションを使うよう勧めています。仕組みが複雑で運用の負担も大きいため、新しく導入する場合は、まずSSRやSSGを検討するのが基本です。ユーザーとクローラーに大きく異なる内容を見せると、クローキングと判断される恐れもあります。

【JavaScriptで作ったサイトのSEOが不安な方へ】
「リニューアル後に検索からの流入が減った」「開発会社にSEOの要件をうまく伝えられない」という方に向けて、合同会社楽々Editではサービス内容や支援実績を整理した資料を無料で提供しています。社内での検討資料としてご活用ください。
→ サービス資料を無料でダウンロードする

JavaScriptのサイトで起こりやすいSEOの問題

JavaScriptのサイトでは、見た目には問題がなくても、検索エンジンにとっては読み取りにくい実装になっていることがあります。よくある問題を知っておくと、開発の段階で防いだり、原因を早く見つけたりしやすくなります。

ここでは、特に起こりやすい6つの問題を解説します。

リンクが<a href>の形になっていない

Googleがリンクとしてたどれるのは、基本的にhref属性にURLを持つ<a>要素です。ボタンや<span>要素にクリックの処理を割り当て、JavaScriptでページを移動させる実装では、Googlebotがリンク先を発見できないことがあります。

<!– たどれるリンク –>

<a href=”/products/item-a”>商品A</a>

<!– たどれない可能性があるリンク –>

<span onclick=”goTo(‘/products/item-a’)”>商品A</span>

内部リンクが正しく認識されないと、下層のページが発見されにくくなり、サイト全体の評価にも影響します。リンクの文言の付け方は「アンカーテキストとは？SEOに効果的な書き方」もあわせて参考にしてください。

#（フラグメント）で内容を切り替えている

URLの「#」以降の部分（フラグメント）は、本来はページ内の位置を示すためのものです。「example.com/#/products」のように、フラグメントで別の内容を表示する実装では、Googleは別のページとして扱わないことがあります。

ページごとに独立したURLを持たせるために、History APIを使って「example.com/products」のような通常のURLで内容を切り替えるのが基本です。検索結果から直接そのURLにアクセスしたときに、正しい内容が表示されるかも確認しておきましょう。

存在しないページが200を返す（ソフト404）

SPAでは、存在しないURLにアクセスしても、サーバーはいったんステータスコード200を返し、JavaScriptで「ページが見つかりません」と表示する実装がよくあります。Googleは、このような状態を「ソフト404」として扱います。

Googleは対策として、404を返すURLへJavaScriptでリダイレクトする方法や、エラーページにnoindexを追加する方法を紹介しています。エラーページが正常なページとしてインデックスされると、質の低いページが増える原因になります。

JavaScriptでnoindexやcanonicalを操作している

元のHTMLにnoindexを入れておき、JavaScriptで後から外す実装は避けるべきです。Googleは元のHTMLでnoindexを見つけるとレンダリングを省略することがあるため、JavaScriptで外した結果が反映されない恐れがあります。

canonicalタグも、元のHTMLで指定するのが基本です。JavaScriptで設定する場合は、元のHTMLの指定と同じURLにし、canonicalタグが複数ある状態や、元のHTMLとレンダリング後で内容が異なる状態は避けましょう。重複したページの扱いは「重複コンテンツとは？SEOへの影響と対処法」で詳しく解説しています。

robots.txtでJavaScriptやCSSのファイルをブロックしている

robots.txtで、JavaScriptやCSSのファイルが置かれたディレクトリへのアクセスを禁止していると、Googlebotはページを正しく組み立てられません。サーバーの負荷を減らす目的で設定したものが、思わぬ形で影響していることもあります。

ページの表示に必要なファイルはクロールを許可し、Googlebotがユーザーと同じ状態でページを見られるようにすることが大切です。APIからデータを取得してページを組み立てる場合は、そのAPIのURLもブロックしていないか確認しましょう。

クリックやスクロールをしないと内容が表示されない

Googlebotは、ページ上のボタンをクリックしたり、タブを切り替えたりといった操作は基本的に行いません。「もっと見る」ボタンを押さないと読み込まれない本文や、操作をしないと表示されない商品の一覧は、Googleに認識されないことがあります。

検索で評価してほしい内容は、操作をしなくてもページを読み込んだ時点でHTMLに含まれている状態にしておくのが確実です。無限スクロールを使う場合は、ページ番号ごとのURLを用意し、<a href>のリンクでたどれるようにしておきましょう。

JavaScript SEOの対策方法

JavaScript SEOの対策は、「検索エンジンが読み取れる形で内容を届けること」と「ページを速く表示すること」の2つに分けて考えると整理しやすくなります。すべてを一度に行う必要はなく、検索からの集客に関わるページから優先的に取り組みましょう。

ここでは、具体的な7つの対策を解説します。

重要な内容は最初のHTMLに含める

最も効果が大きいのは、本文、見出し、内部リンク、タイトルなどの重要な情報を、サーバーから返す最初のHTMLに含めることです。SSRやSSGを使えば、JavaScriptの実行に頼らずに内容を届けられます。

基本の内容はHTMLで提供し、JavaScriptは操作性や見た目を高めるために使う「プログレッシブエンハンスメント」の考え方を取り入れると、検索エンジンにもユーザーにも安定してページを届けられます。サイト全体をSSRに変えるのが難しい場合は、検索からの流入を狙うページだけでも対応を検討しましょう。

タイトルとメタディスクリプションをページごとに設定する

SPAでは、すべてのページで同じタイトルやメタディスクリプションが表示されてしまう実装が起こりがちです。Googleは、ページごとに内容を表す固有のタイトルとメタディスクリプションを設定するよう勧めています。

JavaScriptで設定することも可能ですが、SSRの段階でページごとのタイトルやメタディスクリプションをHTMLに出力しておくほうが確実です。SSRとブラウザ側の処理で異なるタグが二重に入らないよう、設定する場所を一本化しておきましょう。

正しいHTTPステータスコードを返す

ページの状態に応じて、正しいHTTPステータスコードを返すことも大切です。存在するページには200、存在しないページには404、移転したページには301を返すのが基本です。

SPAの場合は、ブラウザ側の画面遷移だけでなく、サーバーがURLごとに正しいステータスコードを返しているかを確認しましょう。SSRを使うフレームワークでは、データが見つからない場合に404を返す仕組みが用意されていることが多いため、開発者に確認しておくと安心です。

構造化データを正しく出力する

構造化データは、JavaScriptでJSON-LDを生成してページに追加することもできます。Googleは、JavaScriptで構造化データを追加する場合でも、実装後にテストを行うよう勧めています。

商品の価格や在庫、記事の公開日など、変化する情報を構造化データに含める場合は、画面の表示内容と構造化データの内容が一致しているかを確認しましょう。リッチリザルトテストを使えば、レンダリング後に構造化データが認識されているかを確認できます。

画像の遅延読み込みを正しく実装する

画面の外にある画像をあとから読み込む「遅延読み込み」は、表示速度の改善に役立ちます。ただし、スクロールの動きを検知して読み込む独自の実装では、スクロールを行わないGooglebotに画像が認識されないことがあります。

ブラウザに組み込まれたloading=”lazy”の属性を使うなど、画面に表示されたときに読み込む仕組みにしておくと、Googleにも画像が認識されやすくなります。ページの最初に表示される大きな画像には遅延読み込みを使わず、すぐに読み込むようにしましょう。

JavaScriptを軽くして表示速度を改善する

JavaScriptのファイルが大きいと、ダウンロードや実行に時間がかかり、ページの表示が遅くなります。表示速度は、ユーザーの体験を測る指標であるCore Web Vitalsにも関わります。

使っていないコードを削除する、ページごとに必要なコードだけを読み込む（コード分割）、外部のタグを整理するなどの方法で、JavaScriptの量を減らすことが表示速度の改善につながります。表示が遅くなる原因と改善方法は「Webサイトの表示が遅い原因と改善方法」で解説しています。

ファイル名にフィンガープリントを付ける

Googleのレンダリングの仕組みは、キャッシュの設定を無視して、以前に取得した古いJavaScriptやCSSのファイルを使うことがあります。古いファイルが使われると、更新した内容がGoogleに正しく反映されない恐れがあります。

「main.2bb85551.js」のように、ファイルの内容に応じて変わる文字列（フィンガープリント）をファイル名に含めておくと、内容を更新するたびに新しいファイルとして扱われます。多くのフレームワークやビルドツールでは、この仕組みが標準で用意されています。

【技術的なSEOの課題を専門家に相談したい方へ】
「自社のサイトの実装がSEOに合っているか判断できない」という方に向けて、合同会社楽々Editでは、サイトの状況を分析し、優先して取り組むべき施策を整理するSEOコンサルティングを提供しています。開発会社との調整が必要な場面もサポートします。
→ SEOコンサルティングの詳細を見る

Googleに正しく読まれているかを確認する方法

JavaScript SEOでは、ブラウザで見た画面に問題がなくても、Googleが同じ内容を認識しているとは限りません。実装を変えたときやサイトを公開したときには、Googleから見たページの状態を確認する習慣をつけましょう。

ここでは、無料で使える5つの確認方法を解説します。

Search ConsoleのURL検査ツールで確認する

Search ConsoleのURL検査ツールでは、Googleがそのページをインデックスに登録しているか、登録されていない場合はどのような理由かを確認できます。「公開URLをテスト」を実行すると、Googlebotが現在のページをどのように取得し、組み立てたかを確認できます。

テストの結果からは、レンダリング後のHTML、ページのスクリーンショット、読み込めなかったリソース、JavaScriptのエラーなどを確認できます。レンダリング後のHTMLに本文やリンクが含まれているかを確認することが、最も基本的なチェックです。

リッチリザルトテストで確認する

リッチリザルトテストは、構造化データを確認するためのツールですが、Search Consoleの権限がないページでも、レンダリング後のHTMLやスクリーンショットを確認できる点が便利です。公開前の競合調査や、別のドメインで作ったページの確認にも使えます。

構造化データをJavaScriptで出力している場合は、このテストで構造化データが検出されているかもあわせて確認しましょう。

元のHTMLとレンダリング後のHTMLを比べる

ブラウザで「ページのソースを表示」を開くと、サーバーから返された元のHTMLを確認できます。一方で、開発者ツールの「要素」の画面では、JavaScriptを実行したあとのHTMLを確認できます。

2つを比べて、本文、見出し、リンク、タイトル、canonicalなどが元のHTMLに含まれているかを確認すると、JavaScriptへの依存度を把握できます。ブラウザの設定でJavaScriptを無効にしてページを開く方法も、簡単な確認として役立ちます。

検索結果で本文の文言を検索する

Googleの検索窓で「site:ドメイン名」と、ページ内の特徴的な一文を組み合わせて検索すると、その文言がインデックスされているかを大まかに確認できます。JavaScriptで表示している部分の文言で検索しても見つからない場合は、レンダリングがうまくいっていない可能性があります。

ただし、site:検索の結果は目安であり、正確な登録の状況はSearch Consoleで確認するのが基本です。新しいページを早く認識させる方法は「Googleへの検索登録の方法」で解説しています。

インデックス登録とクロールの統計情報を定期的に見る

Search Consoleの「ページのインデックス登録」レポートでは、サイト全体でインデックスされていないページの数と理由を確認できます。「クロール済み – インデックス未登録」や「ソフト404」が急に増えた場合は、JavaScriptの実装の変更が影響していないかを調べましょう。

「クロールの統計情報」レポートでは、Googlebotが取得しているJavaScriptやCSSのファイルの状況も確認できます。一般的なアクセス解析のツールでは、Googlebotの動きを正確に把握できないため、Search Consoleのデータをあわせて確認することが大切です。

開発会社やエンジニアと進めるときのポイント

JavaScript SEOの対策は、マーケティングの担当者だけで完結するものではなく、実装を担う開発会社やエンジニアとの連携が欠かせません。SEOの要件が開発の後半になって伝わると、大きな手戻りや追加の費用が発生しやすくなります。

ここでは、社内外の開発チームと進めるときの3つのポイントを解説します。

設計の段階でSEOの要件を共有する

レンダリング方式は、サイトの設計の初期段階で決まることが多く、あとから変更するには大きな工数がかかります。サイトを作る目的に検索からの集客が含まれる場合は、要件定義の段階でその点を開発チームに伝えておきましょう。

共有しておきたい要件の例は、次のとおりです。

・検索からの流入を狙うページの範囲

・ページごとに固有のURL、タイトル、メタディスクリプションを持たせること

・本文と内部リンクを最初のHTMLに含めること

・URLごとに正しいHTTPステータスコードを返すこと

・構造化データやサイトマップの出力方法

「どのページを検索で上位に表示させたいか」を最初に伝えることで、ページごとに適したレンダリング方式を選びやすくなります。

リニューアルの前後で状態を比べる

既存のサイトをJavaScriptのフレームワークで作り直す場合は、公開の前にテスト環境でURL検査やレンダリングの確認を行いましょう。URLが変わる場合は、古いURLから新しいURLへの301リダイレクトの設定も必要です。

公開の前後で、インデックスされているページの数、主要なキーワードの順位、検索からの流入を比べられるように、事前に数値を記録しておくことが大切です。順位が下がった場合の原因の切り分けは「検索順位が下がった原因と対処法」も参考にしてください。

公開後も監視の仕組みを整える

JavaScriptのサイトは、ライブラリの更新や機能の追加によって、ある日突然レンダリングに失敗するようになることがあります。ユーザーの画面では問題がなくても、Googlebotの環境だけでエラーが起きているケースもあります。

JavaScriptのエラーを記録するツールの導入や、Search Consoleのレポートの定期的な確認を、運用の手順に組み込んでおきましょう。主要なページについては、大きな更新のたびにURL検査ツールで確認する運用にすると、問題に早く気づけます。

【まずは自社のサイトの状況を相談したい方へ】
「JavaScriptのサイトで検索からの流入が伸びない」「リニューアルの前にSEOの観点で確認してほしい」という方は、合同会社楽々Editの無料相談をご利用ください。現在の状況をお伺いしたうえで、優先して確認すべき点をお伝えします。
→ 無料相談を予約する

まとめ

JavaScript SEOとは、JavaScriptで作られたページを、検索エンジンが正しくクロールし、内容を理解してインデックスに登録できるようにする取り組みです。GoogleはJavaScriptを実行できますが、レンダリングの待ち時間や実装の問題によって、内容が認識されなかったり、反映が遅れたりすることがあります。

最も大切なのは、本文、内部リンク、タイトルなどの重要な情報を、SSRやSSGを使って最初のHTMLに含めることです。あわせて、<a href>のリンク、History APIを使ったURL、正しいステータスコード、noindexやcanonicalの扱いなど、検索エンジンが読み取りやすい実装を心がけましょう。

実装したあとは、URL検査ツールやリッチリザルトテストで、Googleから見たページの状態を確認することが欠かせません。JavaScript SEOは開発チームとの連携が鍵になるため、設計の段階からSEOの要件を共有し、公開後も定期的に状態を確認する体制を整えていきましょう。

コラム一覧へ戻る