React SEO: Rendering, Metadata and Links for a React App That Ranks

Quick quiz

Is SEO right for you, and how should you start?

Question 1 of 425%

Do people search Google for what you sell?

Yes, I think soNo, it is new or very nicheI don't know

React SEO is the work of making a React application crawlable, indexable and understandable by search engines and AI assistants. React itself is neutral: the problems come from rendering everything in the browser. Google confirms in its JavaScript SEO basics that it processes JavaScript apps in three phases (crawling, rendering, indexing) and that "server-side or pre-rendering is still a great idea because it makes your website faster for users and crawlers, and not all bots can run JavaScript."

Why is React difficult for SEO?

A React app created as a single page application ships an HTML file that contains little more than an empty root div and a script tag. The browser downloads the JavaScript, runs it and builds the page. A crawler that reads only the HTML sees nothing to index: no headings, no text, no links.

Googlebot does run JavaScript, but in a separate step: the page is crawled, queued for rendering, rendered in a headless Chromium, and only then are the rendered links and content used. Every extra step is a chance for failure (a script error, a blocked API, a timeout) and adds delay before new pages appear in search. Our guide to JavaScript SEO details this pipeline, and our article on Google indexing covers how to get pages indexed faster.

Other bots are less patient. Vercel's December 2024 analysis The rise of the AI crawler found that "none of the major AI crawlers currently render JavaScript", naming GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot and PerplexityBot. A client-rendered React page is invisible to ChatGPT, Claude and Perplexity, even when Google indexes it.

Which rendering approach should a React site use?

The React team now recommends starting new apps with a framework. When it deprecated Create React App on February 14, 2025, it wrote in its announcement that "server rendering can improve SEO" and also improves performance by reducing the JavaScript users must download before seeing content. The options, from weakest to strongest for search:

On dynamic rendering, Google's documentation is explicit: it "was a workaround and not a long-term solution", and Google recommends server-side rendering, static rendering or hydration instead. If you are choosing a framework, our Next.js SEO guide covers rendering modes, the Metadata API and sitemaps in detail.

If migrating is not possible, a single page app can still be indexed by Google with care. Our guide to single page application SEO lists the conditions; the rest of this article applies to both cases.

How do you set titles and meta tags in React?

Since React 19 (stable since December 5, 2024), components can render title, meta and link tags directly, and React hoists them into the document head. The React 19 release notes state that this native support works "with client-only apps, streaming SSR, and Server Components". Before React 19, libraries such as react-helmet or react-helmet-async did the same job, and they remain useful for overriding defaults per route.

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

Three rules apply whatever the method:

• One title per page, unique and descriptive. React's documentation warns that if several components render a title at the same time, "the behavior of browsers and search engines is undefined". Pass it a single string (a template literal), not mixed text and variables.
• One description and one canonical per URL, generated from the page data. A meta tags generator helps draft them, and a canonical checker confirms what is live.
• Open Graph tags in the initial HTML for pages people share, since link preview bots generally read the raw HTML.

Which routing and link mistakes block indexing?

Google states that it "can only discover your links if they are a HTML elements with an href attribute" and advises against using URL fragments to load different content. Most React SEO failures come from routing details:

To see what Google renders, use the URL Inspection tool in Search Console and view the tested page's HTML, or run an indexability checker on key templates.

How do you handle sitemaps and structured data in React?

React has no built-in sitemap. Generate sitemap.xml at build time from your routes and data (or from your framework's sitemap feature), list only canonical URLs that return 200, and reference it in robots.txt. An XML sitemap generator works for small static sites.

Structured data follows the same rule as metadata: render the JSON-LD script with the page, from the same data, ideally on the server. Google can read JSON-LD injected by JavaScript after rendering, but markup that is absent from the initial HTML is absent for crawlers that do not render. Use Article for posts, Product for e-commerce, Organization site-wide and BreadcrumbList for deep pages.

How does performance affect React SEO?

Large JavaScript bundles hurt Core Web Vitals: the browser must download, parse and hydrate code before the page becomes responsive, which weighs on Largest Contentful Paint and Interaction to Next Paint, especially on mobile. The React team's Create React App announcement notes that server rendering sends less JavaScript and a full HTML document, which produces a faster First Contentful Paint and can lower INP. Practical levers: split code by route with React.lazy, ship images with explicit dimensions, lazy-load components below the fold, and audit third-party scripts.

What should a React SEO checklist include?

1. Every indexable URL returns full HTML (server rendering or prerendering), checked with curl.
2. One unique title, description and self-referencing canonical per URL.
3. History-based routes, no hash URLs, and every internal link rendered as a with href.
4. Real status codes: 404 for missing pages, 301 or 308 for moved pages.
5. A sitemap.xml generated from the same data as the routes, listed in robots.txt.
6. JSON-LD rendered with the page, validated with the Rich Results Test.
7. Scripts, styles and APIs needed for rendering allowed in robots.txt.
8. Code split by route and Core Web Vitals monitored on real users.

How do you make a React site visible in AI answers?

GEO (generative engine optimization) starts with access. Since AI crawlers fetch raw HTML, a React page must deliver its text, headings and JSON-LD without JavaScript to be read, summarized and cited. A website crawlability AI audit shows what these bots receive from your pages. The second condition is content worth citing: pages that answer one question per section, with sources, figures and clear definitions.

That content side is what Sorank, our product, automates. Sorank is an autopilot SEO and GEO software: its blog article generator writes and publishes 20, 60 or 120 articles per month with sources, internal links and images, and it connects to custom stacks such as a React or Next.js site through a webhook. Its SEO chat answers questions about your site's search performance in a conversation.

The short version: serve HTML from the server, give every URL its own title, description and canonical, and use real links. React then ranks like any other site, and AI assistants can read it. To keep that site supplied with articles built for Google and AI, see Sorank's plans, from $49 per month with a 3-day free trial.