Den HTML-Code einer Webseite anzuzeigen, scheint trivial zu sein: Rechtsklick, “Seitenquelltext anzeigen”, fertig. Die Realität ist jedoch nuancierter, da die Mehrheit der Webseiten auf JavaScript-Frameworks wie React oder Vue basiert. Der rohe Quellcode, der vom Server zurückgegeben wird, entspricht nicht mehr unbedingt dem im Browser sichtbaren Inhalt. Zu wissen, welche Methode zu verwenden ist und in welchem Kontext, macht den entscheidenden Unterschied zwischen einer nützlichen Inspektion und einer leeren Lektüre.
Quellcode anzeigen oder DOM inspizieren: Was jede Methode zeigt
Die Browser bieten zwei Zugangswege zum Code einer Seite. Sie geben nicht die gleiche Information zurück, und das Verwechseln der beiden verfälscht jede Analyse.
| Kriterium | Quellcode anzeigen (Ctrl+U) | Element inspizieren (F12 / DevTools) |
|---|---|---|
| Angezeigter Inhalt | Rohe HTML-Antwort, die vom Server gesendet wird | Aktives DOM nach Ausführung von CSS und JavaScript |
| Spiegelt die visuelle Darstellung wider | Nein, auf modernen JS-Seiten | Ja, in Echtzeit |
| Lokale Änderungen möglich | Nein | Ja (vorübergehend, auf der Browser-Seite) |
| Nützlich für technische SEO-Audits | Ja (Crawler-Perspektive) | Ja (Benutzer-Perspektive) |
| Tastenkombination (Chrome, Firefox) | Ctrl+U (Windows) / Cmd+Option+U (Mac) | F12 oder Ctrl+Shift+I |
“Quellcode anzeigen” zeigt, was der Server sendet, nicht was der Besucher sieht. Auf einer Seite, die mit einem JavaScript-Framework erstellt wurde, kann dieser Quellcode auf ein leeres <div id="root"> gefolgt von einer umfangreichen JS-Datei beschränkt sein. Der Text, die Bilder und die Navigationsstruktur erscheinen erst nach der Ausführung des Skripts durch den Browser.
Die DevTools, die über F12 zugänglich sind, zeigen das DOM, wie es der Browser erstellt hat. Diese Version entspricht der tatsächlichen Darstellung. Wenn das Ziel darin besteht, ein Title-Tag, ein Alt-Attribut oder einen kanonischen Link zu überprüfen, muss man wissen, welche der beiden Ansichten zu konsultieren ist, je nachdem, ob man die Rohdaten oder das interpretierte Ergebnis sucht.
Ein umfassender Leitfaden zum Finden des HTML-Codes einer Webseite erläutert diese beiden Ansätze mit konkreten Beispielen pro Browser.
JavaScript-Seiten: Warum der rohe Quellcode oft leer ist
Die Frontend-Frameworks (React, Vue, Angular) generieren den Inhalt direkt im Browser des Besuchers. Der Server sendet lediglich eine minimale HTML-Hülle und ein JavaScript-Bundle. Das ursprüngliche HTML enthält weder Text noch nutzbare semantische Tags.
Diese Architektur stellt ein konkretes Problem für jeden dar, der den Code zu Audit- oder Lernzwecken inspiziert. Mit Ctrl+U erhält man eine nahezu leere Seite. Nur die DevTools (Tab “Elements” in Chrome, “Inspektor” in Firefox) zeigen das vollständige DOM nach der Darstellung.
Die Seite wie ein Indexierungs-Roboter testen
Um zu sehen, was ein Crawler, der JavaScript nicht ausführt, wahrnimmt, besteht die beste Praxis darin, JavaScript in den DevTools zu deaktivieren, bevor man die Seite neu lädt. In Chrome geschieht dies über die Einstellungen im Tab “Sources” oder indem man die Befehls-Palette (Ctrl+Shift+P) öffnet und “Disable JavaScript” eingibt.
Wenn die Seite weiß wird oder nur das Gerüst zeigt, basiert die Seite vollständig auf der Client-seitigen Darstellung. Roboter, die JS nicht rendern, sehen dann keinen indexierbaren Inhalt. Dieser schnelle Test verhindert, dass falsche Schlussfolgerungen nur aus dem rohen Quellcode gezogen werden.
Tastenkombinationen nach Browser für den Zugriff auf den HTML-Code
Die Methode variiert leicht von einem Browser zum anderen. Hier sind die direktesten Tastenkombinationen:
- Chrome und Edge (Windows/Linux): Ctrl+U für den Quellcode, F12 für die DevTools. Auf Mac: Cmd+Option+U und Cmd+Option+I jeweils.
- Firefox: dieselbe Logik mit Ctrl+U und F12. Der Firefox-Inspektor zeigt zusätzlich ein “Regeln”-Panel, das die auf jedes Element angewandten CSS-Stile detailliert.
- Safari (nur Mac): Das Entwicklermenü muss manuell in den erweiterten Einstellungen aktiviert werden. Danach öffnet Cmd+Option+U den Quellcode und Cmd+Option+I öffnet den Webinspektor.
Auf Mobilgeräten (Android) ermöglicht Chrome den Zugriff auf den Quellcode, indem man view-source: gefolgt von der URL in die Adresszeile eingibt. Auf iOS bietet Safari kein einfaches natives Äquivalent; Drittanbieter-Apps oder JavaScript-Lesezeichen (Bookmarklets) schließen diese Lücke.
Eine bestimmte Tag im HTML-Quellcode suchen
Den vollständigen Code einer Seite anzuzeigen, hat nur dann Sinn, wenn man weiß, wonach man suchen soll. Die Textsuchfunktion (Ctrl+F im Quellcode oder im Tab “Elements” der DevTools) ermöglicht es, ein bestimmtes Tag in wenigen Sekunden zu lokalisieren.
Häufige Überprüfungen im SEO-Audit
Das Title-Tag und die Meta-Beschreibung befinden sich im <head> des Quellcodes. Indem man “title” oder “meta name” in die Suchleiste eingibt, isoliert man sofort diese Elemente. Ihre Präsenz im rohen Quellcode (Ctrl+U) bestätigt, dass sie ohne Ausführung von JavaScript für Suchmaschinen zugänglich sind.
Für Struktur-Tags (h1, h2, h3) ist die Suche in den DevTools zuverlässiger, da sie das tatsächliche DOM widerspiegelt. Eine JavaScript-Seite kann ihre Titel dynamisch injizieren: Sie werden im Quellcode fehlen, aber im Inspektor vorhanden sein.
- Kanonisches Tag: Suche nach
rel="canonical"im <head>, um die deklarierte Referenz-URL zu überprüfen. - Alt-Attribute von Bildern: Suche nach
alt=im Code, um Bilder ohne Textbeschreibung zu finden. - Strukturierte Daten: Suche nach
application/ld+json, um die Schema.org-Markup-Skripte zu lokalisieren.
Rechtlicher Rahmen in Frankreich: Den Code einsehen, ja, aber nicht alles kopieren
Den HTML-Code einer Webseite einzusehen, ist legal. Der Browser lädt diesen Code herunter, um die Seite anzuzeigen, und der Benutzer liest lediglich, was ihm bereits übermittelt wird. Das systematische Abrufen oder Kopieren des Codes oder der darin enthaltenen Daten fällt unter ein anderes Regime.
Nach französischem und europäischem Recht gibt es mehrere Schutzmaßnahmen, die das Kopieren regeln: das Urheberrecht auf den ursprünglichen Code und die Inhalte, das sui generis-Recht auf Datenbanken und die DSGVO, wenn personenbezogene Daten betroffen sind. Den Code eines Konkurrenten zu betrachten, um seine Tag-Struktur zu verstehen, ist eine gängige und legitime Praxis. Methodisches Extrahieren seines Inhalts oder Reproduzieren seiner Architektur zur Duplikation kann rechtliche Konsequenzen nach sich ziehen.
Die Grenze ist klar: Die manuelle Inspektion einer Seite bleibt ein banaler technischer Akt. Automatisiertes Abrufen und die Wiederverwendung von Code oder Daten erfordern eine vorherige rechtliche Analyse.