HTML Heading Tags, <h1> bis <h6>, definieren die Überschriften und Unterüberschriften deines Inhalts. Sie erstellen eine hierarchische Dokumentgliederung, die Browsern, Suchmaschinen und assistiven Technologien zeigt, wie deine Seite strukturiert ist. Stell sie dir wie Kapiteltitel und Abschnittstitel in einem Buch vor: H1 ist der Buchtitel, H2s sind Kapiteltitel, H3s sind Abschnitte innerhalb von Kapiteln, und so weiter.
Die Heading-Hierarchie verstehen
Jede Überschriftenebene repräsentiert eine andere Tiefe in der Seitenstruktur:
<h1>: Die Hauptüberschrift der Seite. Sie beschreibt, worum es auf der gesamten Seite geht. Best Practice ist, genau ein H1 pro Seite zu verwenden. Bei einem Blogbeitrag ist das typischerweise der Beitragstitel. Auf einer Homepage könnte es das zentrale Nutzenversprechen sein.<h2>: Hauptabschnitt-Überschriften. Diese teilen deinen Inhalt in seine primären Abschnitte. In einem langen Artikel führt jedes H2 ein neues Thema oder einen Hauptpunkt ein.<h3>: Unterabschnitte innerhalb eines H2-Abschnitts. Wenn dein H2 "Security Headers" behandelt und du das in Teile aufteilen möchtest, bekommt jeder Teil ein H3.<h4>bis<h6>: Tiefere Verschachtelungsebenen. Die meisten Inhalte brauchen selten etwas jenseits von H4. Die Verwendung von H5 oder H6 deutet meist darauf hin, dass der Inhalt von einer Umstrukturierung in separate Seiten oder Abschnitte profitieren könnte.
Warum die Heading-Hierarchie für SEO wichtig ist
Suchmaschinen nutzen Überschriften, um das Thema und die Struktur deines Inhalts zu verstehen. Google hat bestätigt, dass Überschriften ihren Crawlern helfen zu erfassen, worum es in jedem Abschnitt einer Seite geht. Obwohl Überschriften allein kein massiver Rankingfaktor sind, tragen sie auf mehrere Weisen zur Gesamt-Onpage-SEO bei:
- Themensignale: Keywords in Überschriften haben mehr Gewicht als Keywords im Fließtext. Ein H2 mit "WordPress-Login absichern" signalisiert Google, dass dieser Abschnitt speziell Login-Sicherheit behandelt.
- Featured Snippets: Google zieht häufig Inhalte aus Abschnitten mit klaren Überschriften für Featured-Snippet-Ergebnisse. Eine gut strukturierte Seite mit aussagekräftigen Überschriften hat bessere Chancen, in diesen prominenten Positionen zu erscheinen.
- Seitenstruktur-Verständnis: Eine logische Heading-Hierarchie hilft Google, die Beziehung zwischen Abschnitten zu verstehen. Wenn dein H2 "Performance-Optimierung" lautet und deine H3s "Bildkomprimierung" und "Caching" sind, versteht Google diese als Unterthemen der Performance.
- Passage Ranking: Google kann einzelne Passagen einer Seite ranken. Klare Überschriften helfen Google zu erkennen, wo eine Passage endet und eine andere beginnt.
Barrierefreiheit und Screenreader-Navigation
Für Nutzer, die auf Screenreader angewiesen sind (wie JAWS, NVDA oder VoiceOver), sind Überschriften eines der wichtigsten Navigationswerkzeuge. Screenreader-Nutzer drücken häufig eine Tastenkombination (typischerweise "H"), um von Überschrift zu Überschrift zu springen und die Seitenstruktur zu überfliegen, ähnlich wie ein sehender Nutzer visuell scannt. Wenn deine Überschriften fehlen, in falscher Reihenfolge sind oder für visuelles Styling statt Struktur verwendet werden, verlieren Screenreader-Nutzer diese Fähigkeit zur effizienten Navigation. Die Web Content Accessibility Guidelines (WCAG) behandeln die Überschriftenstruktur explizit. Erfolgskriterium 1.3.1 fordert, dass Informationen und Beziehungen, die durch die Präsentation vermittelt werden, programmatisch bestimmbar sein müssen. In der Praxis bedeutet das, dass deine Überschriftenebenen die tatsächliche Inhaltshierarchie widerspiegeln sollen, nicht nur gut aussehen.
Häufige Heading-Fehler in WordPress
WordPress-Seiten sind besonders anfällig für Überschriftenprobleme, weil die Heading-Struktur zwischen Theme und Content-Editor aufgeteilt ist:
- Mehrere H1-Tags: Das ist das häufigste Problem. Manche Themes geben den Seitentitel als H1 im Header aus und umschließen auch den Seiten-/Beitragstitel mit einem H1. Das ergibt zwei konkurrierende Hauptüberschriften. Obwohl Google gesagt hat, dass mehrere H1s "in Ordnung" sind und keine Strafe darstellen, ist ein einzelnes H1, das das Seitenthema klar benennt, der sauberste Ansatz.
- Überschriftenebenen überspringen: Direkt von H2 auf H4 zu springen und H3 komplett auszulassen. Das bricht die logische Gliederung. Screenreader geben die Überschriftenebene an, sodass ein Nutzer, der "Überschrift Ebene 2" gefolgt von "Überschrift Ebene 4" hört, sich fragt, was mit Ebene 3 passiert ist.
- Überschriften für Styling missbrauchen: Ein H3 statt H2 wählen, weil die H3-Schriftgröße im Theme besser aussieht. Das ist ein Missbrauch von Überschriften. Der richtige Ansatz ist, die korrekte Überschriftenebene für die Struktur zu verwenden und dann das CSS anzupassen, um das gewünschte Erscheinungsbild zu erhalten.
- Kein H1 vorhanden: Manche Themes oder Page-Builder-Layouts lassen das H1 versehentlich weg, oder das H1 ist auf den Seitentitel im Header gesetzt, während der eigentliche Seiteninhalt mit H2 beginnt. Jede Seite sollte genau ein H1 haben, das ihr Hauptthema beschreibt.
- Überschriften in Widgets und Sidebars: WordPress-Widgets geben oft H2- oder H3-Überschriften für Widget-Titel aus. Diese Überschriften gehören nicht zur Hauptinhaltshierarchie und können die Dokumentgliederung verwirren. Manche Themes lösen das mit
aria--Attributen, viele aber nicht. - Leere Heading-Tags: Manchmal hinterlassen Themes oder Page Builder leere Heading-Tags im Markup (ein
<h2>ohne Text). Diese sind für sehende Nutzer unsichtbar, verwirren aber Screenreader.
Wie WordPress Headings handhabt
In einem typischen WordPress-Setup funktioniert die Heading-Struktur so: Das Theme generiert das H1, normalerweise aus dem Beitrags- oder Seitentitel. Der Inhalt, den du im Editor schreibst, sollte mit H2-Überschriften für Hauptabschnitte beginnen und H3 und darunter für Unterabschnitte verwenden. Du solltest fast nie ein H1 innerhalb des Content-Editors eingeben, weil das Theme bereits eines ausgibt. Wenn du einen Page Builder oder eine benutzerdefinierte Landingpage verwendest, bei der das Theme kein H1 ausgibt, musst du selbst eines hinzufügen. Vor der Veröffentlichung jeder Seite lohnt es sich zu prüfen, ob das Theme automatisch ein H1 ausgibt, um Duplikate zu vermeiden.
Headings im Gutenberg Block-Editor
Gutenberg macht es einfach, Überschriften einzufügen und zu verwalten. Der Heading-Block lässt dich die Ebene (H2 bis H6, und H1 bei Bedarf) über ein Dropdown wählen. Gutenberg enthält auch eine "Dokumentgliederung" in der Editor-Seitenleiste, die dir die vollständige Heading-Struktur deines Beitrags auf einen Blick zeigt. Wenn du eine Überschriftenebene überspringst, markiert die Gliederungsansicht das mit einer Warnung. Das ist ein hilfreiches eingebautes Tool, das viele WordPress-Nutzer übersehen. Gewöhne dir an, die Dokumentgliederung vor dem Veröffentlichen zu prüfen.
Tools zum Prüfen und Visualisieren der Heading-Struktur
Über Gutenbergs eingebaute Gliederung hinaus gibt es mehrere Möglichkeiten, deine Heading-Struktur zu prüfen:
- Browser-Erweiterungen: Die "HeadingsMap"-Erweiterung (verfügbar für Chrome und Firefox) zeigt die Heading-Hierarchie jeder Seite als aufklappbaren Baum. Das "WAVE"-Barrierefreiheitstool hebt ebenfalls Heading-Probleme hervor.
- SEO-Plugins: Yoast SEO und Rank Math prüfen die Heading-Struktur als Teil ihrer Inhaltsanalyse. Sie warnen vor fehlenden H1s oder suboptimaler Überschriftenverwendung.
- Online-Validatoren: Der W3C Markup Validation Service prüft dein HTML auf strukturelle Probleme, einschließlich Heading-Reihenfolge-Problemen.
- InspectWP: InspectWP scannt deine Seite und listet jede Überschrift der Reihe nach auf, sodass du die vollständige Hierarchie auf einen Blick erkennen kannst.
Best Practices für WordPress-Überschriften
- Ein H1 pro Seite: Lass das Theme das H1 aus dem Beitrags-/Seitentitel erzeugen. Füge im Inhalt kein weiteres hinzu.
- Inhalt bei H2 beginnen: Deine erste Überschrift im Editor sollte H2 sein, nicht H1.
- Keine Ebenen überspringen: Gehe H2, dann H3, dann H4. Springe nie von H2 auf H4.
- Überschriften für Struktur verwenden, nicht für Styling: Wenn du kleineren oder größeren Text möchtest, nutze CSS-Klassen statt die Überschriftenebene zu ändern.
- Überschriften aussagekräftig formulieren: "Sicherheit" ist weniger nützlich als "WordPress-Sicherheits-Best-Practices" für Leser und Suchmaschinen.
- Dokumentgliederung prüfen: Nutze Gutenbergs eingebaute Gliederung oder eine Browser-Erweiterung vor dem Veröffentlichen.
Was InspectWP prüft
InspectWP analysiert die Heading-Struktur deiner WordPress-Seite und listet jede Überschrift der Reihe nach auf, von H1 bis H6. Es erkennt fehlende H1-Tags, mehrfache H1-Tags, übersprungene Überschriftenebenen und leere Überschriften. So erhältst du ein klares Bild der Dokumentgliederung deiner Seite und kannst strukturelle Probleme beheben, die sowohl SEO als auch Barrierefreiheit betreffen.