English
Wie Suchmaschinen rendern

Quellcode (Raw HTML)

Auch genannt: Raw HTML, Quelltext, Seitenquelltext, HTML-Quellcode

Quellcode (Quelltext) bezeichnet allgemein den von Menschen lesbaren Text eines Programms. In der SEO ist meist der Raw HTML gemeint: der HTML-Quelltext einer Seite, so wie ihn der Server in der HTTP-Antwort liefert, bevor der Browser oder ein Crawler JavaScript ausführt.

Raw HTML und gerendertes HTML

Der Browser liest den Raw HTML und baut daraus das DOM. Führt die Seite danach JavaScript aus, kann sich der Inhalt ändern. Den Stand nach der Ausführung nennt man gerendertes HTML.

Google beschreibt, dass das erste HTML in der Server-Antwort möglicherweise noch nicht den tatsächlichen Inhalt enthält, etwa bei Single-Page-Apps. Ein Headless Chromium rendert die Seite später, sobald Googles Ressourcen es erlauben, und Google indexiert das gerenderte HTML.

Der Unterschied betrifft jeden Crawler, der kein JavaScript ausführt. Er sieht nur den Raw HTML. Wichtige Inhalte, Links, Titel und Canonical-Angaben im Raw HTML sind damit unabhängig vom Rendering lesbar.

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.

Beide Versionen ansehen

  • Raw HTML: im Browser über „Seitenquelltext anzeigen“ oder mit einem Abruf per curl
  • Gerendertes HTML: in den Entwicklertools im Reiter Elemente, oder im URL-Prüftool der Search Console, mit dem sich laut Google das gerenderte DOM ansehen lässt

Beispiel

Shell
curl -s https://example.com/produkt | grep -i "<h1"

Liefert der Befehl keine <h1>-Zeile, der Browser zeigt aber eine Überschrift, entsteht sie erst durch JavaScript. Die Überschrift steht dann nur im gerenderten HTML.

Häufige Fehler

  • Wichtiges nur per JavaScript ergänzen: Nicht jeder Bot führt JavaScript aus. Inhalte, Links, Titel und Canonical-Angaben im Raw HTML sind für alle Crawler lesbar.
  • Links ohne href: Google entdeckt Links nur, wenn sie <a>-Elemente mit href-Attribut sind.
  • Abweichende Canonical-Angabe: Setzt JavaScript eine Canonical-URL, muss sie dem Wert im Raw HTML entsprechen.

Häufige Fragen

Wie komme ich an den Quellcode einer Webseite? Über das Kontextmenü des Browsers („Seitenquelltext anzeigen“) oder die Entwicklertools.

Was kann man mit dem Quellcode machen? Ansehen, auf SEO-Elemente wie Title, Meta-Tags und Links prüfen und mit dem gerenderten HTML vergleichen.

Mehr dazu im searchVIU-Blog

Quellen

  1. JavaScript SEO Basics – Google Search Centraldevelopers.google.com
  2. Introduction to the DOM – MDN Web Docsdeveloper.mozilla.org
  3. Quelltext – Wikipediade.wikipedia.org
  4. Fix Search-related JavaScript problems – Google Search Centraldevelopers.google.com

Stand: