Technical SEO for React Sites: Why Your Beautiful App Ranks Nowhere

A React single-page app can be invisible to search engines and social previews. Here is exactly what breaks, and the pragmatic fix for each.

You launched a fast, animated, genuinely impressive React site. Three months later, it ranks for your brand name and nothing else, and every link you share on LinkedIn shows the same generic preview. Nothing is wrong with your content. The problem is that the entire page exists only after JavaScript runs.

What actually breaks in a single-page app

1. One set of metadata for every route. The title and description live in index.html, so every page shares them. Search engines see a site with fifty identical titles.
2. Social crawlers do not execute JavaScript. LinkedIn, WhatsApp, Slack and most preview bots read the raw HTML only. Client-side meta tag updates are invisible to them, always.
3. Deferred content. Googlebot does render JavaScript, but rendering is queued and budgeted. Content that requires two round trips before appearing may be indexed late, partially, or not at all.
4. No real URLs. Content behind tabs, accordions or modals with no unique address cannot rank, because there is nothing for a search engine to send a user to.
5. Client-side redirects and soft 404s. A missing page that renders a "not found" component while returning HTTP 200 teaches crawlers that your error pages are valid content.

The fix, in order of impact

1. Prerender your indexable routes

You do not need to migrate to a full server-rendered framework. A build step that outputs a real HTML file per route — with the correct title, description, Open Graph tags and structured data baked in — closes most of the gap. The React app still hydrates and behaves identically for users; crawlers simply get a complete document immediately.

2. Give every page unique, honest metadata

A distinct title under 60 characters and a description of 140 to 160 characters, per route. Write the description as ad copy, not as a summary: it is the only sales pitch you control in the results page.

3. Add structured data that matches the page

Article schema on blog posts, Organization on the homepage, BreadcrumbList on nested pages, FAQPage where you genuinely answer questions. Structured data does not directly boost rankings, but it earns rich results, which move click-through rate — and click-through rate moves rankings.

4. Fix the Core Web Vitals your animations broke

• Largest Contentful Paint: the hero image is usually the culprit. Serve it in a modern format, size it correctly, and do not fade it in — an element that animates from opacity zero is measured as painted late.
• Cumulative Layout Shift: reserve dimensions for images and embeds, and load fonts with a size-adjusted fallback.
• Interaction to Next Paint: heavy scroll libraries and per-frame JavaScript work are the common cause. Profile on a mid-range phone, not your laptop.

The sitemap and robots basics

Generate the sitemap at build time from the same data that produces your routes, so it can never drift out of sync with reality. Include a lastmod date that reflects genuine changes. Point to it from robots.txt, and submit it once in Search Console — then leave it alone and let it work.

• <2.5s LCP target on mobile
• <0.1 Cumulative Layout Shift
• 1 URL per indexable piece of content

What not to bother with

Keyword density, meta keywords tags, and obsessing over a single overall score in an audit tool. Search engines reward pages that answer a question completely and load quickly. Most of the remaining advice on technical SEO blogs is either a decade out of date or a rounding error next to prerendering and page speed.