Suchen Sie nach einer einfachen Möglichkeit, den Seitenquelltext anzuzeigen?
Als ich anfing, WordPress-Websites zu erstellen, wusste ich nicht, warum die Anzeige des Seitenquelltextes so wichtig ist und wie einfach sie zu bewerkstelligen ist. Wie viele Website-Besitzer hörte ich, wie andere Entwickler über die Überprüfung des Seitenquellcodes sprachen, aber ich dachte, das sei etwas, um das sich nur fortgeschrittene Programmierer kümmern müssten.
Nachdem ich mehrere WordPress-Websites verwaltet und Kunden geholfen habe, ihre SEO zu verbessern, habe ich entdeckt, dass die Anzeige des Seitenquelltextes ein einfaches, aber leistungsstarkes Werkzeug ist. Es hilft mir, technische SEO-Probleme zu erkennen, zu prüfen, ob meine Meta-Tags richtig funktionieren, und sogar von erfolgreichen Websites von Mitbewerbern zu lernen - und das alles, ohne dass ich ein Programmierexperte sein muss.
Ich zeige Ihnen auch praktische Möglichkeiten, wie Sie dieses Wissen nutzen können, um die Suchmaschinenoptimierung Ihrer Website zu verbessern, selbst wenn Sie sich noch nie mit HTML-Code beschäftigt haben. Glauben Sie mir, wenn ich das lernen konnte, können Sie das auch. Und es ist die paar Minuten wert, die es braucht, um es zu beherrschen.
Jeder kann auf den Code einer Webseite zugreifen, indem er die Methode "View Page Source" verwendet. Und es gibt einige gute Gründe, warum dies für die Suchmaschinenoptimierung nützlich sein kann.
In diesem Leitfaden zeige ich Ihnen genau, wie Sie den Quellcode einer beliebigen Webseite einsehen können - und es ist ganz einfach!
In diesem Artikel
Was ist der Quellcode einer Webseite?
Webseiten sind Codedateien. Und Webseiten sind Sammlungen von Codedateien, die in Ordnern organisiert sind.
Dieser Code gibt das Format, den Stil und die Interaktivität der Seite vor.
Zum Beispiel,
- HTML bietet Formatierungen wie Überschriften und Absätze.
- CSS sorgt für das Styling, einschließlich Farben und Layout.
- JavaScript bietet interaktive Elemente wie Pop-ups.
Die Browser laden und interpretieren diese Codedateien sofort, so dass eine sichtbare Webseite entsteht.
Jeder kann den Quellcode einer Website einsehen. Marketingexperten und Webentwickler gehören zu denjenigen, die "Seitenquelltext anzeigen" verwenden.
Sie können es auch für einige einfache SEO-Checks verwenden.
Anzeigen des Seitenquelltextes in Google Chrome
Wir verwenden Google Chrome für unser Beispiel, da er den größten Marktanteil aller Browser hat. Und die Tastenkombinationen, die wir für Chrome verwenden, 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 aufgeführt, die schnellste Methode zuerst.
Methode 1: Tastaturkürzel
- Mac: ⌘ + Option + u
- Windows/Linux: Strg + U
Methode 2: Rechtsklick, Auswählen
- Klicken Sie mit der rechten Maustaste auf eine Webseite. (Auf einem Macbook drücken Sie mit beiden Fingern auf das Touchpad.)
- Wählen Sie in dem daraufhin angezeigten Popup-Fenster Seitenquelle anzeigen.
Methode 3: Apple App-Menü
- Navigieren Sie bei geöffnetem Chrome zum Apple-App-Menü und wählen Sie Ansicht. Wählen Sie in diesem Dropdown-Menü Entwickler " Quelle anzeigen
Zeilenumbruch und Suchcode verwenden
Wenn die Code-Seite in einer neuen Registerkarte geöffnet wird, aktivieren Sie das Kästchen "Zeilenumbruch" oben links. Dadurch wird sichergestellt, dass Sie nicht horizontal scrollen müssen, um den Code anzuzeigen.
Drücken Sie ⌘ + f, um ein Suchfeld für den Code zu öffnen.
So verwenden Sie die Chrome-Entwicklerwerkzeuge, um den Seitenquelltext anzuzeigen
Zusätzlich zur Anzeige einer einzelnen Seite des Quellcodes können Sie von jeder Webseite aus auf die Chrome-Entwicklerwerkzeuge zugreifen, um detailliertere Codeinformationen zu erhalten. Webdesigner und -entwickler nutzen diese Tools.
Um auf die Chrome-Entwicklerwerkzeuge zuzugreifen, navigieren Sie mit Chrome zu einer Webseite.
Verwenden Sie dann das entsprechende Tastaturkürzel:
- Mac: ⌘ + Option + i
- Windows/Linux: F12 oder Steuerung + Umschalttaste + I
Dadurch wird ein neues Fenster in derselben Browser-Registerkarte geöffnet, das den Code hinter der Seite offenbart.
In dieser Ansicht werden u. a. CSS- und JavaScript-Ereignis-Listener angezeigt.
Tipp: Alle wichtigen Webbrowser, einschließlich Mozilla Firefox und Microsoft Edge, bieten ein Fenster "Entwicklungswerkzeuge" an, für das derselbe Chrome-Shortcut funktioniert.
Häufige Verwendungen für View Page Source
Es gibt 2 häufige Gründe, warum Nicht-Entwickler den Quellcode einer Seite sehen wollen.
Zum einen, um die Backlinks von Gastbeiträgen zu überprüfen. Zum anderen aus Neugier: um zu sehen, wie die Meta-Tags in HTML aussehen.
Anwendung 1: Gastbeitrag-Backlinks prüfen
Backlinks, d. h. Links von anderen Websites zu Ihrer Website, sind ein Rankingfaktor.
Eine gängige Methode, mit der Websites Backlinks erhalten, ist das Schreiben von Gastbeiträgen für andere Websites im Gegenzug für einen Link.
Diese Backlink-Strategie hilft Einzelpersonen dabei, ihre Online-Präsenz zu erhöhen und Fachwissen zu vermitteln.
Es ist jedoch wichtig, dass Sie den Code für jeden einzelnen Link überprüfen, den Sie erhalten. Warum? Manchmal fügt ein Website-Besitzer versehentlich ein Link-Attribut wie "gesponsert" oder "nofollow" hinzu, wodurch jeglicher SEO-Wert zunichte gemacht wird.
Diese Link-Attribute, auch Tags genannt, sind nur im Quellcode der Seite zu sehen.
Wie man HTML auf Link-Attribute überprüft: Methode 1
- Navigieren Sie zu der Seite, die mit Ihrer Seite verlinkt ist.
- Klicken Sie mit der rechten Maustaste auf einen beliebigen Bereich der Seite.
- Wählen Sie "Seitenquelle anzeigen".
Der HTML-Code für die Seite wird in einem neuen Fenster geöffnet.
Suchen Sie den Ankertext und überprüfen Sie den umgebenden Link auf nofollow, gesponsert oder UGC-Link-Attribute.
Als Beispiel soll ein Artikel von ReadWrite.com dienen.
Wenn man zum Ende des Artikels scrollt, sieht man, dass die Biografie des Gastautors einen Link zu seiner Website Ditto Transcripts enthält.
Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle der Seite und wählen Sie Seitenquelle anzeigen.
Dadurch wird der HTML-Code für die Seite in einer neuen Registerkarte geöffnet. (Denken Sie daran, das Kästchen "Zeilenumbruch" anzukreuzen.)
Jetzt können Sie die Seite nach "Ditto Transcripts" durchsuchen. Das ist, was wir sehen.
Der Link ist ein "dofollow"-Link, der für SEO optimal ist. Beachten Sie das Fehlen der Attribute nofollow, sponsored oder UGC im Linkcode.
Wie man HTML auf Link-Attribute überprüft: Methode 2
Sie können auch über die Chrome-Entwicklerwerkzeuge auf den Linkcode zugreifen. Beachten Sie jedoch, dass dieses Tool detaillierteren Code anzeigt, was für Anfänger verwirrend sein könnte.
Hier erfahren Sie, wie Sie einen Link mit den Chrome Dev Tools überprüfen können.
- Navigieren Sie zu der Seite, die mit Ihrer Seite verlinkt ist.
- Klicken Sie mit der rechten Maustaste auf den Backlink.
- Wählen Sie in dem daraufhin erscheinenden kleinen Popup-Fenster die Option Inspizieren.
Dadurch werden die Chrome-Entwicklerwerkzeuge geöffnet.
Praktischerweise wird bei dieser Aktion der Link hervorgehoben (in Blau), so dass Sie genau wissen, wo Sie suchen müssen.
Hier verwenden wir dasselbe ReadWrite.com als Beispiel.
Um den Code des Links anzuzeigen, klicken wir mit der rechten Maustaste darauf und wählen im Popup-Fenster die Option "Prüfen".
Wenn Sie "Prüfen" wählen, werden die Chrome-Entwicklerwerkzeuge geöffnet. Der Link wird blau hervorgehoben.
Lassen Sie uns den hervorgehobenen Teil näher betrachten.
Auch wenn dieser Linkcode Dinge enthält, die Sie nicht verstehen, können Sie sehen, dass es dort kein nofollow, gesponsert oder UGC-Tag gibt.
Verwendung 2: Sehen Sie, wie Meta-Tags aussehen
Der zweite Grund, warum Nicht-Entwickler den Seitenquelltext anzeigen, ist, dass sie neugierig sind, wie die Meta-Tags im Code aussehen.
Sie haben vielleicht schon gehört, dass Titel-Tags und Meta-Beschreibungen für die Suchmaschinenoptimierung wichtig sind.
Und Plugins wie All in One SEO (AIOSEO) machen es einfach, diese zu bearbeiten und zu optimieren.
Aber Sie fragen sich vielleicht, wie diese 2 Meta-Tags im Quellcode aussehen.
Um das herauszufinden,
- Navigieren Sie zu einer Seite.
- Gehe zu Seite anzeigen Quelle.
- Markieren Sie das Kästchen "Zeilenumbruch" oben links.
- Use ⌘ + f to search for <title or <meta name=”description”.
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 ganz einfach.
Außerdem müssen Sie den Seitenquelltext nicht einsehen, um die Meta-Tags zu überprüfen.
Dieses bewährte Plugin hat Tausende von 5-Sterne-Bewertungen auf WordPress.org und über 3 Millionen Nutzer.
AIOSEO ist auch für Anfänger leicht zu bedienen und liefert 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.
Außerdem erhalten Sie einfache Möglichkeiten, diese Tags zu optimieren, z. B. indem Sie Ihre Meta-Beschreibung auf eine bestimmte Länge beschränken.
Darüber hinaus 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 Schlüsselwörtern mit Schwerpunkt.
- Verwandeln Sie Ihre Seiten mit ein paar Mausklicks in Rich Snippets.
Q&A auf Seite anzeigen Quelle
Wie kann ich den Seitenquelltext in Safari anzeigen?
Um den Seitenquelltext in Safari anzuzeigen, klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie Seitenquelltext anzeigen. Oder wählen Sie im Browsermenü Entwickeln " Seitenquelle anzeigen.
Mit der Tastenkombination Option + Befehl (⌘) + U wird das Fenster Entwicklertools geöffnet.
Wie kann ich den HTML- und CSS-Code einer Website finden?
Es gibt mehrere Möglichkeiten, den HTML- und CSS-Code einer Website zu finden. Um den HTML-Code zu finden, können Sie verschiedene Methoden zum Anzeigen des Seitenquelltextes verwenden , die hier beschrieben werden.
Um den HTML- und CSS-Code zu sehen, können Sie die Funktion Entwicklertools in Ihrem Webbrowser verwenden.
Die anklickbare(n) CSS-Code-Datei(en) für eine Website finden Sie auch im Head-Element des HTML.
Was kommt als Nächstes?
Wir hoffen, dass dieser Artikel dazu beigetragen hat, dass Sie verstehen, wie man den Quellcode einer Seite anzeigen kann und warum man ihn verwendet.
Vielleicht möchten Sie auch mehr über die Rolle von Backlinks in der Suchmaschinenoptimierung erfahren und Einblicke in bezahlte Links und Linkaufbau erhalten. Und vergessen Sie nicht, diese Leads zu erfassen.
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.
Möchten Sie AIOSEO kostenlos testen?
Geben Sie die URL Ihrer WordPress-Website ein, um AIOSEO Lite zu installieren.
Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, erhalten wir möglicherweise eine Provision. Wir empfehlen nur Produkte, von denen wir glauben, dass sie unseren Lesern einen Mehrwert bieten.
