So versteht man den Quelltext einer Webseite

Neil Patel
I hope you enjoy reading this blog post. If you want my team to just do your marketing for you, click here.
Author: Neil Patel | Co Founder of NP Digital & Owner of Ubersuggest
How to Read Your Website Source Code and Why It’s Important

Hinter all den Bildern, Texten und anderen Elementen einer Webseite steckt der Quellcode. Google und andere Suchmaschinen „lesen“ diesen Code, um den Inhalt zu verstehen und zu bestimmen, für welche Suchergebnisse eine Webseite erscheinen soll.

In der heutigen kurzen Anleitung zeige ich Dir, wie man einen Quellcode ließt, damit Du sicherstellen kannst, dass Deine Webseite den neusten SEO-Anforderungen entspricht. Ich werde Dir anhand einiger Situationen zeigen, wie man die Teile des Quellcodes anzeigt und analysiert, die fürs Marketing von Bedeutung sind.

So zeigt man den Quellcode an

Der erste Schritt zur Überprüfung des Quellcodes besteht natürlich darin, diesen anzuzeigen. Dies ist mit einem herkömmlichen Webbrowser möglich. Nachfolgend findest Du die Tastenkombinationen und Alternativen zum Anzeigen des Quellcodes einer Webseite auf Windows PC und Mac.

Windows PC

  • Firefox: Drücke Strg+U (d. h. halte die Strg-Taste gedrückt und drücke gleichzeitig die U-Taste). Alternative: Starte Firefox, rechter Mausklick und wähle „Seitenquelltext anzeigen“ aus.
  • Edge/Internet Explorer: Drücke Strg+U. Alternative: Rechter Mausklick und “Quelltext anzeigen” auswählen.
  • Chrome: Drücke Strg+U. Alternative: Klicke in der Symbolleiste des Browsers auf die drei waagerechten Linien, wähle “Weitere Tools” und anschließend “Quelltext anzeigen” aus.
  • Opera: Drücke Strg+U. Alternative: Klicke mit der rechten Maustaste auf einen freien Bereich der Seite und wähle “Seitenquelltext anzeigen” aus.

Mac

  • Safari: Die Tastenkombination lautet ⌘-Option-U. Alternative: Klicke mit der rechten Maustaste auf einen freien Bereich der Seite und wähle “Seitenquelltext anzeigen” aus.
  • Firefox: Klicke mit der rechten Maustaste auf einen freien Bereich und wähle “Seitenquelltext anzeigen” aus oder klicke im Firefox-Menü unter dem Punkt “Web-Entwickler” auf die Auswahl “Seitenquelltext anzeigen”. Tastenkombination: ⌘-Option-U
  • Chrome: Klicke in der Symbolleiste des Browsers auf die drei waagerechten Linien, wähle “Weitere Tools” und anschließend “Quelltext anzeigen” aus. Tastenkombination: ⌘-Option-U

Jetzt weißt Du, wo man den Quellcode findet und musst nur noch lernen, wie man darin nach wichtigen Informationen oder Hinweisen sucht. Normalerweise kann man dafür dieselben Suchfunktionen verwenden, die man für das Surfen im Internet verwendet, zum Beispiel die Tastenkombination STRG + F (für Suchen). Mithilfe dieser Kombinationen kannst Du den Quellcode schneller nach wichtigen SEO-Elementen durchsuchen.

Titel-Tags im Quellcode

Das Title-Tag ist der heilige Gral der On-page SEO. Es ist das wichtigste SEO-Element in Deinem Quellcode.

Kennst Du diese hilfreichen Überschriften über den Suchergebnissen, die erscheinen, wenn Du eine Suchanfrage in Google eingibst? Das sind die Title-Tags.

Wenn Du keine Titel-Tags im Quellcode hinterlegst, kann dieser nicht in Google (oder einer anderen Suchmaschine) angezeigt werden. Ich habe tatsächlich schon Webseiten ohne Titel-Tag gesehen!

Lass uns das ganze anhand eines Beispiels betrachten. Nehmen wir den Suchbegriff “Marketing Guides”.

source code - title tag

