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.
Inhaltsverzeichnis
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.
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
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
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 () 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
In den Google SERPs sieht der Nutzer das:
Meta-Title in der Google Suchergebnisseite
Im Browser-Tab wird der Title so 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
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
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
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
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
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
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
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
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
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
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.
