ReactのサイトがAIから見えない問題 — 実際に直した記録
これは他人事の解説ではなく、当サイト自身の失敗と修正の記録です。技術SEO診断ツールのサイトでありながら、生HTMLの本文はわずか8文字で、AIクローラーからはほぼ白紙に見えていました。どう発見し、どう直したかをそのまま公開します。
公開日: 2026年8月16日 ／ 最終更新日: 2026年9月6日
何が起きていたか
当サイトのフロントエンドはReact（Vite）のシングルページアプリケーションです。ブラウザで開けば数千字のコンテンツが表示されますが、それはJavaScriptが実行された後の姿です。
サーバーが最初に返すHTMLを確認したところ、タグを除いた本文はわずか8文字でした。GoogleはJavaScriptを実行するため検索では致命傷になっていませんでしたが、GPTBotやClaudeBotなどのAIクローラーはJavaScriptを実行しません。AI検索の視点では、本文のないサイトだったということです。
AI検索対応を診断する製品のサイトがAIから見えない。笑えない状態でした。同じ構造のサイトは世の中に大量にあります。
自分のサイトで確認する方法
ブラウザの表示ではなく、サーバーが返す生のHTMLを見ます。次のコマンドで、タグを除いた本文の文字数を数えられます。
生HTMLの本文量を確認する
curl -s https://example.com/ | sed 's/<[^>]*>//g' | tr -d ' \n\t' | wc -cこの数字が数十文字しかなければ、あなたのサイトも同じ状態です。React・Vue・Angularでクライアントサイドレンダリングのみのサイトは、ほぼ確実に該当します。
解決の選択肢と、当サイトの選択
教科書的な解決はNext.js等へのフレームワーク移行（サーバーサイドレンダリング）ですが、動いているアプリの全面書き換えは大工事です。当サイトは別の道を選びました。
「公開ページだけ、ビルド時に静的HTMLを生成する」方式です。アプリ本体（ログイン後の診断画面）はSPAのまま、検索とAIに見せたい公開ページ（トップ・料金・記事）だけ、ビルド工程でページ別の完全なHTMLを書き出します。
- ページ別のtitle・meta description・canonical・OGPを生成
- 本文の静的HTML（見出し・段落・FAQ）を生成し、Reactのマウントで置き換わる構造に
- 構造化データ（Organization・FAQPage・TechArticle）を付与
- sitemap.xmlも生成URLから自動生成
結果、トップページの生HTML本文は8文字から3,865字になりました。フレームワーク移行なし、アプリ本体は無変更です。
最重要の注意点: クローキングにしない
この方式には1つだけ絶対条件があります。静的に生成する内容を、実際にブラウザで表示される内容と一致させることです。
クローラーにだけ別の内容を見せる行為はクローキングと呼ばれ、Googleのスパムポリシー違反です。静的HTMLはあくまで「JSが実行される前の下書き」であり、Reactがマウントした後の画面と同じ情報でなければなりません。当サイトの実装でも、生成内容は表示内容の要約・同一情報に限定しています。
同じ問題を抱えているかの診断
Smash SEOの診断は、初期HTMLとJavaScript描画後のHTMLを両方取得し、その差分を表示します。「Googleには見えているがAIには見えていない」コンテンツがどれだけあるかを、ページ単位で確認できます。React/Vue製のサイトを運用しているなら、一度確認する価値があります。
よくある質問
Next.jsに移行すべきですか？
新規開発ならSSR/SSG対応のフレームワークを推奨します。既存SPAの場合、移行コストと得られる効果を比べてください。公開ページが少ないなら、当サイトのようなビルド時生成のほうが現実的なことが多いです。
プリレンダリングサービス(prerender等)はどうですか？
クローラー判定でレンダリング済みHTMLを返す方式は機能しますが、外部サービス依存とクローキング境界の管理が必要です。自前のビルド時生成のほうが挙動を完全に制御できます。
GoogleがJSを実行するなら、検索だけ考えれば放置でよいのでは？
Googleのレンダリングも即時ではなく、遅延や失敗はあり得ます。そしてAI検索の比重が増すほど「JSなしで読めない」ことの機会損失は拡大します。直せるなら直すべき、というのが当サイト自身の結論です。
関連記事
- コンテンツが少ない（薄いページ）
内容量が少ないページは、検索エンジンから「ユーザーの検索意図を満たさないページ」と判断されやすくなります。ただし文字数が少ないこと自体が問題なのではなく、目的を果たせているかが本質です。 - サイトがインデックスされない12の原因と確認手順
インデックスされない原因は多くの場合、この12個のどれかです。上から順に確認すれば、原因の切り分けに漏れがなくなります。各項目に確認方法と、詳しい直し方への案内を付けています。 - AIクローラーの許可・ブロック設定（GPTBot / ClaudeBot / PerplexityBot）
AIクローラーはrobots.txtに従います。重要なのは、多くのAI事業者が「学習用」と「回答生成用」で別々のボットを運用している点です。区別せずに一括ブロックすると、AI検索の回答に自社が一切登場しなくなります。 - titleタグが設定されていない
titleタグは、そのページが何かを検索エンジンとユーザーに伝える最も基本的な要素です。未設定の場合、検索エンジンは本文やURLから見出しを推測して表示するため、意図した訴求ができず、順位にも不利に働きます。