React SEO is the practice of making React applications - built with client-side rendering by default - crawlable, indexable, and rankable by search engines. Because React ships an empty HTML shell and renders content in the browser with JavaScript, search engines need a rendering strategy that exposes your content in server-sent HTML.

This guide covers the rendering options React teams actually use, the specific SEO mistakes that break React sites, and how to wire metadata, routing, and structured data so a React app can rank.

Why React SEO Is Different from Plain HTML

A static HTML page arrives fully formed: the crawler reads the content immediately. A default React app (Create React App style) ships an almost empty <div id="root"></div> and builds the page in the browser. Googlebot does run a second rendering pass with a headless browser, but that pass is queued, can be slow, and can fail silently - so content that only exists after JavaScript runs may never be indexed.

The practical consequence: React SEO is mostly about choosing how and when content is rendered to HTML, then verifying with Search Console that Googlebot sees the real page.

Rendering Strategies for React SEO

Client-Side Rendering (CSR)

The default for most React starters. The server sends the shell; the browser does everything. CSR is the easiest to build and the hardest to rank, because crawlers depend entirely on the second render pass. Use CSR only for app screens behind a login, never for pages you want indexed.

Server-Side Rendering (SSR) with Next.Js

SSR renders React components to HTML on the server for each request. Next.js makes this the default-friendly path. Crawlers and users both receive full HTML, which is ideal for SEO and social sharing. The trade-off is server cost per request, mitigated with caching and incremental strategies.

Static Site Generation (SSG)

SSG renders pages to static HTML at build time. For content that does not change per user - marketing pages, docs, blog posts - it is the fastest and most SEO-friendly option, served from a CDN as fully formed HTML.

Incremental Static Regeneration (ISR)

ISR serves static HTML but rebuilds in the background when data changes. It gives SSG speed with SSR freshness for pages that update occasionally. It is a Next.js feature and one of the most common React SEO setups in production.

Dynamic Rendering

For legacy or heavily interactive apps, dynamic rendering serves pre-rendered HTML to crawlers (via a headless browser on the server) and the normal SPA to users. It is a bridge, not a long-term architecture, but it unblocks indexing quickly.

Metadata, Title Tags, and Open Graph

Client-side React does not set the document title or meta tags by default, so every route can end up with the same title - a serious SEO problem. Use a metadata solution that sets per-route tags in the server-rendered HTML:

  • Next.js metadata API or generateMetadata for server components.
  • React Helmet (or Helmet Async) for non-Next React apps, so tags render server-side.
  • Unique title, description, canonical, and Open Graph tags per route.

Titles and meta descriptions are the snippet users see in search, so per-page uniqueness directly affects click-through rate.

Routing, URLs, and Canonicals

React Router uses the History API for clean URLs, which is fine for crawling once the HTML is rendered. The SEO pitfalls are:

  • Duplicate content from trailing-slash and case variants - normalize and canonicalize.
  • Faceted or filtered states creating near-infinite URL combinations - control with robots or canonical tags.
  • Wrong canonical pointing to the shell instead of the rendered route.

Set a self-referential canonical per route and let the server enforce one URL form.

Structured Data in React

JSON-LD should be emitted in the server-rendered HTML, not injected late by client JavaScript. With Next.js, render the <script type="application/ld+json"> inside the component tree so crawlers see it in the initial HTML. The same applies to breadcrumbs and FAQ schema. For the broader technical foundation, see our JavaScript SEO guide, and for single-page apps specifically, our SPA SEO solutions guide.

Common React SEO Mistakes

  • Shipping a client-only SPA for content pages that must rank.
  • One global title tag across every route.
  • No server-rendered metadata, so social and search snippets are blank.
  • Blocking JavaScript, CSS, or images in robots.txt, which prevents rendering.
  • Lazy-loaded content that crawlers never trigger.
  • Hydration that pushes Core Web Vitals into the red (heavy bundles, long main-thread tasks).

Core Web Vitals for React Apps