Das erste Ergebnis stammt von einem Blogbeitrag auf der Webseite KISSmetrics, bei dem es sich (nicht zufällig) um einen Marketingleitfaden handelt. Wenn wir auf das Ergebnis klicken und uns den Quellcode der Seite anzeigen lassen, finden wir das folgende Titel-Tag:

source code for title tag

Das Title-Tag wird durch ein öffnendes Tag <title> und ein schließendes Tag </title> gekennzeichnet und befindet sich in der Regel im HEAD-Bereich (<head>) der Webseite. Der Inhalt innerhalb des Titel-Tags stimmt mit der Überschrift des Suchergebnisses überein und wird von Google als SEO-Titel verwendet.

Titel-Tags sind nicht nur wichtig, weil sie in den Suchergebnissen angezeigt werden, sie enthalten auch wichtige Schlüsselwörter, die zur Suchanfrage der Benutzer passen müssen. Wenn Deine Seite für ein bestimmtes Thema in den Suchergebnissen erscheinen soll, musst Du entsprechende Keywords im Titel-Tag platzieren. Klicke auf diesen Artikel, um mehr über dieses Thema zu erfahren.

Eine letzte wichtige Sache: Jede Seite auf Deiner Webseite muss ein eindeutiges Titel-Tag haben. Verwende niemals dasselbe Tag. Kleine Webseiten, die aus höchstens 20 Einzelseiten bestehen, sollten damit kein Problem haben. Umfangreiche Webseiten könnten jedoch von folgendem Prozess profitieren, um sicherzustellen, dass keine duplizierten Title-Tags vorliegen.

Schritt Nr. 1: Öffne Ubersuggest, gib die URL Deiner Webseite in die Suchbox ein und klick auf “Suchen”.

source code - ubersuggest step 1

Schritt Nr. 2: Klick im linken Seitenmenü auf “Seiten-Audit”.

source code - ubersuggest step 2

Schritt Nr. 3: Analysiere die gefundenen SEO-Probleme.

source code - top seo issues

Scrolle dann im Seiten-Audit nach unten, um Zugriff auf die vorhandenen SEO-Fehler Deiner Webseite zu erhalten. Hier findest Du Fehler wie duplizierte Titel-Tags oder Meta-Beschreibungen. Wenn keine Fehler angezeigt werden, ist alles super. Wenn Ubersuggest Duplikate findet, im unteren Beispiel sind 30 Seiten von diesem Problem betroffen, müssen wir dem Fehler auf den Grund gehen.

Schritt Nr. 4: Klick auf “Seiten mit duplizierten <title> Tags”

source code - duplicate title tags

Das kann ein ernsthaftes Problem sein, muss es aber nicht. Es sollte aber dennoch überprüft werden. Wenn ich mir das Ganze mal genauer anschaue, merke ich, dass 26 Seiten den Titel „Der digitale Marketing-Blog von Neil Patel“ verwenden.

Ich klicke also auf diesen Title-Tag und sehe:

source code - identifying issues

Obwohl das Title-Tag dasselbe ist, ist es in diesem Fall nicht weiter schlimm, weil es sich nicht um Blogbeiträge oder Seiten handelt, sondern um das Blogverzeichnis.

Meta-Beschreibungen im Quelltext

Ein weiteres wichtiges Element im Head-Bereich Deiner Webseite ist das Tag der Meta-Beschreibung. Die Meta-Beschreibung besteht aus bis zu 160 Zeichen und wird in den Suchergebnissen unter dem Titel angezeigt.

source code - meta data

Ich habe im Laufe meiner Karriere zahlreiche Webseiten gesehen, die dieses Tag einfach ignorieren, dabei st es ganz einfach im Quellcode zu finden.

meta description source code

Stelle sicher, dass jede Deiner Seiten über eine Beschreibung verfügt und dass keine Deiner Seite dieselbe Beschreibung verwenden. Dies würde zwar keine Strafe zur Folge haben, wirkt sich aber negativ auf Dein Marketing aus.

