Is my React website SEO friendly?
A React site can rank well, but only if crawlers can read it. These six checks take about ten minutes and need nothing but a browser.
Why React sites run into SEO problems
A plain client-side React app, such as one started with Vite, sends the browser an almost empty HTML file: a root div and a script tag. The text, the links and often the title appear only after JavaScript runs.
Google can run that JavaScript. Googlebot fetches the HTML, queues the page for rendering, then renders it in an up-to-date Chromium and indexes the result. But rendering can be delayed, and it fails when a script throws an error or a file it needs is blocked. Many other crawlers skip rendering altogether: a December 2024 server-log study by Vercel and MERJ found that GPTBot, ClaudeBot and PerplexityBot do not execute JavaScript, so a client-rendered page looks nearly empty to them.
The 10-minute check
1. Compare view-source with Inspect
Open a page you want to rank and press Ctrl+U (Cmd+Option+U on a Mac). This shows the raw HTML your server sent. Search it for a sentence from the middle of the page. Then right-click the page and choose Inspect, which shows the page after JavaScript ran. If the sentence appears in Inspect but not in view-source, that content depends on JavaScript.
2. Find the title and meta description in the raw HTML
In the same view-source window, search for <title> and name="description". If every route shows the same title, or the tags only show up in Inspect, they are being set in the browser, for example by React Helmet in a client-only app. A crawler that does not render sees your default title on every page.
3. Check that your links are real links
Navigation should be made of <a href="/pricing/"> elements. React Router's <Link> renders one, so it is fine. A button or div with an onClick handler that calls navigate() is not a link, and crawlers never discover the page behind it. In Inspect, click on a menu item and confirm it is an a element with an href.
4. Visit a URL that should not exist
Open yoursite.com/this-page-does-not-exist with the Network tab of DevTools open. Many single-page apps return the same index.html with status 200 for every path and only show "not found" on screen. Google treats these as soft 404s, and broken URLs can end up indexed. A missing page should return status 404.
5. Make sure robots.txt does not block your scripts
Open yoursite.com/robots.txt. If it disallows folders such as /static/ or /assets/, or all .js files, Google cannot fetch the files it needs to render your pages.
6. See the page the way Google saw it
In Google Search Console, run URL Inspection on a key page, choose Test live URL, then View tested page. The HTML tab shows the rendered HTML Google produced, and the screenshot shows whether your main content actually loaded.
What to fix first
- Content or links missing from the raw HTML on pages you want to rank: render those pages on the server. Next.js, React Router's framework mode and Astro can all send finished HTML.
- A small site with a few routes that rarely change: prerendering each route to static HTML at build time is often enough.
- Titles and descriptions set in the browser: set them per route on the server, along with the canonical tag.
- Every path returns 200: make unknown paths return a real 404 status.
- onClick navigation: replace it with links that have an href.
Check every page at once
The steps above test one page at a time. SiteScope reads every page of your site as raw HTML, the way non-rendering crawlers do, and flags pages with fewer than 200 words of text, missing or duplicate titles, and broken links. The JavaScript SEO checker page explains what it looks for.
Free. No sign-up. Crawls up to 300 pages per audit.