Saubere Überschriften-Hierarchie verwenden

Was diese Prüfung macht

Parst jedes Überschriften-Element auf der Seite (h1–h6) in Dokumentreihenfolge und prüft, ob die Ebenen lückenlos absteigen. Die Prüfung fällt durch, wenn ein h4 vor einem h3 auftaucht, wenn zwei h1 auf derselben Seite stehen oder wenn die Sektionstiefe um mehr als eine Ebene springt.

Warum es wichtig ist

Ein sauberes Outline zählt an drei Stellen gleichzeitig.

• Screenreader sagen bei jedem Sprung die Überschriftenebene an. Wer per Überschrift navigiert (ein verbreitetes Muster bei blinden Nutzern) hört “Überschrift Ebene 2 — Features, Überschrift Ebene 4 — Preise” und nimmt an, dass eine Ebene 3 fehlt. Die Seite wird unbenutzbar.
• Suchmaschinen lesen das Überschriften-Outline nach wie vor als Hinweis auf die thematische Struktur. Ein h1 gefolgt von fünf h3 ohne h2 liest sich wie ein flacher Content-Klumpen statt wie ein gegliederter Artikel.
• KI-Extraktoren (ChatGPT browsing, Perplexity, Google AI Overviews) zerlegen Content beim Zusammenfassen entlang der Überschriften-Grenzen. Eine kaputte Hierarchie produziert Chunks, die mehrere Themen umfassen, und senkt die Zitierqualität.

Wie du es behebst

Verwende genau einen h1 pro Seite — typischerweise den Seitentitel. Jede weitere Überschrift geht höchstens eine Ebene tiefer:

<h1>Wireless Earbuds im Vergleich 2026</h1>
  <h2>Was wir getestet haben</h2>
    <h3>Audioqualität</h3>
    <h3>Akkulaufzeit</h3>
  <h2>Bestes Gesamtpaket: Sony WF-1000XM5</h2>
    <h3>Pro</h3>
    <h3>Contra</h3>

Die Visual-Styling-Abkürzung. Designer greifen manchmal zu <h4>, weil es “in der richtigen Größe aussieht”. Lass es — wähle die Ebene, die ins Dokument-Outline passt, und style sie per CSS. Tailwind: <h3 class="text-base font-semibold">.

WordPress / Page Builder. Die meisten Block-Editoren (Gutenberg, Elementor) lassen dich die Ebene einer Überschrift unabhängig vom Stil ändern. Geh die Seite einmal durch und tagge jeden Block neu.

Astro / Next.js / React. Bau dir einen kleinen <Section>-Wrapper, der einen Heading-Level-Context inkrementiert, damit wiederverwendbare Komponenten kein hartes <h3> enthalten und das Outline beim Verschachteln nicht brechen.

Selbst auditieren — füge die Seiten-URL in den HTML-Validator des W3C ein und schau dir die Document-Outline-Vorschau an, oder nutze die Browser-Erweiterung headingsMap.

Häufig gestellte Fragen

Darf ich zwei h1 auf einer Seite haben?

HTML5 erlaubt technisch mehrere h1 innerhalb von <section>- oder <article>-Elementen, aber jeder Hersteller assistiver Technologie — und auch Google — behandelt nach wie vor genau einen h1 pro Seite als das richtige Muster. Bleib bei einem. Siehe Seite H1-Tag.

Was ist mit Sidebars und Widgets?

Überschriften innerhalb von <aside> oder wiederkehrenden Layout-Regionen zählen ebenfalls zum Outline. Setze sie entweder auf <h3> ab, damit sie unter dem Hauptinhalt geschachtelt sind, oder wickle sie in ein Landmark mit eigenem Heading-Scope.

Beeinflusst das Lighthouse- oder Accessibility-Scores?

Ja — heading-order ist eine der axe-core-Regeln, die Lighthouse ausführt. Eine kaputte Hierarchie senkt deinen Lighthouse-Accessibility-Score direkt.