Quelltext anzeigen: HTML-Code jeder Webseite einsehen (Plus: SEO-Anwendungen)

Suchen Sie nach einer einfachen Möglichkeit, den Quelltext anzuzeigen?

Als ich anfing, WordPress-Websites zu erstellen, wusste ich nicht, warum die Anzeige des Quelltextes wichtig war oder wie einfach es war. Wie viele Website-Besitzer hörte ich andere Entwickler über die Überprüfung des Quelltextes sprechen, aber ich dachte, es sei etwas, worüber sich nur fortgeschrittene Programmierer Sorgen machen müssten.

Nachdem ich mehrere WordPress-Sites verwaltet und Kunden bei der Verbesserung ihrer SEO geholfen hatte, entdeckte ich, dass die Anzeige des Quelltextes tatsächlich ein einfaches, aber leistungsstarkes Werkzeug ist. Es hilft mir, technische SEO-Probleme zu erkennen, zu überprüfen, ob meine Meta-Tags korrekt funktionieren, und sogar von erfolgreichen Konkurrenz-Websites zu lernen – alles, ohne ein Code-Experte sein zu müssen.

Ich werde auch praktische Wege aufzeigen, wie Sie dieses Wissen zur Verbesserung der SEO Ihrer Website nutzen können, auch wenn Sie noch nie HTML-Code angesehen haben. Vertrauen Sie mir, wenn ich das lernen konnte, können Sie das auch. Und es lohnt sich die paar Minuten, die es braucht, um es zu meistern.

Jeder kann auf den Code einer Webseite zugreifen, indem er die Methode Quelltext anzeigen verwendet. Und es gibt einige gute Gründe, warum dies für SEO nützlich sein kann.

In diesem Leitfaden zeige ich Ihnen genau, wie Sie den Quelltext jeder Webseite anzeigen – und es ist super einfach!

Was ist der Quelltext einer Webseite?

Webseiten sind Code-Dateien. Und Websites sind Sammlungen von Code-Dateien, die in Ordnern organisiert sind.

Dieser Code liefert das Format, den Stil und die Interaktivität für die Seite.

Zum Beispiel,

• HTML bietet Formatierungen wie Überschriften und Absätze.
• CSS bietet Styling, einschließlich Farben und Layout.
• JavaScript bietet interaktive Elemente wie Pop-ups.

Browser laden und interpretieren diese Code-Dateien sofort und rendern eine sichtbare Webseite.

Jeder kann den Quelltext einer Website anzeigen. Vermarkter und Webentwickler gehören zu denen, die "Quelltext anzeigen" verwenden.

Sie können es auch für einige einfache SEO-Checks verwenden.

Quelltext in Google Chrome anzeigen

Wir verwenden Google Chrome als Beispiel, da es den größten Marktanteil aller Browser hat. Und die Tastenkombinationen, die wir für Chrome teilen, funktionieren auch für die meisten anderen Browser, einschließlich Apple Safari und Brave.

Es gibt mehrere Möglichkeiten, den Code einer Webseite in Chrome anzuzeigen. Hier sind 3, wobei die schnellste Methode zuerst aufgeführt ist.

Methode 1: Tastenkombination

• Mac: ⌘ + Option + U
• Windows/Linux: Strg + U

Methode 2: Rechtsklick, Auswahl

• Klicken Sie mit der rechten Maustaste auf eine Webseite. (Auf einem Macbook drücken Sie mit zwei Fingern auf das Touchpad.)
• Wählen Sie Quelltext anzeigen aus dem erscheinenden Pop-up-Fenster.

Methode 3: Apple App-Menü

• Wenn Chrome geöffnet ist, navigieren Sie zum Apple App-Menü und wählen Sie Anzeigen. Wählen Sie aus diesem Dropdown-Menü Entwickler » Quelltext anzeigen

Zeilenumbruch und Suche verwenden

Wenn sich die Code-Seite in einem neuen Tab öffnet, aktivieren Sie das Feld „Zeilenumbruch“ oben links. So müssen Sie nicht horizontal scrollen, um den Code anzuzeigen.

Verwenden Sie ⌘ + f, um ein Suchfeld für den Code zu öffnen.

