React builds pages in the browser by default. That is the source of every SEO problem React sites have, and the reason the answer is usually not “optimise React” but “render somewhere else”.
A default React application sends an almost empty HTML document plus a JavaScript bundle. Everything a search engine needs, content, links, titles and directives, arrives only after that bundle loads and executes.
What breaks, and why
Content arrives late or not at all
Google renders JavaScript in a deferred second pass, so content exists eventually rather than immediately. Where the bundle fails, times out, or depends on a slow API, the page is empty when assessed. See SSR vs CSR.
Links are not links
Navigation implemented with click handlers rather than anchor tags cannot be followed. React Router’s Link renders a real anchor; a div with an onClick does not. This is the most common cause of React sites having large unreachable sections.
Titles and meta arrive client-side
Setting the title in a component means the initial response carries the default. Directives set this way, including canonical and noindex, may be processed against the pre-render state.
Every route returns 200
A single-page application typically serves the same shell for every path, so a URL that should 404 returns success with a “not found” message rendered client-side. That is a soft 404 at scale.
The fixes, in order of preference
- Server-side or static rendering. The real solution. See Next.js SEO for the common route.
- Real anchor tags for all internal navigation, regardless of rendering approach.
- Correct status codes from the server for routes that do not exist.
- Meta and canonical in the initial response rather than set by a component.
- Pre-rendering as a stopgap where rebuilding is not viable.
What not to bother with
A great deal of React SEO advice concerns optimising client-side rendering to be more crawler-friendly. That effort is usually better spent moving rendering to the server, which removes the class of problem rather than mitigating it.
Testing
- Disable JavaScript and load the page. What remains is what is guaranteed.
- Compare rendered HTML against source in URL Inspection.
- Check whether internal links appear as anchor tags in the source.
- Request a URL that should not exist and check the status code, not the displayed message.
Frequently asked questions
Can React sites rank?
Yes, and many do. The question is whether they rank reliably. Server-rendered content has no dependency; client-rendered content depends on execution succeeding every time.
Does Google render React?
Generally yes, in a deferred pass. Other crawlers, including many social and AI crawlers, frequently do not.
Do I need to rebuild in Next.js?
Not necessarily. Pre-rendering or adding server rendering to an existing application can work. Rebuild if the application is small enough or the problems are severe enough to justify it.
Why are some pages indexed and others not?
Usually reachability. Pages linked with real anchors get crawled; pages reachable only through click handlers do not. Check how navigation is implemented before assuming a rendering problem.
Consulting CTA
If your React application is not being indexed reliably, book an SEO consultation for a rendering and crawlability review.