SEO by platform · Updated
React SEO: making a React app crawlable
A React app rendered only in the browser sends crawlers an almost empty HTML page. Google can usually render it, with delays; AI crawlers can't at all. The fix is rendering on the server or at build time, which is why React's own docs recommend starting with a framework.
Founder, SEO·AEO·GEO
Builds SEO·AEO·GEO and writes the crawler, schema, and citation research published here.
How React serves pages to crawlers
Plain client-side React (for example an app created with Vite's React template) ships a <div id="root"></div> and fills it with JavaScript. Frameworks such as Next.js and React Router's framework mode render the same components to HTML on the server or at build time.
Why client-side React is a problem
Google renders JavaScript pages in a second phase, after crawling, using a headless browser. It works, but it can be delayed, and errors or blocked resources leave the page empty. Google's own guide recommends server-side rendering or pre-rendering. AI crawlers such as OAI-SearchBot, ClaudeBot and PerplexityBot don't run JavaScript, so they see only the empty shell.
Your options
| Option | Effort | Result |
|---|---|---|
| Use a framework with SSR or SSG (Next.js, React Router framework mode) | Medium for existing apps, low for new ones | Full HTML for every crawler |
| Pre-render static routes at build time | Low to medium | Full HTML for those routes |
| Keep marketing pages separate (static site) and the app client-side | Low | The pages that need to rank are crawlable |
| Stay client-side only | None | Google may index it; AI crawlers can't read it |
React's documentation recommends a framework for new apps, and Create React App was deprecated in 2025.
Checklist for any React site
- Titles and meta descriptions per route, in the server HTML. In React 19 you can render <title> and <meta> inside components and React moves them to the head.
- Real <a href> links for navigation (router Link components render them).
- One URL per view, with history-based routing, not hash routing.
- Real 404 status codes for missing pages, which needs a server or framework.
- Content, not just a loading spinner, in the first HTML response.
React and AI search
- Check robots.txt allows the AI search crawlers you want: OAI-SearchBot (ChatGPT search), Claude-SearchBot, PerplexityBot. See the AI crawler list and the robots.txt generator.
- Check your host's or CDN's bot protection doesn't block them even when robots.txt allows them.
- Make sure the main text is in the HTML the server sends. AI crawlers don't run JavaScript.
- Avoid nosnippet and tiny max-snippet values on pages you want quoted; they also keep pages out of Google's AI Overviews.
Check it on your own site
What the free audit tests for this
- Raw HTML visibility
- Internal links
- Title tag
- Soft 404
One URL, about 20 seconds, no login. You get the result of every check and the exact fix for the top three issues.
Audit your website freeFAQ
Is React bad for SEO?+
React itself isn't; rendering only in the browser is. With server rendering or static generation, React sites are fully crawlable.
Can Google index a React SPA?+
Usually, because Google renders JavaScript, but it can be slower and less reliable. Other search engines and AI crawlers may not render it at all.
Do I need React Helmet?+
Not in React 19, which supports <title> and <meta> in components. Frameworks such as Next.js have their own metadata APIs.
Sources
- Creating a React App — React Docs
- Understand JavaScript SEO basics — Google Search Central
- <title> — React Docs