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.Übrigens: Für den Google Crawler ist der HTML-Code essenziell um die Seite, samt Content, auszulesen.
SEOs sollten immer den Seitenquellcode nutzen
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
Schließender head-Tag () und direkt im Anschluss öffnender body-Tag ()
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 |
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 in der Google Suchergebnisseite
Title wird auch im Browser-Tab angezeigt
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
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
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 |
Span innerhalb eines p-Tag
Wort, das durch ein Span-Tag und einen dazu definierten Style, pink gefärbt wurde
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
Sichtbare Verlinkung im Text
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
