JavaScript SEO：Googleが内容を見られない理由

Chromeで完璧でも、Googleには空タイトルとフッターだけが登録されます。開発はJS実行可能と言い、SEOは露出しないURLを見ます。両方半分だけ正しいです。

描画できても、すべてのアプリの高速取得、正確な理解、完全登録を意味しません。HTML取得、JS描画、結果登録の3段階で診断します。

GoogleによるJSページの処理

段階1：クロール

URL、HTTP、ヘッダー、robots、初期HTMLを読みます。<a>、canonical、タイトル、応答の内容をすでに抽出できます。

404、500、取得遮断、noindexなら実行前に止まる場合があります。

段階2：描画

200ページは待ち行列へ入り、ヘッドレスChromiumがJSと許可資源を実行してDOMを作ります。待機は資源次第です。

段階3：登録

描画HTMLを読み、canonical、品質、重複、可否を評価します。成功だけで保証されず、価値と一貫したシグナルが必要です。

最速のテスト：JSを無効にします

ソース表示かcurlで応答を見ます。実行後DOMのElementsだけに頼りません。

5項目を見ます。

1. タイトルと説明はありますか？
2. H1と主要文章は見えますか？
3. 内部経路は実際の<a href>ですか？
4. canonicalとrobotsは最初から正しいですか？
5. 状態は正しいですか？

<div id="app"></div>だけなら発見は描画依存です。必ず故障ではありませんが、登録と診断を無用に遅くします。

よくある7つの失敗

1. 操作後にしか内容が出ません

Googlebotにタブ、折りたたみ、無限スクロール、「もっと読む」の操作義務はありません。後から取る内容は未発見になる場合があります。

重要内容はHTMLか、登録すべき状態ごとのURLとリンクを用意します。DOM内にすでにある折りたたみは、クリック時取得より安全です。

2. クライアントルートが常に200です

不在表示でも200ならSoft 404です。逆に有効ルートが起動前にサーバー404になる場合もあります。

各URLへ意味のある状態を返します。不在は404、移動は転送、一時障害は5xxです。

3. リンクが取得できません

次は人間には移動でも、信頼できる取得経路ではありません。

<span onclick="goTo('/products')">Products</span>

次を使います。

<a href="/products">Products</a>

本物のURLがあればクライアントルーターで移動を処理して構いません。

4. JSがcanonicalを書き換えます

ソースにあり安定しているべきです。AからBへ変えると段階ごとに矛盾します。noindexの除去も期待しないでください。指示を見て描画を省く場合があります。

5. robotsがバンドルやAPIを遮断します

JS、CSS、公開APIが内容生成に必要な場合、読み込めないと白紙や不完全になります。

非公開 API は保護してください。公開ページのレンダリングとリソース取得は、ブラウザーのネットワークツールと Search Console の URL 検査で確認します。Cloudflare の検出では非公開の WAF ポリシーは検証できません。

6. ストレージ・Cookie・位置に依存します

新規訪問者のようなGooglebotに、トークン、同意Cookie、位置情報後だけ内容を出すと空状態になる場合があります。

有用な標準版を提供し、個別化は強化に使い、URLの主題全体を置き換えません。

7. ハイドレーションが失敗します

SSRの完全HTMLを後のエラーが削除したりDOMを変えたりします。検索が応答を読めてもUXや描画後リンクは壊れます。

本番コンソール、不一致、失敗要求を監視します。ボットや遅い端末のみの失敗は通常QAで見逃しがちです。

CSR・SSR・SSG・ハイブリッド

ブログ、広告、カテゴリー、文書はSSR・SSGが有利です。認証後のダッシュボードは登録不要でCSRが適切です。

ボット専用の動的描画は2版の差と費用を生みます。可能なら同じ事前描画の核を人間とボットへ提供します。

監査の段階的手順

手順1：3版を比較します

次を並べます。

• ソースHTMLです。
• ブラウザー描画DOMです。
• URL検査の描画HTMLや画像です。

ブラウザーだけにある内容は強い手がかりです。

手順2：要求と資源を確認します

403、404、CORS、タイムアウト、robots遮断を探します。1APIの失敗でも領域全体が消えることがあります。

手順3：メタを監査します

タイトル、説明、canonical、robots、構造化データはルート固有にします。前ルートの値保持や未正規化URLからの生成が典型です。

Meta Tag CheckerでURLのタイトル、canonical、OG、見出しが分かります。

手順4：リンクとサイトマップを確認します

内部リンクはhref、一覧は正規URLのみ、各URLは意図した状態です。取得不能な移動は一覧では補えません。

手順5：性能を測ります

大バンドルと長タスクはUXと描画費用を損ないます。Page Speed CheckerでLCP、INP、TBT、未使用JSを見ます。

手順6：ホーム以外も試します

記事、カテゴリー、商品、フィルター、ページ送り、不在URLを抽出します。普段手動で開かないルートに問題が多いです。

典型的な失敗

Vueの求人サイトがmounted後にカードを取得します。カテゴリーH1はソースにあってもカードはJS生成で、@clickを<div>に設定するだけでhrefがありません。

人間は閲覧できても、Googleは一覧のURLと取得可能な経路・内部リンクが伴わず、詳細を発見しづらくなります。XML Sitemap Checkerで改善できます。

Vueを消すのでなく、<a href>へ変更し、初期一覧はサーバー描画、対話フィルターはクライアント、期限切れは真の404にします。現代性を保ち、発見を運任せにしません。

公開前の確認

• 内容がHTMLか安定描画です。
• 有効は200、削除は404/410です。
• 重要経路は<a href>です。
• canonicalとrobotsはソースで安定します。
• 必須資源は取得可能です。
• 新規の空状態が核を置き換えません。
• 移動時のメタ更新は正確です。
• 描画HTMLに構造化データがあります。
• PCとモバイルの核が同等です。
• URL検査と訪問者の見えるものが同じです。

公開後のJavaScript SEO監視

一度の検査は明白な問題を見つけますが、アプリは頻繁に変わります。GSCに傾向が出る前に分かるよう、本番の小さな確認群を加えます。

代表的な公開ルートをHTML層で監視します。

• 期待するタイトルとcanonicalがあります。
• 主見出しと識別可能な文章があります。
• 状態がルートに合います。
• 重要リンクの少なくとも1つに本物のhrefがあります。
• robotsが予期せず変わりません。

正当にハイドレーション依存する内容には、別のブラウザー描画テストを実行します。コンソール、通信失敗、最終canonical、構造化データ、画面を記録します。HTML確認は基礎、描画確認は実アプリを守ります。

流入だけでなくテンプレートで選びます。ホームが正常でも商品、ページ送り、言語ルートは壊れ得ます。各登録テンプレートの安定サンプルと、404必須の不在例を保ちます。

リリース注記も有効です。登録や表示が落ちたとき、ルーター、同意管理、描画基盤、APIの変更時刻が分かれば診断を短縮できます。履歴なしでは、自分の配置の退行をアルゴリズム更新と誤認しがちです。

大規模ではソースと描画DOMを自動比較します。文章やリンクの大半を失う、遅延操作後だけ出る場合に通知します。URL検査の代わりではありませんが、毎日の防げるミスを捕まえます。

全体確認： 代表URLのSEO Checkerと無料SEO監査で反復問題を検出します。

まとめ

JSでSEOが失敗するのではありません。操作後だけの内容、誤状態、hrefなし、遅いメタ変更が損害を生みます。意味ある初期応答、正しいURLと状態を保ち、JSを体験改善に使い、核を隠さないようにします。

参考：Google Search CentralのJavaScript SEO基礎です。