Die Meta-Beschreibung ist wichtig, weil sie den Nutzern und Suchmaschinen verrät, worum es auf der jeweiligen Seite geht. Überlege Dir, was Deine Nutzer neugierig machen und zum Klicken bewegen könnte.

H1-Überschriften im Quelltext

H1-Überschriften nehmen ebenfalls ein bisschen Einfluss auf die SEO, darum sollten sie ebenfalls überprüft werden. Die H1-Überschrift einer Seite würde in etwa so aussehen:

h1 heading source code

Du solltest pro Seite nur ein H1-Tag verwenden, versuche als nicht mehrere Hauptüberschriften auf einer Seite zu platzieren, denn wenn Du die Seite überoptimierst würde es Deiner SEO auf lange Sicht schaden.

Verwende das H1-Tag nur, um die Hauptüberschrift (das Thema) Deiner Seite hervorzuheben. Für die Startseite könntest Du beispielsweise Dein Wertversprechen verwenden.

“Nofollow”-Tags im Quelltext

Wenn Du Linkbuilding betreibst, musst Du herausfinden, ob es sich bei Deinen gewonnenen Links um Nofollow-Links handelt. Doch bevor wir ich Dir zeige, wie das geht, müssen wir über “Link Juice” sprechen.

Aus SEO-Sicht ist es sehr gut, wenn Du eine andere Webseite dazu bringen kannst, auf Deine Seite zu verweisen. Dieser Verweis (Link) wird von Suchmaschinen als Bestätigung angesehen. Suchmaschinen berücksichtigen die Anzahl der Links, die auf Deine Webseite verweisen, um Dein Ranking in den Suchmaschinen zu bestimmen. „Link Juice“ gibt Auskunft über die Stärke der Link und bezieht damit sowohl die Anzahl als auch die Qualität von Backlinks mit ein.

Nofollow ist eine Anweisung innerhalb des HTML-Codes, die Suchmaschinen anweist, Verweise auf andere Seiten nicht in die Berechnung deren Linkpopularität einzubeziehen. Dies finden wir sehr häufig in Kommentaren von Blogbeiträgen.

Um herauszufinden, ob der Backlinks gewertet wird, müssen wir prüfen, ob der Link ein Nofollow-Attribute enthält. Wenn dies der Fall ist, dann wird der gewonnene Link leider keine Auswirkung auf die Suchergebnisse oder Deine Position auf Google haben.

The Nofollow Attribute in source code

Das obere Beispiel zeigt das Nofollow-Attribut rel=’external nofollow’. Der Nutzer wird bei Klick zwar trotzdem auf die Webseite weitergeleitet, der Link zählt jedoch nicht für die SEO. Es gibt Menschen, die glauben, dass diese Links trotzdem einen gewissen Einfluss auf die Suchergebnisse nehmen, davon sollten wir aber nicht ausgehen.

Du könntest Deinen Link Juice beschränken, um zu versuchen, Deine Suchleistung auf diesem Weg zu beeinflussen. Einige SEO-Experten glauben, dass die wichtigsten Seiten den meisten Link Juice erhalten sollten. Dies lässt sich beeinflussen, indem man bestimmte interne Links mit einem Nofollow-Attribut versieht, z. B. Datenschutzrichtlinien oder unwichtige Seiten.

Google sagt jedoch, dass man lieber von dieser Praxis absehen sollte und ich stimme dem teilweise zu, denn es ist eine ziemlich mühsame Aufgabe. Du solltest Deine Energie und Deine Zeit besser auf die Erstellung großartiger Inhalte verwenden. Davon hast Du mehr.

Alt-Tags im Quelltext

Ich sehe immer wieder Webseiten, die keine Alt-Tags verwenden. Der Alt-Text ist eine kurze Bildbeschreibung, die von Such-Bots genutzt wird, um visuelle Inhalte zu verstehen.

Falls Du einen Onlineshop betreibst, solltest Du auf keinen Fall auf Bildbeschreibungen verzichten und achte auch darauf, dass die Marke sowie die Seriennummer im Alt-Tag genannt wird.

image alt tag in source code

Der obere Screenshot zeigt die Bildbeschreibung im Alt-Tag.

