Site icon John Rector

The Vibe Coder’s Guide to SEO on Bolt.new: How to Tame the React Beast

John Rector

Right now, Section 3 tells them what to change (“Set availableDeliveryMethod…”), but it doesn’t give them the code. If they don’t know JSON syntax, they will break it.

Here is the “Heavy Duty” Version. I have added:

  1. The “Golden JSON” Block: A full, copy-pasteable Schema template for the Local Retailer fix.
  2. The robots.txt Standard: A quick snippet to ensure they aren’t accidentally blocking Google.
  3. Supabase Specifics: A micro-guide on making sure the image link is actually public.

This version leaves nothing to chance.

The Vibe Coder’s Guide to SEO on Bolt.new: How to Tame the React Beast

Subtitle: Bolt makes building insanely fast, but its default React setup is practically invisible to Google. Here is the battle-tested protocol to get your vibe-coded project ranked.

If you’re like me, you love vibe coding with Bolt.new. The speed at which you can go from a prompt to a deployed, functional app is intoxicating. It feels like magic.

Until you try to get it ranked on Google.

Then, the magic hits a brick wall. You realize that your beautiful, lightning-fast application is, in the eyes of a traditional search crawler, a mostly blank white page. And if you try to list a product? You get slapped with a dozen “Merchant Listing” errors because Google thinks you’re Amazon.

Above: The nightmare scenario. You deploy your site, check Google, and see a wall of red errors because your default Schema is broken.

After spending 48 hours wrestling with these exact problems, I developed a “Clean Slate Protocol” to fix them. This isn’t generic “add keywords” advice; this is a technical deep dive into the nuances of making a Bolt (React/Vite) app act like a grown-up website.

Here is the playbook.

1. The “One Truth” Rule (File Hygiene)

When you code with AI, it loves to create “draft” files. You end up with a public/ folder full of junk like pricing-old.txt, services-v2.txt, and copy-draft.md.

The Pitfall: If a bot crawls your site and finds pricing-old.txt listing your service at $50, but your homepage says $100, the bot (especially AI bots like ChatGPT) will get confused and might hallucinate the wrong price to users.

The Fix:

Marie Kondo your file tree. Before you publish, delete everything in public/ that isn’t essential. You should generally only have:

Above: A clean public folder structure. No junk files, just the essentials.

2. The “Empty Shell” Problem (React vs. Bots)

Bolt builds Single Page Applications (SPAs) using React and Vite. When a human visits, their browser executes JavaScript to build the page. When a basic bot visits, it often doesn’t run that JS. It just sees an empty <div>.

The Fix: The <noscript> Safety Net

This is non-negotiable for Bolt projects. You must explicitly tell “dumb” bots what is on the page.

Copy/Paste This Block:

HTML

<noscript>
  <h1>YOUR BUSINESS NAME</h1>
  <p>We provide [SERVICE] in [CITY]. Visit us at [ADDRESS] or call [PHONE].</p>
  <p>Our hours are [HOURS]. Walk-ins welcome.</p>
</noscript>

[INSERT IMAGE: Noscript.jpg]

Above: The <noscript> tag acts as a backup, ensuring bots can read your core info even if they can’t run the React code.

3. The Product Schema Nightmare (E-commerce vs. Retail)

This is where most vibe coders crash and burn. You want to list a product (like a device you sell), so you ask AI to “generate Product Schema.” It gives you standard JSON-LD.

The Error: You open Google Search Console and see red critical errors: “Missing field: shippingDetails” or “Missing field: hasMerchantReturnPolicy.”

The Reason: Google assumes every product is being shipped. If you are a local business (Genius Bar, bakery, boutique) that only does in-store sales, standard schema fails.

The Fix: The “Local Retailer” JSON Block

You have to explicitly force Google into “Local Inventory” mode. Do not let the AI guess this; it will get it wrong. Use this exact structure.

Copy/Paste This into your index.html Schema:

JSON

{
  "@type": "Product",
  "name": "YOUR PRODUCT NAME",
  "image": "https://your-supabase-url.com/image.jpg",
  "description": "Your product description.",
  "offers": {
    "@type": "Offer",
    "price": "100.00",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock",
    "url": "https://your-site.com",
    "areaServed": "Your City, State",
    "availableDeliveryMethod": "https://schema.org/OnSitePickup",
    "hasMerchantReturnPolicy": {
      "@type": "MerchantReturnPolicy",
      "returnPolicyCategory": "https://schema.org/MerchantReturnFiniteReturnWindow",
      "merchantReturnDays": 14,
      "returnMethod": "https://schema.org/ReturnInStore",
      "returnFees": "https://schema.org/FreeReturn"
    }
  }
}

Note the OnSitePickup and ReturnInStore lines. These are the magic commands that stop Google from asking for shipping rates.

Above: The Code Fix in action.

4. The “Invalid Image” Trap (.HEIC)

Google’s Merchant Bot is extremely picky about images. If your schema points to an image that is broken or in the wrong format, your entire product listing is rejected.

5. The “AI Cheat Sheet” (faq.txt)

We aren’t just optimizing for Google anymore; we are optimizing for ChatGPT, Claude, and Perplexity. These AI “answer engines” hate digging through complex React code. They love simple text files.

The Fix:

Create a plain text file at public/faq.txt. List your hard data:

Don’t forget: Add <loc>https://your-site.com/faq.txt</loc> to your sitemap.xml.

Above: The faq.txt file. Simple, ugly, effective. This is what AI bots love to read.

6. The “Google Force” Protocol (Tooling)

Don’t just publish and hope. Use the tools to debug your code before Google sees it.

Step A: The Code Test (Do this FIRST)

Use the Google Rich Results Test.

Above: The Goal. 5 Green Checkmarks means your code is perfect.

Step B: The “Ping” (Request Indexing)

Once your code passes the test and you’ve published:

  1. Go to Google Search Console.
  2. Inspect your Homepage URL.
  3. Click “REQUEST INDEXING.”

Above: The “Indexing Requested” confirmation. This puts your new code in the priority queue.

7. The Bolt “Gotcha” (Save vs. Publish)

I learned this the hard way: Bolt publishes your SAVED files, not your OPEN files.

If you are typing in index.html and hit “Publish” without saving, Bolt pushes the old version to the web.

Summary:

Vibe coding is the future, but the robots running the web are stuck in the past. By using <noscript>, “Retailer” Schema, and the Google Force Protocol, you ensure your cutting-edge app gets the traffic it deserves.

Exit mobile version