技術・構造化応用

PR-071 JavaScriptで表示している部分をAIが読めているか確認したことがない——レンダリング状態を確認する手順

Claude

こんな悩みはありませんか？

自社サイトがReactやVueなどJavaScriptで動的にコンテンツを表示する作りになっている場合、「見た目には表示されているから大丈夫」と思い込んでいませんか。AIクローラーの中にはJavaScriptを実行せずHTMLだけを取得するものもあり、人間のブラウザで見えている本文が、AIには「空白のページ」として扱われている可能性があります。専門知識がないと、この違いに気づくきっかけ自体がありません。

この記事でできるようになること

自社サイトの主要ページについて、本文がHTML内に直接含まれているか、それともJavaScriptで後から描画されているかを、専門知識がなくても手順化して確認できるようになります。

使うプロンプト

入力に必要な素材

対象URL
使用しているフレームワーク・レンダリング方式（わかる範囲。不明なら「不明」でよい）
主要コンテンツがJavaScriptで後から描画される箇所の有無（わかる範囲）

【Claude推奨・ChatGPTでも実行可】

# 役割
あなたはWeb技術の確認手順を整理する担当です。「見た目には表示されているから大丈夫」という思い込みを防ぐため、専門知識がない担当者でも実行できる確認手順を設計する実務経験があります。読み手はエンジニアではないWeb担当者です。

# 入力素材の確認
以下の情報が貼り付けられている前提で作業してください。
- 対象URL
- 使用しているフレームワーク・レンダリング方式（わかる範囲。不明なら「不明」でよい）
- 主要コンテンツがJavaScriptで後から描画される箇所の有無（わかる範囲）
対象URLが貼り付けられていない場合は、手順作成に進まず「対象URLが確認できません。確認したいページのURLを貼り付け直してください」とだけ回答し、そこで処理を止めてください。フレームワーク情報が「不明」でも作業は継続してください。

# サイト構成の情報
- 対象URL: 【対象URL】
- 使用しているフレームワーク・レンダリング方式（わかる範囲）: 【例: React/CSR、Next.js/SSRなど。不明なら「不明」】
- 主要コンテンツがJavaScriptで後から描画される箇所の有無: 【わかる範囲で記載】

# 分析・作業手順
1. 貼り付けられたフレームワーク情報から、CSR（クライアントサイドレンダリング）の可能性が高いか、SSR/SSGの可能性が高いかを推測する（不明な場合はどちらの可能性もある前提で手順を作る）
2. ブラウザの「ページのソースを表示」機能で本文がHTML内に直接含まれているかを確認する手順を作る
3. JavaScriptを無効化した状態での見え方を確認する手順を作る
4. 本文が見えない場合に検討すべき対応の選択肢を整理する
5. 手順の中で専門知識が必要になる判断（SSR化すべきか等）を洗い出し、「専門家・エンジニアへの確認を推奨」と明記する

# 出力してほしいこと
1. ブラウザの「ページのソースを表示」機能で、本文がHTML内に直接含まれているかを確認する手順
2. JavaScriptを無効化した状態、またはテキストブラウザ相当の見え方を確認する手順
3. 確認の結果、本文が見えない場合に検討すべき対応（SSR/SSG化など）の選択肢
4. 断定できない技術的判断には「専門家・エンジニアへの確認を推奨」と明記する

# 出力形式
実行手順は、専門知識がない担当者でも迷わず追える番号リストにしてください。各ステップに「確認する場所」「見るべきポイント」を明記してください。最後に、以下を3行以内で要約してください。
- 確認手順の総ステップ数
- 「専門家・エンジニアへの確認を推奨」とした箇所の数
- 本文が消えていた場合の次の一手

# 品質ガード
- フレームワークの挙動について断定的な説明をせず、確認手順で実際に確かめることを優先する
- 貼り付けられていない情報（実際のクロールログ等）を前提にした判断をしない
- 技術的な最終判断は必ずエンジニアに確認する前提であることを明記する

実行手順

Claudeにプロンプトを実行し、確認手順の番号リストを出力させる
対象ページをブラウザで開き、右クリック→「ページのソースを表示」（view-source:）で、本文テキストがHTMLの中に直接書かれているかを目視で確認する
Google Search Consoleの「URL検査」ツールで対象URLを検査し、「取得したHTML」機能を使って、Googleのレンダリングエンジンがどう本文を認識しているかを確認する
ブラウザの開発者ツールでJavaScriptを無効化した状態でページを再読み込みし、本文が消えるかどうかを確認する
本文が消える・ソース内に見当たらない場合は、SSR（サーバーサイドレンダリング）・SSG（静的サイト生成）への切り替えをエンジニアに相談する

結果の読み解き方

「ページのソースを表示」で本文が見えても、それだけでは全てのAIクローラーが同じように読めるとは断定できません。クローラーごとにJavaScriptの実行有無・実行の深さが異なるためです。
Search Consoleの「取得したHTML」は、あくまでGooglebotの挙動を代理的に確認するものです。ChatGPTやPerplexity等、他社のクローラーの挙動を保証するものではありません。
本文の一部だけが消える（例: 価格だけが後から描画される）ケースもあります。ページ全体だけでなく、価格・FAQ・手順など重要な情報のブロック単位でも確認してください。

注意点

断定できない技術的判断（SSR化すべきか等）は、必ずエンジニアに最終確認を取ってください。AIの提案はあくまで確認の出発点です。
危険な間違い例: 「ソースに本文が見当たらない＝即座にAIに一切読まれていない」と即断しないでください。一部のクローラーは限定的にJavaScriptを実行する場合があり、実際の挙動は各社の公式ドキュメント・自社のクロールログ（サーバーログでのボットのアクセス確認）と合わせて判断する必要があります。
生成AIの技術的な説明は、フレームワークのバージョンアップ等で古くなることがあります。実行時点の公式ドキュメントと必ず照合してください。

確認テスト

選択肢をクリックすると、その場で正誤と解説が表示されます。

Q1. AIクローラーはそれぞれJavaScriptの実行有無・実行の深さが異なるため、本文が見当たらないからといって全クローラーに読まれていないと即断すべきではない。

Q2. Search Consoleの「取得したHTML」機能が代理的に確認するものはどれか。

Q3. 本文がHTML内に見当たらない場合に検討すべき技術対応はどれか。

よくある質問

Q. 開発者ツールでJavaScriptを無効化して確認するのは何のためですか？

JavaScriptに依存せず本文が表示されるか、無効化すると本文が消えるかを確認するためです。

Q. 価格やFAQなど一部の情報だけが後から描画される場合は軽視してよいですか？

いいえ。ページ全体だけでなく、価格・FAQ・手順など重要な情報のブロック単位でも確認すべきとされています。

Q. この記事は技術的な最終判断まで下しますか？

下しません。断定できない技術的判断(SSR化すべきか等)は必ずエンジニアに最終確認を取るよう述べています。