Why Your Vibe Coded Website May Never Rank on Google

Translated for your language. 原文を読む.

AI-assisted draft.

なぜ「バイブス重視（Vibe-coded）」のウェブサイトはGoogleでランクインできないのか

先月、ある創業者が素晴らしいウェブサイトを見せてくれました。洗練されたアニメーションと、キレのあるコピーが特徴的なサイトでした。彼はAIツールを使い、わずか午後のひとときでそれを構築したのです。

3ヶ月後、そのサイトはGoogle上で存在感が皆無でした。自身のブランド名で検索しても、表示すらされなかったのです。

これが「バイブス重視（Vibe-coded）」のウェブサイトが抱える問題です。あなたには完成品に見えても、検索エンジンには見えていないのです。ページは人間には機能しますが、クロールには失敗します。

バイブス・コーディング（Vibe coding）とは、やりたいことを自然言語で伝え、AIにコードを書かせることを意味します。Lovable、Bolt、Cursorといったツールを使えば、数秒で動作するアプリが手に入ります。まるで魔法のように感じられます。

落とし穴は、技術的なデフォルト設定にあります。これらのツールは、主にReactのシングルページアプリケーション（SPA）を生成します。これは、Reactが学習データの大部分を占めているためです。

Reactは多くの場合、クライアントサイド・レンダリング（CSR）を使用します。これは、サーバーがほぼ空のHTMLファイルを送信することを意味します。ブラウザは、ページが表示される前に、巨大なJavaScriptバンドルをダウンロードして実行しなければなりません。

人間にとっては、これで問題ありません。しかし、クローラーにとっては災難です。

Googlebotは、まず「空の殻」を目にします。Googleは2段階のインデックス作成プロセスを採用しています。

第1段階: Googlebotが生のHTMLをクロールします。CSRを使用している場合、空のコンテナ以外何も見つかりません。
第2段階: GoogleがJavaScriptを実行するためにページをキューに入れます。このステップは保証されているわけではありません。新規サイトの場合、Googleがこのレンダリングを優先しないこともあります。

あなたのサイトはキューの中で待たされたままになります。Googleは空白のページを見て、次のページへと進んでしまいます。あなたのコンテンツは、インデックスに到達することさえありません。

以下の3つの簡単なテストで、自分自身でも確認できます。

Google Search Console: URL検査ツールを使用します。「公開 URL をテスト」をクリックし、レンダリングされたHTMLを確認してください。テキストが欠落している場合、Googleはそのテキストを見ることができません。
サイト内検索: Googleで site:yourdomain.com と入力します。ページが表示されない場合は、インデックスされていません。
JavaScriptを無効化: ブラウザのJavaScriptをオフにします。ページが真っ白になる場合、クローラーはコンテンツを見つけるのに苦労することになります。

解決策は、Reactを避けることではありません。レンダリングの方法を変えることです。

再構築が可能であれば、即座にHTMLを送信するフレームワークを使用してください。

現在のサイトを維持したい場合は、AIツールに修正を依頼してください。次のようなプロンプトを使います：「このアプリをサーバーサイド・レンダリングを使用するように変換して、コンテンツが初期HTMLに含まれるようにしてください。」

動作するサイトは素晴らしいものです。しかし、表示されるサイトはさらに素晴らしいものです。JavaScriptが実行される前に、コンテンツが確実に存在するようにしましょう。