Zwei Personen können dieselbe Webseite aufrufen und dabei zwei unterschiedliche Dinge sehen. Die erste liest den Text und betrachtet die Bilder, die der Browser anzeigt. Die zweite liest den zugrunde liegenden HTML-Code, der die Position jedes Elements, die Überschriftenhierarchie und die Verweise auf Stylesheets festlegt. Wer weiß, wie man auf diesen Code zugreift, wechselt auf die Seite der zweiten Person – jener, die die tatsächliche Struktur einer Website lesen kann.
Ursprünglicher Quellcode und gerendertes DOM: Was die jeweilige Ansicht verrät
Bevor Sie ein Tool auswählen, sollten Sie einen wichtigen Unterschied kennen. Mit der Tastenkombination Strg+U (oder Cmd+Option+U auf dem Mac) öffnen Sie den rohen Quellcode, also die vom Server gesendete HTML-Antwort. Der Tab „Elemente“ in den Entwicklertools zeigt dagegen das aktuelle DOM, das nach dem Laden möglicherweise durch JavaScript verändert wurde.
Bei einer statischen Website sind die beiden Ansichten nahezu identisch. Bei einer modernen Webanwendung, die ihre Inhalte im Browser aufbaut, kann der ursprüngliche Quellcode fast leer wirken, während das DOM jede Menge Inhalte enthält, die auf dem Bildschirm sichtbar sind.
| Kriterium | Quellcode (Strg+U) | Gerendertes DOM (Tab „Elemente“) |
|---|---|---|
| Angezeigter Inhalt | HTML, wie es vom Server empfangen wurde | HTML nach der Ausführung von JavaScript |
| Echtzeitänderungen | Nein, es handelt sich um eine unveränderliche Momentaufnahme | Ja, jede dynamische Änderung wird angezeigt |
| Sichtbare CSS-Stile | Nur die Verweise auf Stylesheets | Berechnete Stile für jedes ausgewählte Element |
| SEO-Nutzen | title-, meta-description- und canonical-Tags überprüfen | Von Skripten eingefügte Inhalte erkennen |
| Wichtigste Tastenkombination | Strg+U (Windows/Linux), Cmd+Option+U (Mac) | F12 oder Strg+Umschalt+I, dann der Tab „Elemente“ |
Wenn Sie beide Ansichten derselben Seite vergleichen, erkennen Sie, was JavaScript nach dem ersten Laden hinzufügt oder verändert. Diese Analysemethode kann sich auch ein Anfänger in wenigen Minuten aneignen.
Wer sich näher mit dem HTML-Code einer Website befassen möchte, findet in der Unterscheidung zwischen rohem Quellcode und DOM den zuverlässigsten Ausgangspunkt.
Ein bestimmtes Element mit den DevTools des Browsers untersuchen
Statt Hunderte Codezeilen durchzugehen, können Sie mit dem Inspektor auf ein sichtbares Element (eine Überschrift, eine Schaltfläche oder ein Bild) zeigen und direkt zum entsprechenden HTML-Abschnitt springen. Klicken Sie mit der rechten Maustaste auf das Element und wählen Sie „Untersuchen“. Daraufhin öffnet sich das Bedienfeld und die entsprechende Codezeile wird hervorgehoben.
Was der Tab „Elemente“ konkret anzeigt
Im Bedienfeld wird der DOM-Baum angezeigt. Jeder Knoten lässt sich aufklappen, um seine untergeordneten Elemente einzublenden. Rechts listet der Bereich „Stile“ die CSS-Regeln auf, die auf das ausgewählte Element angewendet werden – in der Reihenfolge ihrer Priorität.
- Strukturelle HTML-Tags (h1, h2, nav, footer) erscheinen in ihrer tatsächlichen Hierarchie. So lässt sich überprüfen, ob eine Website eine schlüssige Überschriftenstruktur verwendet.
- Attribute wie alt bei einem Bild oder href bei einem Link lassen sich ablesen, ohne den gesamten Quellcode durchsuchen zu müssen.
- Vorübergehende Änderungen sind möglich: Wenn Sie im DOM auf einen Text doppelklicken, können Sie ihn bearbeiten. So lässt sich eine visuelle Änderung testen, ohne die Originaldatei anzufassen.
Alle Änderungen, die Sie im Inspektor vornehmen, verschwinden beim Neuladen der Seite. Die tatsächliche Website kann dadurch nicht verändert werden. Diese Experimentiermöglichkeit ist besonders hilfreich, um zu verstehen, wie sich eine CSS-Regel auf das Layout auswirkt.
Browser und unterschiedliche Zugriffsmöglichkeiten
In Chrome, Firefox und Edge funktioniert der Inspektor sehr ähnlich. In Safari ist ein zusätzlicher Schritt nötig: Aktivieren Sie zunächst in den erweiterten Einstellungen das Menü „Entwickler“, bevor Sie Elemente untersuchen können.
In Firefox stehen Echtzeitänderungen an Stilen stärker im Vordergrund; außerdem ist ein CSS-Grid-Editor integriert. In Chrome bietet der Tab „Netzwerk“ eine detaillierte Übersicht der HTTP-Anfragen. Damit lässt sich nachvollziehen, woher die von der Seite geladenen Ressourcen stammen.
SEO-Prüfung direkt im HTML-Quellcode
Eine der praktischsten Anwendungen für das Lesen des Quellcodes ist die Suchmaschinenoptimierung. Statt eine Erweiterung eines Drittanbieters zu installieren, können Sie den Quellcode mit Strg+U öffnen und mit Strg+F nach einem bestimmten Tag suchen. So erhalten Sie sofort eine Antwort.
Das title-Tag und die Meta-Description befinden sich im head-Bereich des Quellcodes. Suchen Sie einfach nach „title“ oder „meta name=”description”“, um sie zu finden. So lässt sich am schnellsten überprüfen, ob diese Tags vorhanden sind und ob ihr Inhalt den Erwartungen entspricht.
Drei weitere häufige Prüfungen lassen sich auf dieselbe Weise durchführen:
- Das canonical-Tag (Suche nach „rel=”canonical”“), um festzustellen, ob die Seite den Suchmaschinen eine bevorzugte URL mitteilt
- Die Hn-Tags (Suche nach „<h1“, „<h2“, „<h3“), um die Überschriftenhierarchie ohne externes Tool zu überprüfen
- Das Tracking-Skript (Suche nach „gtag“ oder „analytics“), um sicherzustellen, dass der Tracking-Code eingebunden ist
Diese Suche im Quellcode funktioniert in jedem Browser und erfordert keine fortgeschrittenen technischen Kenntnisse. Mit Strg+U und anschließend Strg+F lassen sich die meisten schnellen SEO-Prüfungen durchführen.
Dynamische Seiten und mit JavaScript generierte Inhalte
Wenn eine Seite im ursprünglichen Quellcode leer erscheint, bedeutet das nicht unbedingt, dass sie keine Inhalte enthält. Moderne JavaScript-Frameworks bauen die Benutzeroberfläche im Browser auf: Der Server sendet ein minimales HTML-Grundgerüst, und das Skript ergänzt den Rest nach dem Laden.
Bei solchen Seiten gibt der rohe Quellcode nicht wieder, was Besucher sehen. Nur der Tab „Elemente“ in den DevTools zeigt die Inhalte, die tatsächlich im DOM vorhanden sind. Dieser Unterschied wirkt sich direkt auf die SEO aus: Google kann JavaScript ausführen, um Inhalte zu indexieren. Mit den URL-Prüftools von Google lässt sich jedoch überprüfen, was tatsächlich abgerufen und gerendert wurde.
Der Tab „Netzwerk“ in den DevTools ergänzt diese Analyse. Er listet alle Anfragen auf, die von der Seite gesendet werden (CSS-Dateien, JS-Skripte, API-Aufrufe). Wenn Sie nach Dateityp filtern, erkennen Sie schnell, welche Ressourcen für die angezeigten Inhalte verantwortlich sind.
Der Vergleich von Quellcode, gerendertem DOM und Netzwerkanfragen vermittelt ein vollständiges Bild davon, wie eine Seite funktioniert. Erst die Kombination dieser drei Informationsebenen macht aus einem kurzen Blick eine fundierte technische Diagnose.
