GrowthPedia

SEO React

SEO React is the work of ensuring React-based websites are crawlable, indexable, and fast so search engines can find and rank them.

Level: IntermediateRead: 2 minUpdated: 27 Jul 2026By Vera Lindqvist

Key facts

  • Every important route should have a unique <title> and meta description that match the visible content.
  • Use server-side rendering (SSR) or static site generation (SSG) to expose content in the initial HTML.
  • Generate XML sitemaps and robots.txt so crawlers can discover the site’s public URLs.
  • Add structured data in JSON-LD for content types like Article, Product, FAQ, and Breadcrumb.
  • Performance optimizations like code splitting, image compression, and lazy loading help improve Core Web Vitals.

Also called

React SEO, SEO for React applications

Use it for

Making React-based sites discoverable in search engines

Applies to

Google, Bing, and other search engines that render JavaScript

Crawlability and Indexing in React

React apps often render content client-side. Google can render JavaScript, but that takes extra time and resources. If content is not in the initial HTML, indexing may be delayed or incomplete.

Use server-side rendering (SSR) with frameworks like next.js seo or static site generation (SSG) to deliver HTML directly. This helps crawlers see content immediately. Compare with wordpress seo plugin where SEO is often plugin-based; React requires manual implementation.

Generate an XML sitemap and ensure robots.txt allows crawling of important routes. Use seo audit checklist pdf to verify your setup.

  • Use SSR or SSG for pages that need to rank.
  • Submit sitemaps to Google Search Console.
  • Avoid hash-only URLs for indexable pages.

Metadata, Navigation, and URLs

Every page that should rank must have a unique <title> and meta description. These should match the visible content. For breadcrumb navigation, implement structured data and see seo breadcrumbs as a guide.

Use crawlable URLs: avoid hash-only routing for indexable pages. Use real anchor links and route-based navigation, not just onClick handlers. Implement canonical URLs to prevent duplication from filters or sorting. Tools like seopress can help manage SEO metadata in React projects.

For example, a product listing page with multiple sort options should have a canonical URL pointing to the default sort. This prevents search engines from treating each sort variant as a separate page. Similarly, paginated pages should use rel="next" and rel="prev" or canonical to the first page if content is thin.

  • Unique metadata for every route.
  • Crawlable navigation with <a> tags.
  • Canonical URLs to control duplicate content.

Performance and Core Web Vitals

React apps can ship large JavaScript bundles. Code splitting, image compression, lazy loading, and tree shaking reduce load times. Third-party scripts can slow render; limit them and use async/defer.

Core Web Vitals (LCP, CLS, FID) are ranking factors. Use rendering seo to understand how Google perceives your page. Similar to Vue.js SEO, performance optimization is key. Also framer seo has different rendering considerations.

Mobile friendliness is still required: responsive design, correct viewport, no intrusive interstitials.

For LCP, ensure the largest content element (like a hero image) loads quickly. Preload critical images and use modern formats like WebP. For CLS, set explicit dimensions on images and ads. For FID, break up long tasks and defer non-critical JavaScript. Tools like Lighthouse can help identify issues.

  • Code splitting and lazy loading.
  • Optimise images and compress assets.
  • Limit third-party scripts.

Structured Data and Semantic HTML

Use JSON-LD structured data for content types like Article, Product, FAQ, Breadcrumb. This helps rich results. See yoast schema markup for an example of how to implement schema.

Use semantic HTML elements: header, main, article, nav, aside. This improves content hierarchy for both users and search engines. It also helps accessibility.

For example, wrap each blog post in an <article> tag, use <nav> for navigation menus, and <aside> for sidebars. Avoid using <div> for everything. Structured data can be added via a <script> tag in the <head> or <body>. For a product page, include properties like name, price, availability, and review ratings.

  • Use JSON-LD for structured data.
  • Use semantic HTML elements.
  • Include relevant properties in schema.

Common mistakes

  • Relying on client-side rendering alone for pages that need to rank. Content may not be in the initial HTML, delaying or preventing indexing by search engines.
  • Using duplicate or generic metadata across many routes. Search engines see similar pages as less distinct, potentially harming rankings for each.
  • Using hash-based URLs or non-crawlable navigation patterns for indexable pages. Crawlers cannot discover or follow those URLs, leaving pages unindexed.

Questions

react seo best practices

Best practices include using server-side rendering or static generation, ensuring unique metadata and crawlable URLs, optimizing performance with code splitting, and adding structured data. Focus on delivering content in the initial HTML and avoid relying solely on client-side rendering.

why react is not seo friendly

React is often considered not SEO-friendly because default client-side rendering hides content from crawlers. Without SSR or SSG, search engines may see an empty shell. However, with proper techniques like SSR, SSG, or prerendering, React can be fully SEO-friendly.

is react seo friendly

Yes, React can be SEO-friendly when implemented correctly. Using SSR via Next.js, SSG, or prerendering ensures content is available in the initial HTML. Combined with proper metadata, crawlable navigation, and performance optimization, React sites can rank well.

See also

Sources

  1. Google Search Central developers.google.com
  2. Google Search Central: JavaScript SEO basics developers.google.com
  3. Google Search Central: Structured data developers.google.com
  4. Google Search Central: Sitemaps developers.google.com
  5. Google Search Central: Core Web Vitals developers.google.com

Outbound links are unpaid and nofollow. If one has gone stale, tell me.

Vera Lindqvist

Vera Lindqvist has worked in SEO since 2014 — first in-house at an ecommerce retailer, then freelance for small teams that could not afford an agency. She writes GrowthPedia in her own time and pays for the hosting herself.

Written and maintained by one person. No ads, no affiliates, nothing for sale. Found an error? Tell me and I will log the correction publicly.