Is React bad for SEO, or is it my single-page app?

React isn’t the problem, the empty HTML is

React can produce complete HTML on the server. A default single-page app doesn’t. This is the whole index.html a fresh Vite + React project ships (create-vite react-ts template, read 15 Oct 2026):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Every route returns this shell. Your headings, prices and FAQ appear only after the browser runs the bundle. React’s own docs say build tools “start off with a client-only, single-page app” and that other rendering patterns are yours to add (React, “Build a React app from scratch”, read 15 Oct 2026).

Who reads what from that shell:

The last row is a measurement from late 2024, not a vendor promise; the details and what is still assumed are on Do AI crawlers render JavaScript?.

Test what a bot sees

1. Fetch the raw HTML as a bot. curl never runs JavaScript, so it shows what a non-rendering crawler gets:

URL=https://yoursite.com/pricing
UA='Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko); compatible; OAI-SearchBot/1.4; +https://openai.com/searchbot'
curl -s -A "$UA" "$URL" | sed 's/<[^>]*>/ /g' | wc -w
curl -s -A "$UA" "$URL" | grep -o '<h1[^>]*>[^<]*' | head -1

2. Compare view-source with the Elements panel. view-source: (Ctrl+U or Cmd+Option+U) is what the server sent; DevTools → Elements is the DOM after JavaScript. If your H1 is in Elements but not in view-source, bots that don’t render never see it.

3. Count both sides. Headless Chrome prints the rendered DOM, so the gap is easy to measure:

CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"   # or google-chrome on Linux
echo "raw:      $(curl -s "$URL" | sed 's/<[^>]*>/ /g' | wc -w)"
echo "rendered: $("$CHROME" --headless --dump-dom "$URL" 2>/dev/null | sed 's/<[^>]*>/ /g' | wc -w)"

Example: the same wc -w count on the template shell above prints 5, the words of its <title>. On a server-rendered page the two numbers match; our own pricing page, a static Astro build, printed this (own measurement, 15 Oct 2026):

raw:      2451
rendered: 2454

A raw count in single digits next to a rendered count in the hundreds means your text lives in JavaScript. One caution: a spoofed user agent only tests rules that look at the user agent. Hosts that prerender only for verified crawlers (Lovable does this for older React + Vite apps, per its SEO docs, read 15 Oct 2026) will still show curl the plain shell; use Search Console’s live test there.

Your options, from smallest change to largest

What else a SPA gets wrong

Rendering is the big one, but three smaller ones travel with it. Client-side routers often answer every unknown URL with a 200 (a soft 404), use onClick handlers instead of <a href> links, and keep one <title> for every route because the per-route title is set in the browser. Each has a one-line test on My vibe-coded site is invisible to ChatGPT; run those after the rendering fix, not before.

A prompt for your coding tool (example)

Our public routes (/, /pricing, /features, /docs/*, /blog/*) must ship their
text in the HTML without JavaScript. Pick the smallest change for our stack
(build-time prerendering first, server rendering only if a route needs
per-request data). Leave /app/* client-rendered. Every route gets its own
<title>, meta description and canonical in the HTML. Unknown URLs return 404.
Accept when: curl -s https://DOMAIN/ROUTE | grep -c '<h1' prints 1 for every
public route, and the raw word count is within 20% of the rendered count.

Where Katman fits, and where it doesn’t

Katman is an MCP server that runs inside Cursor, Claude Code, VS Code and other AI coding tools. katman_scan_code reads your repo and reports whether each page renders on the server or only in the browser; katman_audit_site fetches the live pages the way AI crawlers do and counts what is in the raw HTML; katman_prompt returns the fix prompt with prerender options for your framework, and a later audit checks the fix landed. Katman doesn’t edit your site: your coding tool makes the change. Katman Pro is $99 a month for up to 3 sites, with fix prompts and page briefs uncapped (pricing, what the MCP does). Nobody can promise an assistant will recommend you; readable HTML only makes it possible. To check bot access without any setup, the AI crawler checker is free.

Written by the Katman team, Rnify Limited. React, Vite, Google, Apple, Lovable and Vercel pages read 15 October 2026.