Chrome-Entwicklertools zur Anzeige des Quelltextes verwenden

Zusätzlich zur Anzeige einer einzelnen Quellcode-Seite können Sie von jeder Webseite aus auf die Chrome-Entwicklertools zugreifen, um detailliertere Code-Informationen zu erhalten. Webdesigner und Entwickler nutzen diese Tools.

Um die Chrome-Entwicklertools aufzurufen, navigieren Sie mit Chrome zu einer Webseite.

Verwenden Sie dann die entsprechende Tastenkombination:

• Mac: ⌘ + Option + i
• Windows/Linux: F12 oder Strg + Umschalt + I

Dadurch wird ein neues Fenster im selben Browser-Tab geöffnet, das den Code hinter der Seite anzeigt.

Diese Ansicht zeigt unter anderem CSS- und JavaScript-Ereignis-Listener an.

Tipp: Alle gängigen Webbrowser, einschließlich Mozilla Firefox und Microsoft Edge, bieten ein „Entwicklertools“-Fenster, und die gleiche Chrome-Tastenkombination funktioniert auch für diese.

Häufige Anwendungsfälle für Seitenquelltext anzeigen

Es gibt 2 häufige Gründe, warum Nicht-Entwickler den Quellcode einer Seite sehen möchten.

Einer ist die Überprüfung von Gastbeitrag-Backlinks. Und der andere ist Neugier: um zu sehen, wie Meta-Tags in HTML aussehen.

Anwendung 1: Gastbeitrag-Backlinks überprüfen

Backlinks, also Links von anderen Websites zu Ihrer, sind ein Rankingfaktor.

Eine gängige Methode, wie Websites Backlinks erhalten, ist das Schreiben von Gastbeiträgen für andere Websites im Austausch für einen Link.

Diese Backlink-Strategie hilft Einzelpersonen, ihre Online-Präsenz zu verbessern und Fachwissen zu kommunizieren.

Es ist jedoch wichtig, den Code für jeden einzelnen Link zu überprüfen, den Sie erhalten. Warum? Manchmal fügt ein Website-Besitzer versehentlich ein Link-Attribut wie „gesponsert“ oder „nofollow“ hinzu, was den SEO-Wert zunichtemacht.

Diese Link-Attribute, auch Tags genannt, können nur im Quellcode der Seite gesehen werden.

So überprüfen Sie HTML auf Link-Attribute: Methode 1

• Navigieren Sie zu der Seite, die zu Ihrer verlinkt ist.
• Klicken Sie mit der rechten Maustaste auf einen beliebigen Bereich der Seite.
• Wählen Sie „Seitenquelltext anzeigen“.

Der HTML-Code für die Seite wird in einem neuen Fenster geöffnet.

Suchen Sie nach dem Ankertext und überprüfen Sie den umgebenden Link auf nofollow, gesponsert oder UGC Link-Attribute.

Als Beispiel verwenden wir einen Artikel von ReadWrite.com.

Wenn wir zu diesem Artikel nach unten scrollen, sehen wir, dass die Biografie des Gastautors einen Link zu seiner Website Ditto Transcripts enthält.

Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wählen Sie Seitenquelltext anzeigen.

Dadurch wird der HTML-Code der Seite in einem neuen Tab geöffnet. (Denken Sie daran, das Kontrollkästchen „Zeilenumbruch“ zu aktivieren.)

Jetzt können Sie auf der Seite nach „Ditto Transcripts“ suchen. Das ist es, was wir sehen.

Der Link ist ein „dofollow“-Link, was für SEO optimal ist. Beachten Sie das Fehlen von Attributen wie nofollow, sponsored oder UGC im Link-Code.

So überprüfen Sie HTML auf Link-Attribute: Methode 2

Sie können auch über die Chrome-Entwicklertools auf den Link-Code zugreifen. Seien Sie sich jedoch bewusst, dass dieses Tool detaillierteren Code anzeigt, was für Anfänger verwirrend sein kann.

Hier erfahren Sie, wie Sie einen Link mit den Chrome Dev Tools überprüfen.

• Navigieren Sie zu der Seite, die zu Ihrer verlinkt ist.
• Klicken Sie mit der rechten Maustaste auf den Backlink.
• Wählen Sie im kleinen erscheinenden Popup-Menü Untersuchen.

