JavaScript Rendering Example: Raw vs. Rendered HTML
I turned a wolf inside out in the dark, and by morning it had, to the astonishment of the village, become a very different wolf.
The short answer
- What it is
- This issue means the raw HTML and the rendered page differ in final URL, title, description, H1, canonical, meta robots, or status. A change of over 20% in word or link counts also triggers it.
- Why it matters
- Crawlers that skip JavaScript see only the raw version, and even Google may process the two at different times. Key tags that change after load can send mixed signals.
- How a crawler should report it
- Show the raw and rendered value side by side for each changed field, with the percent change in word and link counts. Note the 20% limit, and name the field that triggered the flag.
- Live examples
/lab/render-diffs/(positive)/lab/render-diffs/near-miss/(near miss)
Comparing What the Server Sends With What the Browser Builds
JavaScript rendering is the step where a browser runs scripts and builds the final page. Client-side frameworks often send a nearly empty HTML shell and add the content afterward. Tag managers can rewrite titles or inject canonical tags. Personalization and A/B tests can swap headings. Each of these creates a gap between what the server sent and what a person eventually sees, and the gap may be small or very large.
Google handles JavaScript in stages. It crawls the HTML, queues the page, renders it with a recent version of Chromium, and then indexes the result. Rendering is usually quick, but it is a separate step. Some rules are strict. If the raw HTML holds a noindex tag, Google may never render the page, so a script cannot remove it. Many other crawlers, including several AI bots, read only the raw HTML and never run scripts at all.
To detect differences, fetch the page twice. Save the raw response, then load the same URL in a headless browser and save the final DOM. Compare the title, description, H1, canonical, robots tag, status, and final URL. Then count words and links in both. A small change, such as a date or a greeting, is normal. Google's URL Inspection tool also shows the rendered HTML, which is useful for confirming a problem on a single page.
The most reliable fix is to put key content in the first response, using server-side rendering or static generation. Titles, canonicals, robots tags, and main links should be correct before any script runs. If a script must change the page, make sure it agrees with the server version. Use real links with href values. Avoid changing the canonical or robots tag on the client, because that gives search engines two answers to one question.