Dekorative Bilder brauchen kein Alt-Tag. Dies könnte von Google sogar als Überoptimierung interpretiert werden und zu einer Strafe führen, verwende Alt-Tags aus diesem Grund nur für folgende Bilder:

  • Produktbilder
  • Diagramme
  • Infografiken
  • Dein Logo
  • Screenshots
  • Fotos Deiner Mitarbeiter

Prüfe, ob Analytics ordnungsgemäß installiert ist

Du solltest die Chance nutzen, um im Quelltext zu prüfen, ob Google Analytics auf jeder Seite Deiner Website installiert wurde. Das ist ganz einfach und schnell erledigt.

Suche im Quelltext nach den Buchstaben “UA”. Wenn darauf eine 7-stellige Zahl folgt, ist Google Analytics ordnungsgemäß installiert.

verifying google analytics in source code

Achte auch darauf, wie oft „UA“ im Quelltext erscheint, denn manchmal wird der Tracking-Code versehentlich mehrmals eingefügt. Wenn dies der Fall ist, sollte Dein Entwickler den überflüssigen Code entfernen.

Jetzt musst Du alle Seiten Deiner Webseiten überprüfen, um herauszufinden, ob der Code überall eingefügt wurde, denn wenn er auf einigen Seiten fehlt, kannst Du Dir kein vollständiges Bild der Leistung Deiner Webseite machen und dann wäre der ganze Aufwand nutzlos.

Diese Aufgabe ist je nach Größe Deiner Webseite extrem aufwendig sowie zeitraubend und kann unmöglich manuell durchgeführt werden.

Ich verwende xml-sitemaps.com, um eine Textdatei mit allen URLs meiner Webseite zu erstellen. Auf diese Weise erhalte ich ein Inventar und kann nachverfolgen, welche URLs möglicherweise optimiert werden müssen benötigen (z. B. durch die korrekte Installation von Google Analytics). Außerdem findest Du auf diese Weise oft weitere Fehler, die Du beheben musst.

Mit xml-sitemaps.com erhältst Du aber nur 500 Ergebnisse kostenlos, darum musst Du eventuell Deinen Entwickler um ein URL-Inventar bitten, falls Deine Webseite sehr groß ist. Bitte ihn bei dieser Gelegenheit am besten darum, ein Skript oder Programm zu erstellen, um die Prüfungen automatisch durchführen zu lassen, damit Du es nicht manuell machen musst.

Fazit

Der Quelltext ist die Grundlage Deiner Webseite, darum ist es wichtig, sich mit den Grundlagen vertraut zu machen. Wenn Du den Quelltext lesen kannst, kannst Du Deine Webseite SEO-freundlich gestalten und potenziell schädliche SEO-Fehler beheben, um Deine Position in den Suchergebnissen zu stärken.

Falls Du Hilfe bei der Behebung Deiner SEO-Probleme brauchst, solltest Du Kontakt zu meiner Agentur aufnehmen.

Ubersuggest

Schalte mit Ubersuggest Tausende von Keywords frei

Bist Du bereit, Deine Konkurrenten zu überholen?

  • Finde Long-Tail-Keywords mit hohem ROI
  • Entdecke sofort Tausende von Keywords
  • Verwandele Suchanfragen in Besucher und Conversions

Kostenloses Keyword-Tool

Neil Patel

About the author:

Co Founder of NP Digital & Owner of Ubersuggest

Er ist der Mitbegründer von NP Digital. Das Wall Street Journal zählt ihn zu den Top-Influencern im Web. Laut Forbes ist er einer der 10 besten Vermarkter und laut Entrepreneur Magazine hat er eins der 100 erfolgreichsten Unternehmen gegründet. Neil ist ein New York Times Bestseller Autor. Er wurde bereits vor seinem 30. Lebensjahr von Präsident Obama und vor seinem 35. Lebensjahr von den United Nations als Top 100 Unternehmer ausgezeichnet.

Follow the expert:

Teilen

Neil Patel

source: https://neilpatel.com/de/blog/wie-du-den-quelltext-deiner-webseite-uberprufst-und-warum-das-wichtig-ist/