Heading Tag


Das Heading Tag (auch: Head-Tag bzw. Header Tag) wird in HTML verwendet, um Überschriften und die strukturelle Hierarchie einer Seite oder eines Content Pieces auf einer Website festzulegen. Die Überschriften werden mittels markiert, wobei „n“ eine Zahl zwischen 1 und 6 ist und die Ordnung und Wichtigkeit einer Überschrift beschreibt, sowie mitunter deren Formatierung einer beeinflusst. Jedes geöffnete < hn > - Tag muss natürlich auch wieder mit < /hn > geschlossen werden. Dazwischen wird der Inhalt der Überschrift notiert.

Allgemeine Informationen zum Heading Tag

Header Tags werden eingesetzt, um Überschriften und Unter-Überschriften auf einer Webseite zu differenzieren. Sie sind nach Wichtigkeit organisiert, wobei das H1-Tag nicht nur das wichtigste ist, sondern üblicherweise auch den Titel der Seite wiedergibt. Header Tags verbessern die Lesbarkeit und das SEO einer Website.[1]

HTML unterstützt formal bis zu sechs Heading Tags (H1 bis H6). Tatsächlich finden jedoch üblicher Weise nur die Heading Tags bis H4 Anwendung. Alle Tags von H2 bis H6 können unbegrenzt oft verwendet werden – eine Faustregel besagt: Jede Zwischenüberschrift sollte so oft in einem Content Piece verwendet werden, wie die Zahl im Markup angibt.

Deshalb bildet die H1 auch die einzige Ausnahme. Jede HTML-Datei sollte nur genau eine H1-Überschrift haben[2] – eine Regel, die man unbedingt beherzigen sollte, auch wenn es grundsätzlich erlaubt ist, mehrere H1-Tags zu benutzen:

  • H1: Die Hauptüberschrift. Sie bildet in der Regel den Titel eines Content Posts ab und ist sehr Keyword-zentrisch geschrieben, während sie gleichzeitig so formuliert ist, dass sie den zu erwartenden Inhalt eines Artikels oder Beitrags wiedergibt und die Aufmerksamkeit des Users erweckt.
<h1>Das ist eine Überschrift</h1>
  • H2: Ist eine Zwischenüberschrift, mit Hilfe derer man die Hauptargumente der Abschnitte und Absätze unterteilt. Hier sollte man semantische Keywords verwenden, die mit der Thematik aus der H1 in Verbindung stehen. Gleichzeitig helfen H2s dem Leser die Abschnitte, die er lesen möchte, schnell zu finden.
<h2>Das ist eine Überschrift zweiter Ordnung</h2>
  • H3: Diese Unterüberschriften werden per Best Practice eingesetzt, um Standpunkte und Informationen aus den H2-Abschnitten genauer darzustellen. Alternativ sind sie auch sehr gut geeignet, um damit Listen und Bulletpoints zu formatieren.
<h3>Das ist eine Überschrift dritter Ordnung</h3>
  • H4: Analog zu der Funktion der H3s, können mit H4s ebenfalls die Informationen aus den H3-Abschnitten weiter hervorgehoben werden.
<h4>Das ist eine Überschrift vierter Ordnung</h4>

Die numerische Ordnung der H-Elemente zeigt die hierarchische Verbindung zwischen ihnen an. Das bedeutet, H1 ist die wichtigste Überschrift, H2 die zweitwichtigste und so weiter. Der Verlust an Relevanz mit absteigender hierarchischer Ordnung erklärt auch, weshalb gängiger Weise H5 und H6 Zwischenüberschriften weder für SEO noch für die strukturelle Formatierung eine besondere Rolle spielen.

Bedeutung von Heading-Tags

Heading Tags geben einer HTML-Datei Struktur und zeichnen aus, welche Art von Daten ein Browser anzeigen soll. Wie diese Daten angezeigt werden sollen, ist damit noch nicht festgelegt, auch wenn dies bei Überschriften meist vordefiniert ist.

Die Formatierungen der Überschriften sollten in den CSS-Dateien hinterlegt werden, um Formatierung und Inhalt voneinander zu trennen. Der Einsatz der Heading Tags ist obligatorisch, wenn Textinhalte dargestellt werden sollen. Jede HTML-Datei sollte nur einen Startknoten besitzen, wenn sie valide sein will.

Über den Validator des W3C kann die Gültigkeit eines HTML-Dokumentes überprüft werden.[3] Zudem ergeben sich aus einer gut strukturierten HTML-Datei gewisse Vorteile für Nutzer und Suchmaschinen.

1.) Überschriften können von Browsern interpretiert werden, die benutzerdefinierte Stylesheets möglicherweise nicht erkennen bzw. anzeigen.

2.) Screenreader und Lupen greifen auf Header Überschriften zurück (Barrierefreiheit und Anzeige auf mobilen Endgräten).

3.) Der Nutzer erhält strukturelle Hinweise auf den Content und kann entscheiden, welche Absätze für ihn interessant sind.

4.) Suchmaschinen erhalten einen validen Quellcode, sowie weitere Signale in Form von relevanten Keywords in den Überschriften, die den Inhalt zusammenfassen.

5.) Eine kleine Änderung der CSS-Datei reicht aus, um alle Überschriften auf globaler Ebene zu formatieren.

Bedeutung für SEO

Suchmaschinen verwenden Heading Tags, um Keywords zu identifizieren, die sich vom übrigen Inhalt durch ihre Formatierung abheben. In der Regel fasst eine Überschrift den nachfolgenden Textabschnitt zusammen. Es ist daher sehr empfehlenswert, wichtige Keywords bereits in der Überschrift zu verwenden. Allerdings ist es nicht sinnvoll, eine Überschrift mit zu vielen Keywords zu füllen (Keyword Stuffing). Die Keywords sollten einen direkten Bezug zum Inhalt haben und in ein lesbares Satzgefüge passen.

Seit Google die User Experience zunehmend mehr gewichtet, hat sich die Bedeutung von Zwischenüberschriften indes ein wenig verschoben. Statt ein rein „technisches“ Feature darzustellen, um Keywords elegant in einen Artikel zu integrieren, liegt der Schwerpunkt ihrer Bedeutung heutzutage darauf, dass dem User ein besser strukturierter, schneller zu erfassender Text angeboten wird. Wenngleich das nicht bedeutet, dass die Platzierung von Keywords in Zwischenüberschriften zum Zwecke der OnPage Optimierung gar keine Bedeutung mehr hat.[4]

Einzelnachweise

  1. Guide: Heading Tags richtig einsetzen goodRanking. Abgerufen am 26. August 2021
  2. Wie du den perfekten H1 Tag für SEO erstellst IT Helps. Abgerufen am 26. August 2021
  3. Markup Validation Service World Wide Web Consortium. Abgerufen am 26. August 2021
  4. SEO-Überschriften: h1 bis h6 richtig einsetzen XOVI. Abgerufen am 26. August 2021

Weblinks

Google Webmaster Hangout vom 27. Dezember 2019: SEO-Relevanz von Überschriften | Google Search Central]