React SEO: How to Make a React Website Rank on Google (2026 Guide)

I get some version of this message almost every month: "I built my site in React, it looks great, but it's just not showing up on Google."

The site is usually fine. The rendering strategy is the problem.

This guide walks through why React sites struggle with SEO, and the exact changes that fix it — in the order I actually apply them on client projects.

Why React Sites Struggle to Rank

A traditional website sends the browser a complete HTML document. A default React app (created with Vite or Create React App) does the opposite: it sends a nearly empty HTML file with a single <div id="root"></div>, then JavaScript builds the entire page in the browser. This is client-side rendering (CSR).

Googlebot can run JavaScript, but on a new or small site it often crawls the raw HTML first and comes back to render later — sometimes much later. If your content, headings, and meta tags only exist after JavaScript runs, early crawls see an empty page. Thin or empty pages get deprioritized, and you end up with the classic symptom: most pages "discovered, not indexed."

The fix is to make sure every URL returns real HTML — content and metadata included — without waiting for JavaScript.

Step 1: Fix Rendering (The Big One)

You have three realistic options:

Static prerendering (SSG)

At build time, each route is rendered to a real HTML file (/about/index.html, /blog/my-post/index.html, and so on). This is ideal for portfolios, blogs, and marketing sites where content doesn't change per request. For a Vite + React app, vite-react-ssg does this while keeping your existing React Router code, and it deploys as plain static files.

Server-side rendering (SSR)

The server renders the page for each request. Useful when content is dynamic per user or updates constantly. Next.js and React Router's framework mode both support this, at the cost of a running server.

Keep CSR, but prerender for bots

A snapshot service renders your pages for crawlers. It works, but it's the most fragile option and I only recommend it as a stopgap.

For most React portfolios and business sites, static prerendering is the right answer: same SEO benefit as SSR, far less complexity.

Rule of thumb: if your content is the same for every visitor, prerender it. Don't run a server you don't need.

Step 2: Unique Metadata Per Page

Once pages render as HTML, each one needs its own:

• <title> — unique, with the primary keyword near the front
• <meta name="description"> — a compelling 150–160 character summary
• <link rel="canonical"> — the page's own absolute URL
• Open Graph and Twitter tags for social/link previews

The most common mistake I see is a single title and description defined once in index.html and reused across every route. To Google, that looks like a site full of duplicate pages.

With a prerendered React app, set these per route (for example with a small <Seo> component backed by a head manager), so the correct tags are baked into each page's HTML.

Step 3: Structured Data (Schema)

Structured data helps Google — and increasingly AI answer engines — understand what a page is. At minimum:

• A Person or Organization schema sitewide
• BlogPosting / Article schema on blog posts
• BreadcrumbList for navigation context
• FAQPage where you answer real questions

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "React SEO: How to Make a React Website Rank on Google",
  "author": { "@type": "Person", "name": "Darshan Singh" },
  "datePublished": "2026-06-18"
}

Structured data won't rank a bad page, but on a good page it improves how you appear in results.

Step 4: Sitemap and robots.txt

Generate an sitemap.xml that lists every real URL (including each blog post) and reference it from robots.txt. On a prerendered site this is easy to automate at build time, so the sitemap never drifts out of sync with your actual pages. Then submit it in Google Search Console.

Step 5: Core Web Vitals and Mobile

Rendering and metadata get you indexed. Performance helps you rank. Focus on:

• LCP (Largest Contentful Paint): compress hero images, preload fonts, avoid render-blocking scripts.
• CLS (Cumulative Layout Shift): set explicit width/height on images and reserve space for dynamic content.
• INP (Interaction to Next Paint): keep the main thread free — avoid heavy JavaScript on load.

Test on a mid-range mobile device, not just your laptop. That's closer to what most Indian users — and Google's mobile-first index — actually experience.

Step 6: Internal Linking and Content

Finally, treat content like a real site, not a single-page app:

• Give every important page a genuine, crawlable URL.
• Link between related pages (your blog posts should link to your services and to each other).
• Write substantial, useful content — thin pages rarely rank in 2026.

A Simple Checklist

1. Prerender every route to real HTML (SSG for most sites).
2. Unique title, description, and canonical per page.
3. Person + Article + Breadcrumb + FAQ schema.
4. Auto-generated sitemap referenced in robots.txt.
5. Green Core Web Vitals on mobile.
6. Real internal links and non-thin content.

Do these in order and a React site will index and rank just like anything else — because at that point, from Google's perspective, it is just a fast, well-structured website that happens to be built with React.

---

Need a React site that actually ranks — or a rescue on one that won't index? Tell me what you're building and I'll map out the fix.