SEO for React Apps: What Actually Moves the Needle

A client came to me with a React site that had been live for four months and was getting almost zero organic traffic. The design was solid, the content was there. The problem was structural — Googlebot was seeing a near-empty HTML shell and JavaScript it wasn't executing.

Here's what I changed, and what actually made a difference versus what I thought would matter but didn't.

The Core Problem with Client-Side Rendering

A typical React SPA sends the browser a nearly empty index.html with a single <div id="root">. The content is injected by JavaScript after the page loads. For a user with a browser, this is fine. For Googlebot crawling at scale, it may skip the JavaScript execution entirely — meaning your entire content is invisible to the crawler.

The fix depends on your stack, but the principle is the same: your HTML needs to contain real content before JavaScript runs. This means either server-side rendering (SSR), static site generation (SSG), or at minimum pre-rendering the critical pages.

Changes That Actually Improved Rankings

Moved to static generation for landing pages. The homepage, about page, and service pages are now pre-rendered HTML. No waiting for JavaScript. Googlebot reads them instantly.
Proper title and meta tags per page. Sounds obvious. Genuinely surprising how many React apps have a single static <title> in index.html that never changes regardless of the current route.
Semantic HTML structure. One <h1> per page, correct heading hierarchy, <main>, <article>, <nav> used correctly. Crawlers use these to understand page structure.
Image optimization. Every image got proper alt text and explicit width and height attributes to prevent layout shift. This directly impacts Core Web Vitals scores.
Eliminated render-blocking resources. Moved non-critical CSS to load asynchronously. Deferred third-party scripts until after the page was interactive.

Core Web Vitals are not a ranking hack. They measure real user experience — loading speed, visual stability, interaction responsiveness. If you improve them, you improve both rankings and conversion.

What Didn't Move the Needle

Keyword density obsession. Meta keywords (ignored by Google for years). Submitting a sitemap without fixing the underlying rendering issue first. These are the things most SEO guides still lead with, and they're either marginal or irrelevant for modern React apps.

Fix the rendering, fix the structure, fix the performance. The rest follows.