Dadurch werden die Chrome-Entwicklertools geöffnet.

Praktischerweise hebt diese Aktion den Link (in Blau) hervor, sodass Sie genau wissen, wo Sie suchen müssen.

Hier verwenden wir ReadWrite.com als Beispiel.

Um den Code des Links anzuzeigen, klicken wir mit der rechten Maustaste darauf und wählen „Untersuchen“ aus dem Popup-Menü.

Wenn Sie „Untersuchen“ auswählen, werden die Chrome-Entwicklertools geöffnet. Der Link wird blau hervorgehoben.

Zoomen wir auf diesen hervorgehobenen Bereich.

Auch wenn dieser Link-Code Dinge enthalten kann, die Sie nicht verstehen, können Sie sehen, dass kein nofollow-, sponsored- oder UGC-Tag vorhanden ist.

Anwendung 2: So sehen Meta-Tags aus

Der zweite Grund, warum Nicht-Entwickler die Seitenquelltext-Ansicht verwenden, ist die Neugier, wie Meta-Tags im Code aussehen.

Sie haben vielleicht gehört, dass Titel-Tags und Meta-Beschreibungen für SEO wichtig sind.

Und Plugins wie All in One SEO (AIOSEO) machen die Bearbeitung und Optimierung dieser einfach.

Aber Sie fragen sich vielleicht, wie diese beiden Meta-Tags im Quellcode aussehen.

Um das herauszufinden,

• Navigieren Sie zu einer Seite.
• Gehen Sie zu Seitenquelltext anzeigen.
• Aktivieren Sie das Kontrollkästchen „Zeilenumbruch“ oben links.
• Verwenden Sie ⌘ + f, um nach <title oder <meta name=”description” zu suchen.

Hier ist ein Beispiel für einen Titel-Tag.

Und hier ist die Meta-Beschreibung für denselben Artikel.

Optimieren Sie Meta-Tags mit All in One SEO (AIOSEO)

Die Optimierung dieser Meta-Tags ist mit dem All in One SEO (AIOSEO) Plugin für WordPress einfach.

Und Sie müssen nicht den Seitenquelltext anzeigen, um Meta-Tags zu überprüfen.

Dieses etablierte Plugin hat Tausende von 5-Sterne-Bewertungen auf WordPress.org und über 3 Millionen Nutzer.

Obwohl es für Anfänger einfach ist, AIOSEO zu verwenden, liefert es professionelle Ergebnisse.

Sie können All in One SEO hier herunterladen.

Sie sehen eine Vorschau Ihres Titels und Ihrer Meta-Beschreibung in den Google-Suchergebnissen.

Und Sie erhalten einfache Möglichkeiten, diese Tags zu optimieren, z. B. indem Sie Ihre Meta-Beschreibung innerhalb einer bestimmten Länge halten.

Zusätzlich gibt All in One SEO Empfehlungen zur Verbesserung der SEO Ihrer einzelnen Webseiten.

Weitere Vorteile sind

• Einfache Einrichtung für lokale SEO (für kleine Unternehmen).
• Empfehlungen zur Verwendung von Fokus-Keywords.
• Verwandeln Sie Ihre Seiten mit wenigen Klicks in Rich Snippets.

Fragen & Antworten zur Seitenquelltext-Anzeige

Was kommt als Nächstes?

Wir hoffen, dieser Artikel hat Ihnen geholfen zu verstehen, wie Sie den Quellcode einer Seite anzeigen und warum Leute ihn verwenden.

Möglicherweise möchten Sie auch mehr über die Rolle von Backlinks in der SEO erfahren und Einblicke in bezahlte Links und Linkaufbau erhalten. Und vergessen Sie nicht, Leads zu generieren.

Wenn Sie diesen Artikel hilfreich fanden, abonnieren Sie bitte unseren YouTube-Kanal für SEO-Tutorials. Sie können uns auch auf Twitter, LinkedIn oder Facebook folgen, um auf dem Laufenden zu bleiben.

Offenlegung: Unsere Inhalte werden von den Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Wir empfehlen nur Produkte, von denen wir glauben, dass sie unseren Lesern einen Mehrwert bieten.