HTML für SEOs: Diese HTML-Tags sollte jeder SEO kennen

von | Jan 28, 2021 | SEO

Auch wenn HTML auf den ersten Blick eher das Metier eines Entwicklers ist, sind grundlegende Kenntnisse über die Auszeichnungssprache HTML auch für SEOs durchaus nützlich bis gar wichtig. Doch was ist HTML und was sollten SEOs beherrschen? Hier gibt’s die Antworten.

Was ist HTML?

HTML steht für „Hypertext Markup Language“ und ist eine textbasierte Auszeichnungssprache, die für die Erstellung von Webseiten genutzt wird. Dabei werden verschiedene Arten und Verfahren der Strukturierung genutzt, um das gewünschte Ergebnis zu erzielen. Durch den HTML-Code werden Eigenschaften der Webseite festgelegt, die auch wichtig für die Suchmaschinenoptimierung sind.

Wie wird aus der HTML-Datei die sichtbare Webseite? Ganz einfach – der Browser (z.B. Chrome, Firefox oder Internet Explorer) liest den Code aus und stellt ihn dann für den Nutzer grafisch dar.

Übrigens: Für den Google Crawler ist der HTML-Code essenziell um die Seite, samt Content, auszulesen.

Den HTML-Code einer Seite könnt ihr über den Browser aufrufen, in Google Chrome zum Beispiel mit der Tastenkombination Strg. + u oder per Rechtsklick auf die Webseite und dann im Dialogfeld „Seitenquelltext anzeigen“ auswählen.

SEOs sollten immer den Seitenquellcode nutzen

SEOs sollten immer den Seitenquellcode nutzen

Wichtig für SEOs ist, dass wirklich nur dieser Seitenquelltext relevant ist. Über die Entwickler-Tools (Dev-Tools) im Chrome-Browser könnt ihr euch ebenfalls den HTML-Code anzeigen lassen. Dazu klickt ihr ein Element auf der Website mit der rechten Maustaste an und wählt im Dialogfeld „Untersuchen“ aus. Der hier nagezeigte Quelltext kann sich allerdings vom vorherigen Seitenquelltext unterscheiden, denn hier wird der gerenderte Code angezeigt. Das heißt, dass zum Beispiel bestimmte Skripte schon ausgeführt wurden, die für die Darstellung der Website wichtig sind. Google rendert aber den Seitenquelltext nicht immer bzw. kann ihn teilweise nicht vollständig rendern. Elemente, die nur im gerenderten Code vorhanden sind, werden eventuell von Google gar nicht gelesen. Wenn ihr euch den Quelltext einer Webseite unter SEO-Aspekten anseht, solltet ihr das immer im Hinterkopf haben.

Aufbau einer HTML-Seite

Eine Webseite ist im Grunde immer gleich aufgebaut. Sie startet mit einem öffnenden HTML-Tag, um den Anfang der HTML-Auszeichnung zu verdeutlichen. Jeder öffnende Tag (z.B. <HTML>) muss später wieder geschlossen werden </HTML>. Es gibt einen Head-Bereich und einen Body-Bereich.

<html>

<head>

<title>Seitentitel</title>

</head>

<body>

<p>Hier steht der sichtbare Inhalt der Website</p>

</body>

</html>

Nach dem öffnenden HTML-Tag folgt der Head, also der „Kopf“ der Webseite. Im Head befinden sich oft Informationen, die wichtig für den Style, die Funktionen und auch die Suchmaschinenoptimierung wichtig sind.

Informationen zum Design befinden sich im Head

Informationen zum Design befinden sich im Head

Hier sehen wir beispielsweise die Informationen über das Design der Seite. Diese sind für uns als SEO jedoch nicht wirklich relevant.

Die Informationen im Head werden auf der Webseite selbst nicht angezeigt. Das Head-Tag steht immer nach dem HTML-Tag und vor dem Body-Tag.

Der Body, also der Körper der Webseite, kommt immer nach dem Head und beinhaltet den sichtbaren Inhalt der Webseite. Also Text, Bilder, Verlinkungen usw. das, was der Nutzer nachher sieht.

Schließender head-Tag (</head>) und direkt im Anschluss öffnender body-Tag (<body>)

Schließender head-Tag () und direkt im Anschluss öffnender body-Tag ()

Im Body selbst werden weitere HTML Klassifizierungen angewandt, um die Seite technisch und optisch zu strukturieren.

HTML-Tags

Ein HTML-Tag, also eine Auszeichnung z.B. für eine Überschrift, startet mit einem eröffnenden Tag „<>“ und endet mit dem schließenden Tag „</>“. Zwischen den beiden Tags befindet sich dann entweder ein Textabschnitt, eine Überschrift oder auch eine Textformatierung.

