Deutsch
How search engines render

Rendered HTML

Rendered HTML is the markup of a page after JavaScript has run, in other words the current state of the DOM. It can differ from the raw HTML the server delivers. In SEO, what counts is which version Google sees when it indexes a page.

Why does rendered HTML matter for SEO?

Google processes JavaScript pages in three phases: crawling, rendering and indexing. A headless Chromium renders the page, Google parses the rendered HTML for links again, and uses it to index the page. Content, links and meta tags that only JavaScript creates are therefore visible to Google after the rendering step.

Google does not render JavaScript on pages blocked by robots.txt or from blocked files. Content missing from the rendered HTML is missing from the index. Google also notes that not all bots can run JavaScript.

A test by searchVIU (2017) showed that Google goes by the rendered version. hreflang annotations that stayed in the page source but were removed from the DOM with JavaScript were no longer applied. In a study by searchVIU (2020) of more than 200 domains, the rendered HTML differed from the source on 96% of them, in text, internal links, titles or meta tags. At the URL level, 56% of pages were affected, mostly because JavaScript added text and links.

Raw HTML and rendered HTML comparedLeft: the raw HTML as the server sends it, with an empty title and an empty div with the ID app. Right: the same document after rendering, where JavaScript has added the title, an H1 and two links. Google only sees this content and these links in the rendered HTML.RAW HTMLserver responseRENDERED HTMLDOM after JavaScriptJavaScript<head><title></title>empty</head><body><div id="app"></div>empty<script src="app.js"></body><head>+<title>Running shoes</title></head><body><div id="app">+<h1>Running shoes</h1>+<a href="/women/">Women</a>+<a href="/men/">Men</a></div><script src="app.js"></body>Schematic example. Anything JavaScript adds only exists in the rendered HTML.
The raw HTML of a JavaScript page lacks the title, heading and links. Google indexes the rendered HTML and parses it for links again. Source: Google Search Central: Understand the JavaScript SEO basics.

Example

The raw HTML of a single-page application often holds only an empty container:

HTML
<div id="app"></div>
<script src="/app.js"></script>

After app.js has run, the rendered HTML contains the content:

HTML
<div id="app">
  <h1>Running shoe model X</h1>
  <a href="/running-shoes/">All running shoes</a>
</div>

How can you check it?

Chrome’s DevTools explain that HTML is the initial page content and the DOM the current one, and the DOM changes when JavaScript adds, removes or edits nodes. For the version Google sees, the URL Inspection tool in Search Console shows loaded resources, JavaScript console output and the rendered DOM. Google also names the Rich Results Test.

More on the searchVIU blog

Sources

  1. Understand JavaScript SEO basics – Google Search Centraldevelopers.google.com
  2. Fix Search-related JavaScript problems – Google Search Centraldevelopers.google.com
  3. URL Inspection Tool – Search Console Helpsupport.google.com
  4. HTML versus the DOM – Chrome DevToolsdeveloper.chrome.com
  5. JavaScript SEO test: Does Google use pre- or post-DOM HTML for interpreting hreflang? – searchVIU blog (2017)searchviu.com
  6. JavaScript Crawling Study: Rendered vs. Non-Rendered HTML – searchVIU blog (2020)searchviu.com

Last updated: