Überschriften-Struktur Checker

Überschriften-Struktur Checker

Fügen Sie den HTML-Quellcode einer Seite ein, um die Überschriftenhierarchie (H1-H6) als eingerückten Baum darzustellen. Häufige SEO- und Barrierefreiheitsprobleme werden erkannt.

Erkannte Probleme

• Fehlendes H1: jede Seite sollte genau ein H1 haben
• Mehrere H1: nur ein H1 pro Seite empfohlen
• Ebenensprünge: z.B. H2 gefolgt von H4 ohne H3 dazwischen
• Leere Überschriften: Überschriften ohne Textinhalt

Warum Überschriftenstruktur wichtig ist

Eine gut strukturierte Hierarchie dient zwei Zwecken:

• SEO: Suchmaschinen nutzen Überschriften zum Verständnis der Seitenstruktur. Ein einziges beschreibendes H1 mit dem Haupt-Keyword hilft Google.
• Barrierefreiheit (WCAG): Screenreader navigieren über Überschriften. Ebenensprünge stören diese Navigation.

Best Practices

• Genau ein H1 pro Seite, beschreibt das Hauptthema
• H2 für Hauptabschnitte, H3 für Unterabschnitte usw.
• Ebenen nie überspringen, für visuelles Styling CSS verwenden

Gesetzliche Anforderungen in Deutschland und Europa

Die Überschriftenstruktur ist in Deutschland nicht nur eine SEO-Empfehlung, für viele Organisationen ist sie gesetzlich vorgeschrieben:

• BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung): alle Bundesbehörden und öffentlichen Einrichtungen müssen WCAG 2.1 Level AA erfüllen. WCAG-Erfolgskriterium 1.3.1 erfordert eine logische Überschriftenhierarchie. Verstöße können der Bundesfachstelle Barrierefreiheit gemeldet werden.
• BFSG (Barrierefreiheitsstärkungsgesetz), Juni 2025: Das deutsche Umsetzungsgesetz des europäischen Accessibility Act verpflichtet private Unternehmen (E-Commerce, Banken, Transport, E-Books) ab dem 28. Juni 2025 zur Einhaltung von WCAG 2.1 AA. Die korrekte Überschriftenhierarchie ist durch WCAG-Kriterium 1.3.1 direkt gefordert.
• WCAG 2.1 AA, Kriterium 1.3.1: verletzt, wenn Überschriften Ebenen überspringen oder Inhalt ohne HTML-Hierarchie visuell eingerückt wird. Marktüberwachungsbehörden der Länder sind für die Durchsetzung zuständig.

Kostenlose Werkzeuge zur Überprüfung: WAVE-Erweiterung, axe DevTools (Browser-Erweiterung), Accessibility-Tab in den Chrome-DevTools.