React bundles can wreck the three Core Web Vitals:

  • LCP: client-rendered heroes appear only after scripts execute; ship SSR/SSG HTML and a fast hero image.
  • INP: heavy hydration and third-party scripts block responsiveness; code-split and defer.
  • CLS: late-injected content shifts layout; reserve space for images and widgets.

Measuring in the field (Chrome UX Report) matters more than lab scores, because real users run slower devices than your dev machine.

How to Verify React SEO Is Working

Use Google Search Console URL Inspection to fetch and render a route, then compare the rendered HTML to your source. If the crawler sees your content, titles, and structured data in that view, indexing will follow. Pair it with a crawl of the production site (not localhost) and watch for soft-404s and blocked resources.

React SEO for Different App Types

Not every React surface needs the same treatment. Match the strategy to the page's job:

  • Marketing and content pages: SSG or SSR - these must rank and share well.
  • Authenticated dashboards: CSR is fine; they are private and never indexed.
  • Mixed apps: render public routes statically and keep private routes client-side, a pattern Next.js supports per-route.

The mistake is defaulting the whole app to one mode. Public, link-worthy pages deserve server-rendered HTML; internal tools do not.

Handling Redirects, Status Codes, and Soft 404s

React apps often swallow errors into a generic client-side "not found" view that still returns HTTP 200. To crawlers that looks like a real page, creating soft-404s that waste crawl budget and can get indexed as content. Ensure the server returns the correct status code (301 for moves, 404 for missing, 410 for gone) before the client router renders, and let the framework handle status on the server.

Image SEO and Lazy Loading in React

React image handling affects both accessibility and Core Web Vitals. Use semantic <img> with width, height, and descriptive alt text rather than background images that crawlers cannot read. For performance, lazy-load below-the-fold images but never lazy-load content that crawlers must see, and reserve layout space to avoid CLS. Next.js next/image automates most of this with responsive sizing and modern formats.

Sitemaps and Internal Linking for React Sites

A clean XML sitemap tells crawlers which routes exist, which matters when client-side routing makes discovery harder. Generate it from your route list at build or render time. Internal linking still carries ranking weight: render real anchor links in the server HTML so link equity flows, rather than relying on JavaScript navigation that some crawlers skip. For a wider view of technical SEO fundamentals, see our AI content optimization guide.

Migrating an Existing React SPA to SSR

If you already ship a client-only SPA that needs to rank, you do not have to rewrite it. Options in order of effort:

  1. Add dynamic rendering as a stopgap so crawlers get pre-rendered HTML.
  2. Move the highest-value content routes to SSG or ISR.
  3. Adopt a framework with SSR (Next.js) for new routes and migrate incrementally.

Measure indexation of the migrated routes before expanding, so you confirm the approach works on your stack.

Tools to Debug React SEO

  • Google Search Console URL Inspection - see exactly what Googlebot renders.
  • Chrome DevTools "view source" versus rendered DOM - spot the shell-versus-content gap.
  • Headless render checks in CI - fail the build if critical content is missing from server HTML.
  • Core Web Vitals and Chrome UX Report - track field performance, not just lab scores.

Frequently Asked Questions About React SEO

Is React Bad for SEO?

No. React is fine for SEO as long as you render content to HTML on the server or at build time. The default client-side setup is the problem, not React itself. Next.js with SSR or SSG turns a React app into a site search engines can read immediately.

Do I Need Next.Js for React SEO?

Not strictly, but it is the most common path. You can add SSR to a plain React app with a server renderer, or use dynamic rendering, but Next.js bakes in SSR, SSG, ISR, and metadata handling that otherwise take custom engineering. For most teams it is the fastest route to good React SEO.

Does Google Index Client-Side React Content?

Googlebot does execute JavaScript in a second pass, so some client-rendered content gets indexed. But that pass is queued, delayed, and can fail, so relying on it is risky. Server-rendered or static HTML is the reliable way to guarantee indexing.

How Do I Set the Title and Meta Tags in React?

Use a server-rendered metadata solution: Next.js metadata API for app-router projects, or React Helmet for other React apps, configured so tags appear in the server HTML rather than being injected by client JavaScript after load. Each route needs its own unique title, description, and canonical.