RankpediaA plain-English encyclopedia of search

SEO React

Makes React-based pages crawlable, indexable, and metadata-rich so search engines can understand and rank them properly, which is critical because client-side rendering alone can delay indexing.

If you have ever assumed a React app is automatically SEO-friendly because it uses a modern framework, you already know client-side rendering alone often delays or weakens how Google sees your content.

Key points

  • Every important route needs a unique <title> and meta description that match the visible page content.
  • Use crawlable URLs and avoid hash-only routing for pages that should rank in search.
  • Prefer real anchor links and route-based navigation instead of relying only on onClick handlers.
  • Server-side rendering, static site generation, or prerendering can expose content in the initial HTML and improve indexability.
  • Generate XML sitemaps and a robots.txt file so crawlers can discover the site’s public URLs.
  • Add structured data in JSON-LD to help search engines understand content types such as Article, Product, or FAQ.

The same product page, two rendering modes

An e-commerce site built with React serves a product page for 'blue running shoes'. In client-side rendering, the initial HTML contains only a loader div; the product title, price, and description load later via JavaScript. Googlebot may wait for rendering but often sees incomplete data. After switching to server-side rendering, the same URL delivers the full product metadata in the initial HTML, including a canonical tag and structured data for Product. The page starts appearing in search results within two weeks.

Three common mistakes that hurt indexability

  • Client-side rendering only Relying on client-side rendering alone for pages that need to rank delays or weakens how Google sees your content, especially for deep or less-linked pages.
  • Duplicate or generic metadata Using the same <title> and meta description across many routes confuses search engines and reduces click-through rates from search results.
  • Hash-based URLs Using hash-based URLs or non-crawlable navigation patterns for indexable pages prevents Google from discovering and indexing those routes properly.

Four ways to improve performance and crawlability

  • Use semantic HTML elements Elements like header, main, article, nav, and aside improve content hierarchy for both users and search engines, making your page structure clearer.
  • Optimise Core Web Vitals Code splitting, image compression, lazy loading, tree shaking, and limiting third-party scripts help improve loading speed, interactivity, and visual stability, which are measured by Core Web Vitals.
  • Set canonical URLs Canonical tags help reduce duplication problems when the same content is available through filters, sorting, or multiple URL variants.
  • Ensure mobile friendliness Responsive design, correct viewport settings, and avoiding intrusive interstitials that block content remain important for both users and search rankings.

What to check before deploying a React site

  • Metadata per route Verify every important route has a unique <title> and meta description that accurately describe the visible page content, not generic placeholders.
  • Crawlable navigation Check that all indexable pages are reachable via real anchor links, not only through JavaScript event handlers or hash-based routing.
  • Structured data presence Add JSON-LD structured data for content types like Article, Product, FAQ, Breadcrumb, and Organization to help search engines understand your pages.

Common questions

Is React SEO-friendly?

React itself is neutral; the rendering mode matters. Client-side rendering alone can delay indexing, while server-side rendering or static generation makes React pages fully crawlable.

Why is React not SEO friendly?

React apps that rely solely on client-side rendering often serve an empty HTML shell, forcing Googlebot to execute JavaScript before seeing content, which can delay or weaken indexing.

Is Next.js SEO-friendly?

Next.js supports server-side rendering and static generation by default, making it more SEO-friendly out of the box than a plain client-side React app.

Sources

  1. Google Search Central: JavaScript SEO basics Covers how Google processes JavaScript and renders content
  2. Google Search Central: Structured data Explains how to add JSON-LD structured data for better understanding
  3. Google Search Central: Sitemaps Guidance on generating XML sitemaps for crawlable URLs
  4. Google Search Central: Core Web Vitals Details on loading speed, interactivity, and visual stability metrics
↑