You did everything right. The framework just doesn't handle this part.
Vite is fast. React is powerful. Together they produce applications that are responsive, modern, and a joy to use.
But if you check your analytics, you'll see something disturbing: almost zero organic traffic. No visitors from Google. No referrals from ChatGPT or Perplexity. Your social link previews look broken. And you have no idea why, because the site looks and works perfectly.
The problem isn't your code. It's what Vite + React produces by default — and what crawlers see when they visit.
What Vite + React actually outputs
When you build a Vite + React project, the output is a static bundle:
index.html— a minimal HTML fileassets/index-[hash].js— your entire application as JavaScriptassets/index-[hash].css— your styles
The index.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/assets/index-a1b2c3.js"></script>
</body>
</html>
That's it. No content. No headings. No product description. No pricing. No features. Just a container div and a script tag.
All your actual content — every component, every piece of text, every heading, every image reference, every meta tag injected via React Helmet — exists only inside that JavaScript bundle. It only becomes visible after the browser downloads, parses, and executes the JavaScript.
What this means for search engines and AI
Googlebot: partial visibility
Googlebot is the only major crawler that executes JavaScript. It uses a rendering queue called the Web Rendering Service (WRS) that processes JavaScript pages.
But there are caveats:
- Delayed rendering. New and low-authority pages can wait days or weeks in the rendering queue
- Resource limits. Googlebot has timeouts. Complex SPAs that take too long to render may get incomplete snapshots
- Two-phase indexing. Google first indexes the raw HTML, then separately renders and re-indexes. Your content may be indexed as "thin" before the full render
For a new Vite + React site with low domain authority, Google may index your homepage as a near-empty page and deprioritize crawling your other routes.
AI crawlers: zero visibility
GPTBot, ClaudeBot, PerplexityBot, and every other AI crawler read raw HTML only. They see the index.html above — and nothing else.
Your product could be the perfect answer to someone's ChatGPT question, and it won't appear because the AI has no knowledge of what you do.
Social bots: broken previews
When you share your URL on LinkedIn, X, Slack, or Discord, those platforms send a bot that reads your raw HTML looking for Open Graph tags. If your OG tags are injected by React Helmet (which they are in a Vite + React setup), the bot gets nothing.
The result: blank preview cards that make your product look unfinished.
The specific Vite + React issues
Issue 1: Default title is "Vite + React"
If you haven't modified index.html, the title tag literally says "Vite + React" or "Vite + React + TS." This is what Google shows in search results for your homepage.
Issue 2: No meta description in the HTML
React Helmet manages your meta tags — but only after JavaScript runs. The raw HTML has no <meta name="description">.
Issue 3: No Open Graph tags in the HTML
Same problem. OG tags injected by React Helmet aren't in the raw HTML. Social preview bots see nothing.
Issue 4: SPA routing is invisible to crawlers
React Router handles navigation client-side. Your routes (/features, /pricing, /about) don't exist as separate HTML files. A crawler that visits https://your-site.com/pricing gets the same index.html with <div id="root"></div> — no pricing content.
Issue 5: Structured data is JavaScript-only
If you've added JSON-LD via React components, it's also invisible in the raw HTML. Non-JS crawlers see no structured data.
Why this wasn't always a big deal
Historically, this problem existed but was less impactful:
- Google was the only search engine that mattered — and Googlebot renders JavaScript
- Social sharing was a nice-to-have — not a primary acquisition channel
- AI search didn't exist — there were no AI crawlers to worry about
In 2026, the landscape has shifted dramatically:
- AI search is growing explosively — GPTBot +305% YoY, PerplexityBot +157,490% YoY
- Social sharing drives real traffic — broken previews actively hurt your reach
- AI referral traffic is compounding — ChatGPT referrals are up 52% year-over-year
The Vite + React default output was always invisible to most crawlers. It just matters more now.
How to fix it
Quick fix: update index.html
At minimum, add static meta tags to your index.html:
<head>
<meta charset="UTF-8" />
<title>Your Product Name — One-Line Description</title>
<meta name="description" content="A clear description under 160 characters." />
<meta property="og:title" content="Your Product Name" />
<meta property="og:description" content="A clear description." />
<meta property="og:image" content="https://your-site.com/og-image.jpg" />
<meta property="og:url" content="https://your-site.com" />
<meta property="og:type" content="website" />
<link rel="canonical" href="https://your-site.com" />
</head>
Limitation: This only works for the homepage. Every route in your SPA still serves the same index.html, so all pages share the same meta tags. This is better than nothing but far from ideal.
Real fix: pre-rendering
Pre-rendering middleware intercepts crawler requests and serves them a fully rendered version of your page — with all content, meta tags, headings, structured data, and OG tags intact.
For Vite + React apps, CrawlReady deploys as a Cloudflare Worker:
- Human visitors get the normal SPA experience (unchanged)
- Crawlers get complete, rendered HTML
- Each route gets its own rendered output with correct meta tags
- Zero changes to your application code
Setup takes under an hour. Your Vite + React app stays exactly as it is.
Long-term fix: SSR framework
If you're early enough in your project, consider migrating to a framework with built-in SSR:
- Next.js (React) — the most popular option
- Remix (React) — newer alternative with good SSR support
- Astro — works with React components, great for content sites
For an existing Vite + React app, this means a rewrite. For a new project, start with one of these from day one.
The tools that generate Vite + React apps
This problem is amplified by the AI builder ecosystem. These tools all generate Vite + React output:
- Lovable — generates Vite + React SPAs
- Bolt.new — generates Vite + React SPAs
- Base44 — generates client-rendered SPAs
- Replit — often scaffolds with Vite
If you built your app with any of these tools, you have this exact problem — and the fix is the same.
Verify your current state
Run a CrawlReady audit on your Vite + React site. In 15 seconds, you'll see:
- How many words crawlers see vs. how many exist after rendering
- Your exact visibility gap percentage
- Whether AI crawlers can access your content
- Meta tag and structured data analysis
- Specific issues and recommended fixes
The audit is free. The information it gives you might be the most important thing you learn about your site this month.
This guide applies to all Vite + React projects as of March 2026, including those generated by AI builders. If Vite adds built-in SSR support in the future, the default output may change — but any existing client-rendered Vite + React app will still have this issue.
Is your site invisible to AI search?
Run a free audit and see exactly what Google, ChatGPT, Perplexity, and 20+ crawlers see on your site. Results in 15 seconds.
Run Free Audit