Is Your React Website Invisible to AI Crawlers? How to Fix JavaScript SEO
React, Vue and Angular make fast, app-like websites, but a site built as a single-page app (SPA) sends an almost empty HTML file and fills in the content with JavaScript in the browser. People never notice. Crawlers do. Google can render JavaScript, but most AI crawlers read only the raw HTML, so to them every page of an SPA can look blank.
Why is a React site invisible to AI crawlers?
Because the text is not in the HTML the server sends. A typical SPA responds with a page title, some meta tags and an empty <div id="root">. The headings, paragraphs and links only exist after the JavaScript bundle downloads and runs.
- Google renders JavaScript, but rendering can happen later than the first crawl, and anything that fails during rendering is never seen.
- AI crawlers that feed answer engines generally fetch the HTML and move on without running JavaScript.
- Social and messaging previews read only the HTML head, which is why per-page titles and images there matter too.
How do you check whether your site has the problem?
- Open a page, right-click and choose View page source (not Inspect). If you cannot find your headline text in the source, crawlers that do not run JavaScript cannot either.
- Or run
curl https://yoursite.com/some-page/in a terminal and look for your page text in the output. - In Google Search Console, use URL Inspection and view the crawled page to see what Google rendered.
What are the ways to fix it?
1. Server-side rendering (SSR)
Frameworks such as Next.js (React), Nuxt (Vue) and Angular’s SSR render each page on the server for every request, so the HTML arrives complete. It is the most thorough fix and suits sites with content that changes per request, at the cost of running a Node server.
2. Static site generation (SSG)
The same frameworks can render pages once at build time and serve them as plain HTML files. It is fast and cheap to host, and ideal when content changes only when you publish.
3. Prerendering an existing SPA at build time
If rewriting the app is not justified, a build step can open each route in a headless browser, save the rendered HTML into that route’s file, and let the app take over in the browser as before. This is what we did for our own site: every page now carries its full text for crawlers, and visitors see exactly the same app.
4. Dynamic rendering
Serving a rendered version only to bots is something Google describes as a workaround rather than a long-term solution. If you do anything like it, the content bots receive must be the same as what people see, or it becomes cloaking.
What else should a JavaScript site get right?
- A unique title, description and canonical URL in the HTML of every route, not only after JavaScript runs.
- Real links: navigation built from
<a href>elements that crawlers can follow, not click handlers. - One URL format: pick with or without a trailing slash, link to that version everywhere, and redirect the other.
- A sitemap listing every page you want found, referenced from robots.txt.
- Real 404 responses for pages that do not exist, instead of the homepage answering every address.
- Structured data (JSON-LD) in the HTML for your organisation, services, articles and FAQs.
Frequently asked questions
Does Google index React websites?
Yes, Google renders JavaScript and can index SPAs. Indexing can still be slower or incomplete, and other search engines and most AI crawlers depend on the raw HTML, so rendering the content into the HTML is the safer approach.
Do I have to move to Next.js?
Not necessarily. Next.js is a strong choice for new builds. For an existing React app, prerendering at build time often gives crawlers the same complete HTML with far less change to the code.
Will prerendering slow my site down?
No. The extra work happens once, when the site is built. Visitors receive ordinary HTML files, which are as fast to serve as any static page.
Not sure what crawlers see on your site? Ask us to check it.