Überschriften-Tags (H1–H6) und Hierarchie

Was sind Überschriften-Tags?

Überschriften-Tags von H1 bis H6 sind HTML-Tags, die die Inhaltshierarchie und die Gliederung einer Seite definieren. H1 steht für die oberste Überschrift, H2 für Hauptabschnitte, H3 für Unterabschnitte und so weiter. Auch wenn diese Tags im Browser optisch groß und fett dargestellt werden, ist ihr eigentlicher Zweck nicht visuell, sondern strukturell: Ähnlich wie das Inhaltsverzeichnis eines Buches bilden sie das logische Gerüst der Seite.

Diese Hierarchie ist nicht nur eine für das menschliche Auge lesbare Anordnung, sondern auch eine Baumstruktur, die von Browsern und assistiven Technologien (wie Screenreadern) programmgesteuert „verstanden“ wird. Ein Nutzer eines Bildschirmleseprogramms navigiert in der Regel von Überschrift zu Überschrift auf der Seite; wenn also die Hierarchie gestört ist, ist auch die Navigation beeinträchtigt.

Überschriftenebenen machen zudem den umfangreichen Inhalt einer Seite überschaubar: Anstatt die Seite Zeile für Zeile zu lesen, findet der Nutzer den gesuchten Abschnitt, indem er die Überschriften überfliegt. Dies kann sich sowohl positiv auf die Benutzererfahrung als auch auf die Verweildauer auf der Seite auswirken.

Warum ist das wichtig?

Eine korrekte Überschriftenhierarchie erleichtert es Suchmaschinen, die thematische Kohärenz und die Unterthemen einer Seite zu verstehen, und ermöglicht Nutzern, die Screenreader verwenden, die Navigation auf der Seite. Google leitet aus der Überschriftenstruktur ab, welcher Abschnitt auf einer langen Seite welches Unterthema behandelt; dies kann insbesondere bei erweiterten Suchergebnissen wie „Featured Snippets“ dazu beitragen, dass der richtige Textabschnitt ausgewählt wird.

Eine unregelmäßige oder fehlende Hierarchie führt zu Unklarheiten in der Inhaltsstruktur und zu Barrierefreiheitsproblemen. Ein direkter Sprung von H2 zu H4 kann beispielsweise bei Nutzern von Screenreadern Verwirrung stiften: „Fehlt hier eine Zwischenebene oder ist der Abschnitt zu Ende?“

Im Extremfall können bei Single-Page-Anwendungen oder in mehrkomponentigen Vorlagensystemen verschiedene Komponenten ihre eigenen H1-Überschriften unabhängig voneinander rendern; dies kann dazu führen, dass auf der Seite unbeabsichtigt mehrere H1-Überschriften entstehen. Bei solchen technischen Architekturen ist es wichtig, die Überschriftenebenen zentral zu verwalten.

Wie lässt sich das beheben?

• Auf einer Seite sollte es nur eine H1-Überschrift geben; dies ist in der Regel die Hauptüberschrift der Seite und sollte das Thema der Seite klar zusammenfassen.
• Verwenden Sie die Überschriften der Reihe nach: H1 → H2 → H3, ohne Ebenen zu überspringen.
• Verwenden Sie Überschriften nicht zur visuellen Gestaltung, sondern zur Definition der Inhaltsstruktur; wenn Sie großen/fetten Text wünschen, nutzen Sie CSS, wählen Sie keine falsche Überschriftenebene.
• Jede H2/H3-Überschrift sollte eine echte Abschnittsüberschrift sein und kein dekorativer Text oder Slogan.
• Verwenden Sie Schlüsselwörter in den Überschriften auf natürliche Weise; füllen Sie nicht jede Überschrift künstlich mit Schlüsselwörtern.
• Verfassen Sie Überschriften auf langen Seiten konsistent und vorhersehbar, sodass sie ein Inhaltsverzeichnis bilden; dies hilft sowohl dem Nutzer als auch der Suchmaschine.
• Wenn Sie ein Theme oder eine Komponentenbibliothek verwenden, dokumentieren Sie in einem zentralen Styleguide, welche Überschriftenebene die verschiedenen Komponenten (Header, Hero, Karte, Footer) verwenden.
• Überprüfen Sie bei Änderungen am Seitenlayout regelmäßig mit den Entwicklertools des Browsers (DOM-Baum), ob die Überschriftenhierarchie beeinträchtigt wird.
• Richten Sie bei Blogs oder Nachrichtenseiten einen Content-Management-Workflow ein, bei dem die Überschrift des Beitrags (H1) und der SEO-Titel in getrennten Bereichen verwaltet werden; verknüpfen Sie beide nicht miteinander.
• Auf Websites mit mehreren Autoren können verschiedene Redakteure unterschiedliche Gewohnheiten haben; daher erhöht die Festlegung der Regeln für die Überschriftenhierarchie in einem Styleguide die Konsistenz.

Beispiel

<h1>SEO-Leitfaden</h1>
<h2>Technisches SEO</h2>
<h3>Seitengeschwindigkeit</h3>
<h2>Content-SEO</h2>
<h3>Keyword-Recherche</h3>

Schlechtes Beispiel: Direkt im Anschluss an <h1>Willkommen</h1> ein <h4>Unsere Produkte</h4> verwenden — H2- und H3-Ebenen wurden übersprungen, die Hierarchie ist unterbrochen.

Häufige Fehler

• Mehr als eine H1-Überschrift auf einer Seite verwenden (z. B. sowohl im Logo-Bereich als auch im Inhalt).
• Gar keine H1-Überschriften verwenden.
• Überschriften-Tags nur zur Erzielung einer großen/fetten Schriftart verwenden und dabei die Hierarchie außer Acht lassen.
• Ebenen überspringen, indem man direkt von H2 zu H4 wechselt.
• Wenn im Bericht von Seoraporu.co die Warnung „mehrere H1-Überschriften“ oder „fehlende H1-Überschrift“ erscheint, muss dies auf der Ebene der Vorlage/des Themes behoben werden, da es sich in der Regel um ein Problem handelt, das auf allen Seiten auftritt.