Why Your Vibe Coded Website Will Never Rank

Translated for your language. 原文を読む.

AI-assisted draft.

「バイブス」で構築したウェブサイトが検索順位に上がらない理由

先月、ある創業者が私にウェブサイトを見せてくれました。見た目は素晴らしかったです。アニメーションは洗練されており、コピーも的確でした。彼はAIを使って、わずか午後のひとときでそれを構築したのです。

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

問題は単純です。ウェブサイトは、あなたには完成しているように見えても、検索エンジンからは見えない状態であり得るのです。ページは人間には機能しますが、クロールには失敗します。

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

しかし、これらのツールにはSEOを損なうデフォルト設定があります。

ほとんどのAIビルダーは、Reactのシングルページアプリケーション（SPA）を生成します。Reactは世界で最も使用されているライブラリです。ウェブサイトを依頼すると、ブラウザですべてをレンダリングするReactアプリが手に入ります。

これは「クライアントサイド・レンダリング（CSR）」と呼ばれます。

仕組みは以下の通りです：

人間にとっては、これで問題ありません。ページはほぼ瞬時に完成したように見えます。

しかし、検索エンジンのクローラーにとっては、これは災難です。クローラーが最初に受け取るのは、空の殻（シェル）なのです。

Googleは2段階のインデックス作成プロセスを採用しています。

第1波は生のHTMLをクロールします。CSRを使用している場合、クローラーには何も見えません。
第2波は、JavaScriptを実行するためにページをキューに入れます。この第2波は保証されているわけではありません。新しいサイトの場合、Googleはこのステップを優先しない可能性があります。

あなたの作りたてのウェブサイトは、キューの中で待ちぼうけを食らいます。Googleは空白のページを見て、そのまま通り過ぎてしまうのです。

現在、自分にこれが起きているかどうかを確認する方法は以下の通りです：

Google Search Consoleを使用します。URL検査ツールにURLを貼り付け、「URLをテスト」をクリックします。テストされたページを表示し、HTMLタブを確認してください。そこにテキストがなければ、Googleはそれを認識できていません。
サイト内検索を使用します。Googleで site:yourdomain.com と入力してください。何も表示されない場合は、インデックスの問題が発生しています。
ブラウザのJavaScriptを無効にします。ページを更新してください。ページが真っ白になるなら、検索エンジンはコンテンツを見つけるのに苦労することになります。

解決策は、Reactを避けることではありません。レンダリングが行われる場所を変更することです。

コンテンツが最初のHTMLレスポンスの中に存在している必要があります。主に3つの選択肢があります：

Server-Side Rendering (SSR): リクエストごとにサーバーがページを構築します。Next.jsやRemixを使用してください。
Static Site Generation (SSG): ウェブサイトがあらかじめすべてのページをプレーンなHTMLとして構築しておきます。Astroを使用してください。
Prerendering: ページの静的なHTMLスナップショットを作成します。

AIを使ってサイトを構築したなら、AIを使って修正することもできます。コンテンツが初期HTMLに含まれるように、サーバーサイド・レンダリングを使用するようにアプリを変換するよう、ツールに依頼してください。

ブラウザで動作するウェブサイトと、Googleで動作するウェブサイトは別物です。美しいデザインの裏に、空っぽの殻を隠さないようにしましょう。