JavaScript SEO Checklist for React, Next.js and Single-Page Apps

How Google processes a JavaScript page

Google works in three phases: crawling, rendering and indexing (Google, JavaScript SEO basics, updated March 4, 2026).

1. Crawl. Googlebot fetches the URL and reads the HTML the server sent. It finds links in that HTML.
2. Render. Pages that return a 200 status go into a render queue, where a headless Chromium runs your JavaScript. Google notes that pages with a non-200 status may not be rendered at all.
3. Index. Google indexes the rendered HTML.

Two things follow. Anything only in the rendered version arrives later and depends on rendering working. And a crawler that never renders, which includes many AI search bots, only ever sees step 1.

Rendering options compared

Google calls dynamic rendering (serving bots a different version) a workaround, not a long-term solution. Prefer SSR or static generation.

The checklist: 12 checks with a test for each

Checks 3, 5, 6, 7, 8 and 10 come straight from Google's JavaScript SEO basics page linked above.

Soft 404s: the most common SPA problem

A single-page app often answers every URL with 200 and the same shell, then shows "Not found" with JavaScript. Google sees a 200 page with nothing useful on it and reports it as a soft 404, or worse, indexes it. Google gives two fixes: redirect with JavaScript to a URL where the server returns a 404, or add <meta name="robots" content="noindex"> to error views with JavaScript. If your framework supports it, a real server 404 is cleaner than both.

The noindex trap

Teams sometimes ship noindex in the HTML of a staging build and plan to remove it with JavaScript in production. Google says that when it sees noindex it may skip rendering, so the script that removes the tag never runs and the page stays out of the index. Set robots tags on the server, per environment.

Framework notes

• Next.js: the App Router renders on the server by default. Use the metadata API or generateMetadata for titles, descriptions and canonicals, and notFound() so missing pages return 404. Be careful with pages marked "use client" at the top level that fetch their main content in the browser.
• Nuxt: SSR is on by default. Use useHead or useSeoMeta, and throw a 404 error in data fetching for missing records.
• Astro: static HTML by default with islands of JavaScript. Usually the lowest risk.
• Plain React or Vue SPA: the highest risk. Consider prerendering the public pages or moving them to a framework with SSR.
• Angular: use Angular SSR for public routes.

AI crawlers read the raw HTML

Google renders JavaScript. Many AI search crawlers fetch the HTML and do not. If check 1 fails, assistants like ChatGPT search or Perplexity may see an empty page and never cite you. See robots.txt for AI crawlers for which bots to let in.

Test every release in five minutes

1. curl -s one URL per template and grep for the H1 and a sentence of body text.
2. curl -I a made-up URL and confirm a 404.
3. URL Inspection > Test live URL on one page per template. Compare the screenshot with the real page.
4. Rich Results Test on the product or article template.
5. Check Search Console > Indexing > Pages a week later for new soft 404s or "Crawled, currently not indexed" spikes.