Zusätzlich gibt es die Möglichkeit selbstschließende Tags zu erstellen. Hierzu zählen beispielsweise ein Zeilenumbruch „<br />“, ein vertikaler Trennstrich über die Seitenlänge „<hr />“ oder Bilder <img />.

Es gibt einige Tags, die nur einmal pro Seite verwendet werden dürfen und andere wiederum mehrmals:

Nur einmal pro Webseite verwenden Mehrmalige Verwendung auf einer Webseite möglich
Title Span
Description H2, H3, H4, H5, H6
H1 Alt-Tag (pro Bild nur ein alt-Tag)
Canonical P-Tag
Robots Text Formatierungen (<strong>, <i>, <em>, <u>,
HTML, Head, Body

Jetzt wollen wir Euch einige HTML-Tags vorstellen.

HTML-Tags im Head-Bereich

Die HTML-Tags im Head werden auf der Website selbst nicht angezeigt. Trotzdem gibt es einige wichtige Elemente, von denen jeder SEO wissen sollte, wie sie aussehen und wo sie zu finden sind.

Title

Der Title, also der Seitentitel, ist besonders aus SEO-Sicht sehr relevant. Der Title wird im Quellcode hinterlegt, ist jedoch auf der Seite selbst nicht sichtbar. Er wird in den Suchmaschinen auf der Suchergebnisseite, kurz SERP, angezeigt und oben im Browser-Tab.

Google und Co. ziehen sich den Title durch die HTML-Deklarierung und spielen sie dem Nutzer aus. Der Title wird mit <title>Inhalt</title> in HTML ausgezeichnet. Im Quellcode sieht das so aus:

Meta-Title im Quellcode

Meta-Title im Quellcode

In den Google SERPs sieht der Nutzer das:

Meta-Title in der Google Suchergebnisseite

Meta-Title in der Google Suchergebnisseite

Im Browser-Tab wird der Title so angezeigt:

Title wird auch im Browser-Tab angezeigt

Title wird auch im Browser-Tab angezeigt

Gut zu wissen ist außerdem, dass der Title auch in den sozialen Medien angezeigt wird. Wenn ihr beispielsweise bei Facebook eine Webseite teilt, zieht sich Facebook standardmäßig den Titel auch aus dem im Quellcode festgelegten Title.

Wie ihr den perfekten Seitentitel schreibt, erfahrt ihr in unserem Artikel zur Snippet Optimierung.

Meta-Description

Auch die Meta-Description sollte jedem SEO ein Begriff sein. Sie wird ebenfalls auf der Suchergebnisseite angezeigt. Anders als der Title ist sie nicht im Browser-Tab aufzufinden, jedoch bedient sich auch Facebook beim Teilen eines Links an der Description.

Im Quellcode wird die Description mit <meta name=“description“>Inhalt </> hinterlegt.

Meta-Description im Quellcode

Meta-Description im Quellcode

Description wird in der Google Suche angezeigt

Description wird in der Google Suche angezeigt

Meta-Robots-Tag

Das Meta-Robots-Tag gehört zu den Meta-Daten im Head-Bereich. Es teilt dem Crawler mit, wie Unterseiten gelesen und behandelt werden sollen. Zum Beispiel gibt er Anweisungen darüber, ob Seiten indexiert werden dürfen, ob Links gecrawlt werden dürfen oder Seiteninhalte gecached werden sollen.

Für SEOs ist vor allem die Auszeichnung zur Indexierung und zum Crawling wichtig, denn davon ist abhängig, dass die Seite in den Google Suchergebnissen erscheint. Eine Blockierung der Indexierung macht beispielsweise bei Testumgebungen im Zuge eines Relaunchs Sinn oder bei Ergebnisseiten der internen Suche.

Das Meta-Robots-Tag besteht aus zwei Attributen, das name-Attribut und das content-Attribut. Das name-Attribut zeigt dem Crawler, dass es sich um das Robots-Tag handelt. Mit dem content-Attribut wird z.B. die Indexierung der Seite gesteuert. Mit „index“ wird die Indexierung der Seite erlaubt, „noindex“ schließt sie aus. Zudem kann durch „follow“ dem Crawler erlaubt werden, die Links auf der Seite zu crawlen, das Attribut „nofollow“ sol dies verhindern.

Im Beispiel gibt der Code-Schnipsel <meta name=“robots“ content=“index,follow“ …/> an, dass Crawler die Seite indexieren und alle Links berücksichtigen sollen.

Meta-Robots steuern die Indexierung einer Seite

Meta-Robots steuern die Indexierung einer Seite

Canonical-Tag

Das Canonical-Tag wird genutzt, um doppelte Inhalte (Duplicate Content) auf einer Webseite zu kennzeichnen. Es befindet sich im Head der Seite und beinhaltet den Link der jeweiligen Standard-Ressource. Also durch <link rel=“canonical“ href=“www.luna-park.de/beispiel“/> wird den Crawlern angezeigt, bei welcher Seite es sich um ein Duplikat einer anderen Seite handelt. Im Canonical-Tag wird immer die Unterseite angegeben, die die Standard-Ressource des Inhalts ist und damit für die Indexierung verwendet werden soll.

Canonical-Tag verweist auf die Standardressource

Canonical-Tag verweist auf die Standardressource

Mehr zur Funktion eines Canonical-Tags findet ihr in unserem Blogartikel.

Hreflang-Tag

Das hreflang-Tag wird auf mehrsprachigen Websites verwendet und liefert Informationen darüber, welche Sprachversionen eines Inhaltes es gibt. So können die Suchmaschinen dem Nutzer die für ihn richtige Sprachversion ausspielen. Zudem hilft es Google, die Struktur der Seite samt der Mehrsprachigkeit richtig zu ordnen.

Das hreflang-Tag besteht aus mehreren Komponenten: Die Information, dass es von der Seite mehrere Sprachalternativen gibt, der Sprach- und Länderkennung und dem Link dazu. Wichtig ist, dass immer alle Sprachversionen angegeben werden.

Beispiel:

Hreflang-Tag im Head einer Webseite

Hreflang-Tag im Head einer Webseite

In dem Beispiel gibt es von einer Seite 9 Sprachversionen.

Mehr Informationen zur Erstellung von hreflang findet ihr in diesem Blogartikel.

HTML-Tags im Body

Mit den HTML-Tags im Body, die für SEOs relevant sind, werden Teile des sichtbaren Inhalts ausgezeichnet. Sie helfen Suchmaschinen-Crawlern dabei, die Inhalte richtig zu gliedern und ihre Hierarchien zu erkennen.

P-Tags

Der P-Tag steht für einen Paragraf, also einen Textabschnitt. Was in einem Word-Dokument die Enter-Taste macht, wird in HTML mit einem öffnenden und schließenden P-Tag gelöst. Ein Abschnitt beginnt also immer mit <p> und endet mit </p>. In einem P-Tag sollte immer Text stehen, Bilder oder Videos sind nicht vorgesehen.

P-Tags umschließen eine Text-Paragrafen

P-Tags umschließen eine Text-Paragrafen

Text-Paragraf auf der Webseite

Text-Paragraf auf der Webseite

H-Tags – Überschriften

Die H-Tags sollten jedem SEO ein Begriff sein. Mit ihnen werden Überschriften ausgezeichnet. Sie gliedern die Seite und helfen dem Crawler bei der Interpretation der Inhalte. Dabei gibt es verschiedene Überschrifttypen:

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

Suchmaschinen bewerten Überschriften stärker als reinen Fließtext. Relevant sind die Überschrift H1 – H3. Ab H4 wird der Inhalt wie normaler Text gewertet.

Interessant zu wissen ist, das HTML ursprünglich dazu entwickelt wurde, um wissenschaftliche Arbeiten zu erstellen und zu teilen. Daran orientiert sich auch die Struktur der Überschriften. Die H1-Überschrift ist gleichzusetzen mit dem Titel einer Hausarbeit, Bachelorarbeit oder Doktorarbeit. Danach folgen die verschiedenen Kapitel (H2) und Unterkapitel (H3). Entsprechend sollten die H-Tags auch auf der Website verwendet werden.

Die H1 ist aus SEO-Sicht mit am wichtigsten. Diese sollte nur einmal pro Unterseite verwendet werden und sich im besten Fall direkt am Anfang des <body> befinden. Die anderen H-Typen können mehrmals auf der Seite genutzt werden.

Die Überschriften sollten sich im Main Content der Seite befinden. In Navigation, Sidebars oder im Footer haben H-Tags nichts zu suchen.

Übrigens: Wie du perfekte die H1-Überschrift verfasst, lernst du in unserem Blogartikel zur Content Optimierung.

Textformatierungen

In HTML stehen zahlreiche Möglichkeiten zur Textformatierung zur Verfügung. So kann der Text markiert, Wörter hervorgeheben und unterstrichen werden.

Im Folgenden wurden verschiedene Möglichkeiten zur Textformatierung vorgestellt.

Auszeichnung Formatierung
<strong>fett</strong> fett
<b>fett</b> fett
<i>Kursiv</i> Kursiv
<em>Kursiv</em> Kurisv
<u>Unterstrichen</u> Unterstrichen
<sub>tief</sub> tief
<sup>hoch</sup> hoch

Gerade in Fließtexten macht es Sinn, wichtige Keywords hervorzuheben oder zu unterstreichen. Wörter können beispielsweise in fett, kursiv, unterstrichen oder hoch bzw. tief dargestellt werden. Dies macht das Lesen für die Nutzer einfacher und die wichtigen Keywords springen sofort ins Auge. Zudem bewerten Suchmaschinen solch formatierten Texte stärker als unformatierte.

Hier sollte jedoch folgendes beachtet werden: Für SEOs sind manche Formatierungen relevanter, da diese von Google stärker bewertet werden. So sollte für fettgedrucktes die Auszeichnung <strong> gewählt werden und nicht <b> sowie für kursiv <em> (emphasis) und nicht <i>. Optisch bewirken beide Textformatierungen das gleiche Ergebnis. Jedoch entsprechen die erstgenannten, also die die verwendet werden sollen, HTML 5, der aktuellen Version der Auszeichnungssprache. Google bevorzugt HTML 5 gegenüber älteren Versionen. Um sicher zu sein, dass Suchmaschinen die Formatierung richtig interpretieren, sollte daher HTML 5 verwendet werden.

Ein weiteres Element zur Formatierung von Texten ist das Span-Tag. Es wird genutzt, um einzelne Wörter innerhalb eines Abschnittes beispielsweise eine andere Farbe zu geben. HTML ist als block- oder absatzbasierte Auszeichnungssprache darauf ausgerichtet, dass Befehle immer für einen ganzen Paragraf (<p>) gelten. Mithilfe eines Spans können so einfach ein oder mehrere Wörter anders dargestellt werden.

Hier in dem Beispiel wurde nur ein Wort mittels eines Span-Tags in pink gefärbt. Hierzu reicht jedoch nicht ein Span-Tag, sondern es muss zu dem Span ein Design in Form einer Class bestimmt werden. In dem Fall ist es style:color:pink.

Span innerhalb eines p-Tag

Span innerhalb eines p-Tag

Wort, das durch ein Span-Tag und einen dazu definierten Style, pink gefärbt wurde

Wort, das durch ein Span-Tag und einen dazu definierten Style, pink gefärbt wurde

Mit Hilfe eines Span-Tags können auch andere Formatierungen wie Schriftgröße, Kursivität, Fettdruck oder ähnliches umgesetzt werden. Fälschlicher eise werden manchmal auch Überschriften über das Span-Tag formatiert anstelle der eigentlich richtigen H-Tags. Suchmaschinen werten dies dann aber nicht als besondere Hervorhebung, weshalb man dabei eher auf die oben aufgeführten Formatierungsmöglichkeiten ausweichen sollte.

Listen

Ungeordnete Listen und geordnete Listen werden in HTML als <ul><li>Inhalt</li></ul> (unordered list) oder <ol> <li>Inhalt</li></ol> (ordered List) deklariert. Diese Formatierung ist beispielsweise auch dann wichtig, wenn man für ein Listen Featured Snippet optimieren möchte. Das Tag <li> (list item) ist für den Listenpunkt vorgesehen.

Listendeklarierung im Quellcode

Listendeklarierung im Quellcode

Liste auf der Website

Liste auf der Website

Links

Links (intern wie auch extern) sind aus SEO-Sicht sehr wichtig, da durch die Verlinkungen die Crawler der Suchmaschinen durch die Webseite navigiert und geleitet werden können.

In HTML werden Links mit der Bezeichnung

<a href=“https://www.domain.de“>Linktext/Ankertext</a>

gekennzeichnet. So kann z.B. ein Wort mit einem Link versehen werden. Im HTML-Code steht erst der Link und dann der Ankertext. Also beispielsweise so:

Links in HTML werden mit a href= deklariert

Links in HTML werden mit a href= deklariert

In dem Beispiel steht hinter „hreflang-Auszeichnung“ der Link zur Seite https://www.luna-park.de/blog/25771-tipps-zur-erstellung-und-einbindung-von-hreflang-tags/. Auf der Seite selbst sieht das so aus:

Sichtbare Verlinkung im Text

Sichtbare Verlinkung im Text

Es gibt auch die Möglichkeit Links über JavaScript einzubinden, jedoch können Suchmaschinen diese meist nicht richtig auslesen.

Image-Tag

Blder werden über das Image-Tag eingebunden. Dies ist folgendermaßen aufgebaut:

<img src=“https://www.luna-park.de/bild.png“ alt=“Alt-Text“ width=“605″ height=“477″>

Nach dem öffnenden Tag kommt der Pfad zum Bild sowie der alt-Text, gefolgt von weiteren Attributen wie Größe und Breite. Vor dem Link zum Pfad des Bildes steht „src=“, dies steht für Source, also die Quelle des Bildes. Danach folgen die alt-Angaben, also das Alt-Attribut. Diese beiden Angaben sollten immer vorhanden sind. Weitere Attribute wie die Größe oder Breite beispielsweise sind optimal.

Das Alt-Attribut, auch Alt-Tag oder Alternativ-Tag genannt, gibt durch die Deklarierung im Quellcode Informationen darüber, was auf dem jeweiligen Bild zu sehen ist. Auch wenn ein Bild nicht geladen werden kann, wird das Alt-Attribut stattdessen angezeigt. Gerade aus Suchmaschinensicht ist das Alt-Attribut sehr wichtig. Mehr zur Bildoptimierung findet ihr in unserem Blog.

Alt-Tag im Quellcode

Alt-Tag im Quellcode

Zudem kann ein Bild auch verlinkt sein. Somit sind zwei Tags ineinander verschachtelt. Dies sieht man besonders häufig bei Teaserboxen. Beim Klick auf der Bild wird der Nutzer auf die angeteaserte Seite geleitet. Technisch gesehen steht damit das image-Tag in einem a href-Tag.

In diesem Fall dient das Alt-Attribut auch als Linktext. Auch deswegen sollte das alt-Attribut sorgsam gewählt und optimiert werden.

Fazit

Wir haben gesehen, dass viele HTML-Tags aus SEO-Sicht relevant sind. Dazu gehören z.B. Title, Description, robots und Canonicals sowie h-Tags (Überschriften). Nur wenn Inhalte richtig ausgezeichnet sind, kann Google sie auch richtig interpretieren. Daher ist es für jeden SEO sinnvoll, zu wissen, wo sich diese Angaben im Quellcode befinden und wie er sie finden kann.

<a href="https://www.luna-park.de/blog/author/jfi/" target="_self">Judith Köster</a>

Judith Köster

Judith ist seit Anfang 2018 bei lunapark im SEO-Team und unterstützt zudem das Paid Ads Team. Davor hat sie als Online-Redakteurin gearbeitet und ein Volontariat in dem Bereich absolviert. Bei lunapark betreut sie verschiedenste Kunden, hält Workshops und schreibt für den Firmenblog.

Weiterführende Artikel

Keyword-Analyse: Recherche & Bewertung von Keywords

Keyword-Analyse: Recherche & Bewertung von Keywords

Einer der ersten Schritte bei der Optimierung einer Website für Suchmaschinen ist in der Regel die Keyword-Analyse. Sie ist die Grundlage für alles, was mit Content Optimierung zu tun hat und auch für den Linkaufbau nicht unwichtig. Außerdem könnt ihr sie auch...

Was ist SEO? Suchmaschinenoptimierung einfach erklärt

Was ist SEO? Suchmaschinenoptimierung einfach erklärt

Suchmaschinenoptimierung bzw. SEO ist eine Disziplin des Online Marketings, die sich aus vielen einzelnen Bausteinen zusammensetzt. Nur wenn alle Elemente ineinandergreifen, kann sich das volle Potenzial einer Website entfalten. In diesem Artikel erkläre ich euch...

1 Kommentar

  1. Avatar

    Ein interessanter, nicht zu langer sehr gut geschriebener Artikel.
    Vielen Dank.

    Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Die folgenden im Rahmen der DSGVO notwendigen Bedingungen müssen gelesen und akzeptiert werden:
Durch Abschicken des Formulares wird dein Name, E-Mail-Adresse und eingegebene Text in der Datenbank gespeichert. Für weitere Informationen wirf bitte einen Blick in die Datenschutzerklärung.

Newsletter

Du möchtest keinen Beitrag aus unserem Blog verpassen? Dann trage dich in unseren Newsletter ein.

Du möchtest mehr über Google Analytics erfahren?
Google Analytics Handbuch

Das geballte lunapark Google Analytics-Wissen in einem Buch:

Implementierung, Analyse, Optimierung und mehr

Alle neuen Blog Posts in deinem Posteingang!

Alle neuen Blog Posts in deinem Posteingang!

Ja, ich möchte euren Newsletter mit Neuigkeiten aus dem Blog, Branchennews und wissenswerten Infos zum Digitalen Marketing erhalten.

Interesse

Du hast dich erfolgreich angemeldet. Bitte bestätige die Email in deinem Posteingang!