JavaScript SEO: How Search Engines and AI Crawlers Render Your Pages

JavaScript SEO: How Search Engines and AI Crawlers Render Your Pages

JavaScript powers most of the modern web. It also quietly decides whether your pages get indexed, ranked, and cited. The gap between "a human sees it in the browser" and "a crawler sees it in the HTML" is where a lot of traffic disappears. This guide explains how Google renders JavaScript, the four main rendering strategies, why AI crawlers have made this an urgent issue rather than a nice-to-have, the problems that bite teams most often, and how to diagnose and fix them.

If you want the rendering-versus-AI angle on its own, see our companion piece on SSR vs CSR and why rendering decides whether AI can read your site. This article is the broader reference.

How Googlebot Renders JavaScript

Google does not treat a JavaScript page the way a browser does. Instead of fetching a page and immediately running all its scripts, Googlebot splits the work into stages so it can crawl efficiently at web scale.

The two waves of indexing

Google indexes JavaScript-heavy pages in two phases, often described as "two waves."

• Wave one (crawl and parse): Googlebot fetches the URL and reads the raw HTML in the initial response. For a single-page application this is often a near-empty shell. Any text, links, and metadata present in that raw HTML are picked up immediately.
• Wave two (render): Pages that need JavaScript are added to a render queue. When Google's resources allow, the Web Rendering Service loads the page in a headless version of Chromium, executes the JavaScript, and only then sees the content that script produced.

According to Google Search Central documentation, all pages returning a 200 HTTP status code are sent to the rendering queue. Google clarified in a December 2025 documentation update that pages returning a non-200 status (for example a 404) may skip rendering entirely, so error responses can lose their JavaScript-built content completely.

Why the render queue matters

Rendering is computationally expensive, so it does not happen instantly. The gap between wave one and wave two can range from hours to weeks depending on crawl demand and how complex the page is. Sites with stronger authority and steady crawl activity tend to move through the queue faster; new or low-traffic pages wait longer. The practical takeaway: anything that lives only in wave two is delayed at best and missed at worst.

One more 2026 update worth noting. In March 2026, Google removed the older "design for accessibility" guidance that recommended keeping pages functional without JavaScript, describing it as outdated. That does not mean fallbacks no longer matter. It means Google is confident in its own rendering, while everyone else (especially AI crawlers) is not.

The Four Rendering Strategies

How your content reaches a crawler depends on where the HTML is assembled. There are four common approaches, and the choice has direct SEO consequences.

• Client-side rendering (CSR): The server sends a minimal HTML shell plus JavaScript. The browser builds the page. Crawlers that do not run JavaScript see almost nothing.
• Server-side rendering (SSR): The server runs the JavaScript and sends fully formed HTML on each request. The page then hydrates to become interactive. Crawlers get complete content on the first fetch.
• Static site generation (SSG): Pages are pre-built into HTML files at deploy time and served as-is. Fastest for crawlers and users, best suited to content that does not change per request.
• Dynamic rendering: A bridge tactic that serves prerendered HTML to bots and the normal app to users. Google treats it as a workaround rather than a long-term recommendation, but prerendering services still rescue CSR sites in practice.

Comparison at a glance

Why AI Crawlers Make This Urgent

For years, JavaScript SEO was mostly a Google problem, and Google quietly got good at it. That comfort is now misleading, because the crawlers driving AI answer engines behave nothing like Googlebot.

GPTBot (OpenAI), ClaudeBot (Anthropic), and PerplexityBot generally do not execute JavaScript, do not wait for rendering, and do not make a second attempt. They fetch the raw HTML once and parse what is there. Vercel's analysis of its own nextjs.org traffic found that none of the major AI crawlers rendered JavaScript. Independent crawler studies have reported that a large majority of crawlers cannot execute JavaScript at all.

The consequence is blunt. Product descriptions, pricing, comparison tables, and FAQ answers that only appear after JavaScript runs are completely invisible to the systems behind ChatGPT, Claude, and Perplexity. A page that ranks fine in Google because Googlebot eventually rendered it can be a blank skeleton to an AI answer engine. As these tools take a growing share of research and discovery, "Google can render it" stops being good enough.

This is exactly why a machine-readable baseline matters. If you are building for the AI era, pair solid rendering with the practices in our guides on the machine-readable web standards and content structure for AI, and know which bots are even reaching you using the AI crawler map.

The JavaScript SEO Problems That Bite Most Often

Most JavaScript SEO failures come down to a handful of recurring patterns.

Content hidden behind JavaScript

If the main body text loads only after a script runs, AI crawlers miss it entirely and Googlebot indexes it late. The raw HTML should already contain the words that matter.

Links that are not real links

Navigation built with click handlers on non-anchor elements, or routes generated only after hydration, leave crawlers with no path to follow. Internal links must be standard anchor tags with real href attributes in the HTML.

Blocked JavaScript resources

If robots.txt blocks the script and CSS files Googlebot needs to render a page, the render fails and Google sees a broken or empty version. Let crawlers fetch the resources required to build the page.

Hydration mismatches and silent failures

Hydration is when client JavaScript takes over server-rendered HTML to make it interactive. When the server HTML and the client expectation do not match, React (and similar frameworks) can throw a mismatch and re-render, sometimes discarding content. Under crawler conditions (throttled execution, aggressive timeouts) hydration can fail silently, so Google indexes a page that is missing content, schema, internal links, or canonical tags even though humans see a perfect page. The defense is simple to state and hard to skip: your server-rendered HTML must be search-complete before a single line of client JavaScript runs. Hydration should enhance behavior, not assemble meaning.

How to Diagnose JavaScript Rendering Issues

You do not need to guess. Three checks will tell you what crawlers actually receive.

• Compare raw HTML to rendered HTML. View the page source (raw HTML) and look for your main content and links. If they are missing from the source but appear in the live page, they are JavaScript-dependent.
• Use the URL Inspection tool in Google Search Console. Run "Test Live URL," then "View Tested Page," and compare the HTML tab with the screenshot. This shows the HTML Googlebot rendered after executing JavaScript, which is the authoritative view of what Google sees.
• Disable JavaScript in your browser. This no longer represents what Googlebot sees, since Google renders JavaScript, but it is an excellent proxy for what AI crawlers see, since they do not. If the page collapses with JavaScript off, AI answer engines are getting that collapsed version.

How to Fix It

Fixes follow directly from the diagnosis.

• Render meaningful content on the server. Move to SSR or SSG so the HTML response already contains your text, links, and structured data. This is the single highest-leverage change for both Google and AI visibility.
• Prerender if you cannot rebuild. For an existing CSR app, a prerendering or dynamic-rendering service can serve static HTML to bots while you plan a longer-term migration.
• Ship real anchor links. Ensure every internal link is a genuine href in the HTML so crawlers can discover and follow your site structure.
• Unblock render resources. Confirm robots.txt allows the JavaScript and CSS that Googlebot needs to render.
• Put structured data in the initial HTML. Schema injected only by client JavaScript can be missed; include it server-side.
• Keep server HTML search-complete. Treat hydration as an enhancement layer, never the source of your content or metadata.

Frequently Asked Questions