Quick answer
For React and other single-page applications, SEO requires that each route returns meaningful HTML content, a unique title, meta description and canonical, correct HTTP status codes and crawlable anchor links. Use server-side rendering, static site generation or build-time prerendered snapshots so crawlers that do not execute JavaScript still see content, and verify rendered output in Search Console’s URL Inspection tool.
Key takeaways
- An empty HTML shell relies on crawlers executing JavaScript.
- Each route needs its own metadata, canonical and status code.
- Use real anchor links so crawlers can discover pages.
- Prerendering or SSR protects visibility in search and AI crawlers.
Who this guide is for
Developers and product teams running React, Vue or Angular websites that are not indexing or ranking as expected.
Understand the problem
A typical client-rendered single-page app sends a minimal HTML file with a root element and a JavaScript bundle. The content appears only after the browser runs the script. Google can render JavaScript using an evergreen Chromium, though rendering may be queued after crawling. Other search engines, social media link previews and many AI crawlers may not run JavaScript fully, so they see an empty page. That can mean missing content, generic titles and poor link previews.
Choose a rendering strategy
Server-side rendering generates HTML for each request, as frameworks like Next.js, Nuxt or Remix do. Static site generation builds HTML for each route at build time, ideal for content that changes infrequently. Prerendering or snapshot generation renders client-side routes in a headless browser during the build and saves the HTML. Each option delivers content in the initial response. The best choice depends on how dynamic your pages are and how much you can change the architecture.
Give every route unique metadata
Each URL needs its own title, meta description, canonical URL, Open Graph tags and structured data, present in the HTML response rather than only injected after load. Libraries such as react-helmet-async can manage head tags, but they must run during server or build rendering for the output to contain them. Check that canonical tags do not all point to the home page, a common SPA mistake.
Return correct status codes
Client-side routers often show a “not found” component while the server returns 200 for every path. Search engines may then index error pages as soft 404s. Configure the server or edge worker to return 404 for unknown routes and 301 or 308 for redirects. Maintain a route manifest that the server can check, so only valid paths return 200.
Use crawlable links and navigation
Crawlers discover pages through anchor elements with href attributes. Navigation implemented with buttons and onClick handlers, or links generated only after user interaction, may not be followed. Use your router’s link component that renders proper anchors. Include an XML sitemap listing canonical URLs and an HTML sitemap or hub pages for deep content.
Handle performance and hydration
Large JavaScript bundles delay interactivity, affecting Interaction to Next Paint and user experience. Split code by route, defer non-critical scripts and avoid layout shifts during hydration when the client takes over server-rendered HTML. Make sure prerendered content matches what the client renders, otherwise users may see content flash or change, and crawlers may see different content from users.
Verify and monitor
Use URL Inspection in Search Console to view rendered HTML and screenshots for key routes. Fetch pages with curl or a non-JavaScript user agent to see what basic crawlers receive. Check social preview tools for Open Graph output. Add automated tests in the build pipeline that assert each important route’s snapshot has one H1, the expected title and canonical, and key text, so regressions are caught before deployment.
Scope checklist
- Does the initial HTML of each route contain meaningful content?
- Are title, description and canonical unique per route?
- Do unknown routes return 404?
- Is navigation built with real anchor links?
- Are snapshots tested in the build pipeline?
Frequently asked questions
Can Google index React websites?
Yes, Google can render JavaScript, but delays and errors can occur. Server-side rendering or prerendering makes indexing more reliable and helps other crawlers.
Is Next.js better for SEO than Create React App?
Next.js supports server rendering and static generation out of the box, which simplifies SEO. Client-rendered apps can achieve similar results with prerendering.
Do AI crawlers execute JavaScript?
Support varies by crawler and changes over time. Many fetch HTML without fully rendering scripts, so content in the initial HTML is safer.
Sources and implementation references
- Google Search Central: JavaScript SEO basics
How Googlebot crawls, renders and indexes JavaScript applications.
- Google Search Central: fix search-related JavaScript problems
Common SPA issues including soft 404s and links.
Prepared with AI assistance as an engineering decision guide. Examples are illustrative unless explicitly labelled as an internal implementation. No independent expert review or customer outcome is claimed.
Want more qualified enquiries from search and AI answers?
Share your website, main services and target markets. We review technical, content and conversion gaps before proposing scope. Scope, access, dependencies and commercial terms are agreed before delivery. Do not submit passwords, API keys or confidential records.