AIクローラーがあなたのサイトを読めるか確認するClaude Codeスキルを作りました

多くのウェブサイトはJavaScriptに依存してコンテンツをレンダリングしていますが、AIクローラー（ClaudeBot、GPTBot、PerplexityBot、Bytespider、Meta-ExternalAgent）はJavaScriptを実行しません。それらはサーバーが返す生のHTMLのみを読み取ります。つまり、Googleでは良好にランキングされているクライアントサイドレンダリングのサイト（React、Vue、Svelteなどで構築されたSPA）が、AI検索結果では完全に表示されない可能性があります。「GoogleからのトラフィックはあるのにAIからのトラフィックがゼロだ」と感じたことがあるなら、あるいはスタイリッシュなSPAをリリースしたのにChatGPTにまったく表示されないなら、ほぼ常にこれが原因です。

この問題に対処するため、作者はAIクローラーに対するサイトの可視性をチェックするClaude Codeスキルを開発しました。このスキルは、非JSクローラーを模倣してページの生のHTMLを取得し、実際のコンテンツや重要なSEOシグナル（タイトル、メタディスクリプション、正規URL、Open Graph、JSON-LD、クロール可能なリンク）が存在するかを評価します。各ページは「✅ VISIBLE（可視）」— 生のHTMLに実際のコンテンツがあり、クローラーが読める状態、「⚠️ PARTIAL（部分的）」— 生のHTMLには一部しかなく、メインコンテンツはJSでレンダリング、「❌ INVISIBLE（不可視）」— クローラーが空のシェルを受け取り、有用なものは何もない、のいずれかに判定されます。このスキルは診断と処方のみを行い、マーケティングコピーを書いたり、キーワード調査をしたり、バックリンクを追跡したりしません。

インストールは非常に簡単です。プロジェクトフォルダをClaude Codeのスキルディレクトリに配置するだけです。個人用：git clone ... ~/.claude/skills/ai-crawler-visibility、プロジェクトスコープ：git clone ... ./.claude/skills/ai-crawler-visibility。npm install、APIキー、サードパーティパッケージは不要で、分析はプレーンなPython 3で動作します。

使い方：Claude Codeに自然言語で話しかけるだけでスキルが自動的にトリガーされます。例えば「なぜ私のサイトはChatGPTに表示されないの？」、「私の新しいサイトはAI検索エンジンに見えていますか？」、「JSON-LDを追加したのにリッチリザルトがまだ表示されない」など。バンドルされた分析スクリプトを直接実行することもできます：python3 scripts/check_visibility.py https://thesite.com、複数ページやサイトマップからのサンプリング（--sitemap と --limit）もサポート。--json を追加してプログラム的に結果を処理できます。必ず本番URLを確認してください。ローカル開発サーバーはデプロイされたサイトがクローラーにどのように提供されるかを反映しません。

レポート例：すべてのURLの判定結果をリストし、クローラーが実際に何を見ているか（例：/ は可視単語数0、メタディスクリプション、正規URL、Open Graph、JSON-LD、クロール可能なリンクが欠落）、修正手順（影響が大きい順）、そして修正を確認する方法（ページソースを表示して見出しテキストとJSON-LDが生のHTMLにあることを確認）を示します。

このスキルは診断だけでなく、フレームワーク固有の具体的な修正手順も提供します。例えば、単に「SSRを検討してください」と言うのではなく、特定のプリレンダリングツールやJSON-LDの静的な挿入を提案します。各修正には、問題が解決されたことを確認するための検証手順も含まれています。開発者以外のために、作者は有料のAIクローラーフィクサーパックも提供しており、静的SEO + JSON-LDをindex.htmlに自動注入し、ビルド後プリレンダリングを設定し、承認ゲートを介してコードベースに触れずに修正を適用し、その後診断を再実行して修正が反映されたことを確認します。診断機能は常に無料です。

仕組みの簡単な説明：ページを見えなくするのはUser-Agentではなく、JavaScriptを実行しないことです（スクリプトはサーバーサイドプリレンダリングを検出するために実際のボットUAを2番目のリクエストとして送信します）。JavaScriptで注入されたJSON-LDはレンダリングしないクローラーには見えません。生のHTMLに含まれていなければなりません。ハイドレーションは問題ありません。既にレンダリングされたHTMLにハンドラをアタッチするため、コンテンツは既にそこにあります。純粋なクライアントサイドレンダリング（CSR）が問題です。「ページソースを表示」は生のHTML（クローラーが見るもの）を表示し、「検証」はレンダリングされたDOM（クローラーが見ないもの）を表示します。常にページソース表示で確認してください。

このプロジェクトはMITライセンスで、Novae Systems（地元企業向けのウェブサイト、AI自動化、SEOを提供）によって構築されました。