English
Wie Suchmaschinen rendern

Gerendertes HTML

Auch genannt: Rendered HTML, gerendertes DOM

Gerendertes HTML ist der HTML-Code einer Seite, nachdem JavaScript ausgeführt wurde. Es entspricht dem fertigen DOM und kann sich deutlich vom Roh-HTML unterscheiden, das der Server ausliefert. Für SEO zählt, welche Version Google beim Indexieren sieht.

Was bedeutet gerendertes HTML für SEO?

Google verarbeitet JavaScript-Seiten in drei Phasen: Crawling, Rendering und Indexierung. Beim Rendering führt ein Headless-Chromium das JavaScript aus, danach nutzt Google das gerenderte HTML zum Indexieren. Inhalte, Links und Meta-Angaben, die erst per JavaScript entstehen, sind deshalb erst nach diesem Schritt für Google sichtbar.

Dateien, die per robots.txt gesperrt sind, führt Google nicht aus. Fehlt dadurch Inhalt im gerenderten HTML, fehlt er auch im Index. Google weist außerdem darauf hin, dass nicht alle Bots JavaScript ausführen können, und empfiehlt deshalb serverseitiges Rendering oder Pre-Rendering.

Dass Google sich an der gerenderten Fassung orientiert, zeigte ein Test von searchVIU (2017). hreflang-Tags, die im Quellcode standen und per JavaScript aus dem DOM entfernt wurden, wertete Google nicht mehr aus. Wie oft sich beide Fassungen unterscheiden, untersuchte eine Studie von searchVIU (2020) an über 200 Domains. Bei 96 % davon wich das gerenderte HTML in Text, internen Links, Title oder Meta-Tags vom Quellcode ab, auf URL-Ebene betraf das 56 % der Seiten. Meist hatte JavaScript Text und Links ergänzt.

Roh-HTML und gerendertes HTML im VergleichLinks das Roh-HTML, wie der Server es schickt: leerer Title und ein leeres div mit der ID app. Rechts dasselbe Dokument nach dem Rendering: JavaScript hat Title, H1 und zwei Links eingefügt. Erst im gerenderten HTML sieht Google diese Inhalte und Links.ROH-HTMLAntwort des ServersGERENDERTES HTMLDOM nach JavaScriptJavaScript<head><title></title>leer</head><body><div id="app"></div>leer<script src="app.js"></body><head>+<title>Laufschuhe</title></head><body><div id="app">+<h1>Laufschuhe</h1>+<a href="/damen/">Damen</a>+<a href="/herren/">Herren</a></div><script src="app.js"></body>Schematisches Beispiel. Was erst JavaScript einfügt, steht nur im gerenderten HTML.
Im Roh-HTML einer JavaScript-Seite fehlen Title, Überschrift und Links. Google indexiert das gerenderte HTML und sucht dort erneut nach Links. Quelle: Google Search Central: Grundlagen von JavaScript-SEO.

Beispiel

Das Roh-HTML einer Single-Page-Anwendung enthält oft nur einen leeren Container:

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

Im gerenderten HTML steht nach dem Ausführen von app.js der eigentliche Inhalt:

HTML
<div id="app">
  <h1>Laufschuh Modell X</h1>
  <a href="/laufschuhe/">Alle Laufschuhe</a>
</div>

So prüfst du es

Im Browser zeigt „Seitenquelltext anzeigen“ das Roh-HTML, die Elemente-Ansicht der Entwicklertools das aktuelle DOM. Das von Google gerenderte HTML liefert das URL-Prüftool der Search Console. Google nennt dafür auch den Rich Results Test.

Mehr dazu im searchVIU-Blog

Quellen

  1. Understand JavaScript SEO basics – Google Search Centraldevelopers.google.com
  2. URL-Prüftool – Search Console-Hilfesupport.google.com
  3. HTML versus the DOM – Chrome DevToolsdeveloper.chrome.com
  4. JavaScript SEO Test: Verwendet Google Pre- oder Post-DOM-HTML für die Interpretation von hreflang? – searchVIU-Blog (2017)searchviu.com
  5. JavaScript Crawling Studie: Gerendertes vs. nicht gerendertes HTML – searchVIU-Blog (2020)searchviu.com

Stand: