React SEO Problems: Can Google Crawl Your React App, and What to Fix

Yes, Google can crawl and render React apps. In a Vercel and MERJ study of more than 100,000 Googlebot fetches, every HTML page on nextjs.org was fully rendered, and the median wait before rendering was about 10 seconds [2]. So React SEO problems rarely come from React itself. They come from client-side-only rendering. When your titles, content and links exist only after JavaScript runs, you depend on that render succeeding, you lose every crawler that doesn't run JavaScript, and a handful of easy mistakes can keep pages out of the index. The fix is to serve the pages that need to rank as complete HTML, through server-side rendering or static generation.

Can Google crawl React apps?

Google processes JavaScript pages in three phases: crawling, rendering and indexing. Googlebot first fetches the HTML, then queues the page for rendering in a headless version of Chrome. Google says a page may wait in that queue for a few seconds, but it can take longer [1].

How much longer? Vercel and MERJ matched more than 37,000 crawls on nextjs.org with the moment each render finished. The median delay was 10 seconds, the 75th percentile 26 seconds, the 90th percentile about 3 hours and the 99th percentile about 18 hours [2]. That undercuts the common claim that JavaScript pages wait days or weeks to be rendered.

Two caveats are worth keeping in mind. nextjs.org is a high-profile site that mixes static, server and client rendering, so a small site built entirely with client-side rendering may not get the same treatment. And even in that study, client-side rendering came out weakest of the rendering approaches for crawl efficiency, rendering time and rendering reliability [2].

Why React apps still run into SEO problems

Important tags and content aren't in the first HTML response

A default single-page React app sends the browser an almost empty HTML file and builds everything else with JavaScript. Google will usually render it, but some decisions are made on the HTML before rendering happens. For example, a noindex tag in the initial HTML stops Google from rendering the page at all, so removing that tag with JavaScript does nothing [2]. Vercel's recommendation is to server-render critical SEO tags and important content so they're present in the initial response [2].

Most other crawlers don't run JavaScript

Google itself points out that not all bots can run JavaScript [1]. A December 2024 crawl-log study by Vercel and MERJ found that none of the major AI crawlers it measured executed JavaScript, including OpenAI's [3]. A client-side-only page can be perfectly readable to Google and blank to the crawlers behind AI answer engines. Our guide to getting cited by ChatGPT and Perplexity covers what those crawlers need.

Navigation that isn't made of links

Googlebot discovers new pages by reading the href attributes of links [1]. Menus built from buttons or divs with click handlers give it nothing to follow. Vercel recommends implementing important navigation as real anchor tags with an href, and notes that an up-to-date XML sitemap largely removes the discovery gap between rendering methods [2].

Soft 404s from client-side routing

In a single-page app, the server often returns a 200 status for every URL and lets JavaScript show a "page not found" message. To Google, that can look like a real page with thin content, which Search Console reports as a soft 404. Google's JavaScript SEO guide sets out ways to avoid this in client-side routing, such as redirecting to a URL where the server returns a genuine 404 [1].

Renders that fail quietly

When Google's render does fail, Vercel found it's usually because resources were blocked in robots.txt or because of specific edge cases. It recommends making sure JavaScript files, CSS and API endpoints aren't blocked, and using React error boundaries so one broken component doesn't take down the whole page [2].

Crawl budget, which probably isn't your problem

Crawl budget gets blamed for a lot of React SEO trouble, but Google's crawl budget guide is aimed at sites with more than a million pages that change weekly, or more than 10,000 pages that change daily. For other sites, Google says keeping your sitemap up to date and checking index coverage is enough [4]. Vercel makes the same point: heavier JavaScript can affect crawl budget on large sites with 10,000 or more frequently changing pages [2]. If you run a 30-page business site, crawl budget isn't why you're not ranking.

Does a React site hurt local SEO?

Less directly than it's often claimed. Google says local results are based mainly on relevance, distance and prominence, judged largely from your Business Profile. Prominence also draws on what Google knows about the business from across the web, such as links, articles and directories, along with review count and rating [5]. A React website alone won't knock you out of the map results.

Your website still matters in two places: the organic results for searches like "plumber in Pune", and the location or service-area pages that support your Business Profile. Those pages should carry your business name, address, hours and LocalBusiness structured data in the initial HTML rather than injecting them with JavaScript, so every crawler reads the same details your Business Profile shows. When those details change, Vercel's advice applies directly: content that needs to be re-indexed quickly should be in the server-rendered HTML, not just in client-side JavaScript [2].

How to check what Google sees on your React site

1. Open the page and view the source (Ctrl+U), not the browser inspector. If the main text, title, meta description, canonical tag and internal links aren't in the source, the page depends on rendering.
2. Run the URL Inspection tool's live test in Google Search Console and look at the rendered HTML and screenshot, which Vercel recommends for checking how Googlebot sees a page [2].
3. Check robots.txt to make sure it doesn't block your JavaScript bundles or API endpoints [2].
4. In Search Console's Page indexing report, look for soft 404s and for pages that should rank sitting under "Crawled – currently not indexed".
5. Load the page with JavaScript disabled in your browser. What you see is roughly what a crawler that doesn't render JavaScript gets.

How to fix React SEO problems

The core fix is to choose a rendering approach that hands crawlers complete HTML for every page that needs to rank. Vercel's comparison rated static generation and incremental static regeneration excellent for crawl efficiency, server-side rendering very good, and client-side rendering poor [2].

You don't always need a rebuild. In rough order of effort:

• Move the essentials into the server response. Titles, meta descriptions, canonical tags, structured data and main headings should be in the initial HTML.
• Pre-render the pages that need to rank. Home, service, location and blog pages can be generated as static HTML while the logged-in parts of the app stay client-side.
• Move to a framework. The React team deprecated Create React App for new projects in February 2025 and now recommends starting React apps with a framework, such as Next.js or React Router [6]. Both can render pages on the server or at build time. Our comparison of static generation and server-side rendering in Next.js helps you choose between the two.

Frequently asked questions

Is React bad for SEO?

No. React is a UI library, and what matters for SEO is where the HTML gets produced. A React site rendered on the server or at build time hands crawlers the same complete HTML as any static site. The risk comes from rendering everything in the browser, which leaves you relying on Google's renderer and invisible to crawlers that don't run JavaScript.

Can Google index content my React app loads from an API?

Yes. In the Vercel and MERJ study, all content loaded asynchronously through API calls was indexed [2]. Crawlers that don't execute JavaScript won't see it, though, so anything you need AI search or other bots to read should be in the server HTML.

Do I need Next.js for React SEO?

Not specifically. You need a setup that delivers complete HTML for pages that should rank. Next.js is one option; the React team also lists React Router among recommended frameworks [6], and pre-rendering selected routes can work for smaller sites.

Does page speed affect React SEO?

It does. Google's page experience system uses Core Web Vitals, so page speed remains a ranking consideration [2]. Server-rendered and static pages also tend to show content sooner, which helps users as much as crawlers.

Where to start

Run the five checks above on your three most important pages. If the content, title and links aren't in the page source, fix those pages first by moving the essentials into the server response or pre-rendering them. Then decide whether the rest of the site justifies a move to a framework.

If you'd rather have a team audit how crawlers see your React site and handle the rendering changes, Website Vikreta's web development team builds and migrates sites on Next.js with SEO built in from the start.

References

1. Google Search Central — Understand the JavaScript SEO basics
2. Vercel and MERJ — How Google handles JavaScript throughout the indexing process (July 2024)
3. Vercel — The Rise of the AI Crawler (December 2024)
4. Google Search Central — Optimize your crawl budget
5. Google Business Profile Help — How to improve your local ranking on Google
6. React — Sunsetting Create React App (February 2025)