Docs

ChatGPT や Claude は、JavaScript で作られた私のサイトを読めますか？

読めるのは、サーバーが送る HTML にすでに含まれているテキストだけです。Vercel のネットワークを対象にした2024年12月の調査では、OpenAI、Anthropic、Perplexity のクローラーは JavaScript ファイルをダウンロードしますが、実行はしないことがわかりました。多くの React サイトや AI で作られたサイトのように、ページがブラウザで組み立てられている場合、これらのクローラーにはほぼ空のページに見えます。

ファクト

AI クローラーがサイトを読めるかどうかは、どう確かめますか？

ブラウザを使わずに、クローラーと同じ方法でページを取得し、その結果に主要なテキストがあるかを探します。価格、見出し、回答が見つからなければ、AI クローラーもそれを見ていません。

# AI クローラーが受け取るもの: 生の HTML、JavaScript は実行しない
curl -s -A "GPTBot" https://www.example.com/pricing | grep -i "your price or headline"

# 見つからない? テキストは JavaScript の実行後にしか存在しない。

どのような種類のサイトがこの問題を抱えていますか？

ページが読み込まれた後にブラウザで JavaScript によってコンテンツが作られるサイトです：

  • サーバー描画なしで、React、Vue、Angular と Vite で作られたシングルページアプリ
  • クライアント側で描画されるアプリを出荷する、AI アプリビルダーで生成されたサイト
  • 最初の描画の後に API からテキストを読み込むページ
  • 実際の <a href> リンクではなく、クリックハンドラーで作られたメニューやリンク

構成ごとの直し方は何ですか？

完成したテキストを、最初の HTML の応答で送ることが直し方です。

構成コーディングエージェントに頼む内容
Next.js App Routerページは Server Components のままにし、対話が必要な部分だけ "use client" で示す
Vite を使う React や Vue公開ページをビルド時に静的な HTML へプリレンダリングするか、サーバー描画のあるフレームワークに移す
API から読み込むコンテンツuseEffect の中ではなく、サーバーかビルド時に取得する
どのフレームワークでも実際の <a href> リンク、sitemap.xml、クリックせずに見えるテキスト

Google も同じ問題を抱えていますか？

それほどではありません。Google のクローラーは JavaScript を実行するため、Google 検索と Gemini は、クライアントで描画されたテキストも、通常の HTML より遅れてですが見ることができます。ChatGPT、Claude、Perplexity は、生の HTML だけを読むものです。

easyIndex はこれをどう確認しますか？

easyIndex は、公開された各ページを、AI クローラーと同じように、JavaScript を実行せずに自ら読みます。コーディングエージェントが作ったページは、監査されたテキストが公開中のサイトの生の HTML にある場合にだけ、完了とみなされます。

ステップごとの手順

  1. 主要なページを確認する. ホーム、料金、主なサービスのページで curl のテストを実行し、主要なテキストを探します。
  2. テキストがどこで組み立てられているかを見つける. どのページがブラウザでコンテンツを描画しているか、またその理由を、コーディングエージェントに尋ねます。
  3. テキストをサーバーに移す. エージェントにそれらのページをサーバー描画または静的プリレンダリングに切り替えてもらい、対話機能は必要な場所だけに残します。
  4. リンクとサイトマップを直す. 内部リンクはすべて実際の <a href> にし、公開ページはすべて sitemap.xml に載せます。
  5. 公開中のサイトで再テストする. デプロイ後に curl のテストを繰り返します。テキストが生の HTML に現れている必要があります。

よくある間違い

  • JavaScript を実行するブラウザでページを確認し、クローラーも同じものを見ていると思い込むこと。
  • ホームはサーバーで描画しているのに、料金ページやサービスのページはブラウザで描画したままにすること。
  • 描画を直している間に、robots.txt や CDN で AI クローラーを誤ってブロックすること。
  • フレームワークがすでにサーバーで描画している場合に、プリレンダリングの層に費用を払うこと。

easyIndex での解決方法

コーディングエージェントが、MCP で案内されながら、リポジトリ内の描画を直します。easyIndex は、AI クローラーと同じく JavaScript を実行せずに各ページを公開中のサイトで読み、その後、AI クローラーが実際に読んだページを記録します。料金は1サイトあたり月額 US$30 で、7日間の無料トライアルがあります。

よくある質問

Next.js のサイトは初期設定で安全ですか？

ほとんどの場合は安全です。App Router のページはデフォルトでサーバー描画されます。ただし、読み込み後に Client Component の中で取得されたテキストは、今も AI クローラーには見えません。

llms.txt ファイルは JavaScript の問題を解決しますか？

いいえ。短いテキストファイルにすぎません。クローラーがページを読んで引用するには、ページ自体のテキストが HTML に含まれている必要があります。

AI クローラーは今後 JavaScript を実行するようになりますか？

誰にもわかりません。2024年12月の調査の時点では実行していませんでした。安全なのは、テキストを HTML で送ることです。

これは ChatGPT から来た訪問者に影響しますか？

いいえ。人は JavaScript を実行する通常のブラウザでサイトを開きます。問題になるのは、引用の前にクローラーが読む内容だけです。

続きを読む

最終確認日 .

JavaScript と AI クローラー：ChatGPT はサイトを読めるか