Was sind Heading Tags (H1-H6)?

HTML Heading Tags, <h1> bis <h6>, definieren die Uberschriften und Unteruberschriften 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 Uberschriftenebene reprasentiert eine andere Tiefe in der Seitenstruktur:

• <h1>: Die Hauptuberschrift 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 konnte es das zentrale Nutzenversprechen sein.
• <h2>: Hauptabschnitt-Uberschriften. Diese teilen deinen Inhalt in seine primaren Abschnitte. In einem langen Artikel fuhrt 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 mochtest, 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 konnte.

Warum die Heading-Hierarchie fur SEO wichtig ist

Suchmaschinen nutzen Uberschriften, um das Thema und die Struktur deines Inhalts zu verstehen. Google hat bestatigt, dass Uberschriften ihren Crawlern helfen zu erfassen, worum es in jedem Abschnitt einer Seite geht. Obwohl Uberschriften allein kein massiver Rankingfaktor sind, tragen sie auf mehrere Weisen zur Gesamt-Onpage-SEO bei:

• Themensignale: Keywords in Uberschriften haben mehr Gewicht als Keywords im Fliesstext. Ein H2 mit "WordPress-Login absichern" signalisiert Google, dass dieser Abschnitt speziell Login-Sicherheit behandelt.
• Featured Snippets: Google zieht haufig Inhalte aus Abschnitten mit klaren Uberschriften fur Featured-Snippet-Ergebnisse. Eine gut strukturierte Seite mit aussagekraftigen Uberschriften hat bessere Chancen, in diesen prominenten Positionen zu erscheinen.
• Seitenstruktur-Verstandnis: 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 Uberschriften helfen Google zu erkennen, wo eine Passage endet und eine andere beginnt.

Barrierefreiheit und Screenreader-Navigation

Fur Nutzer, die auf Screenreader angewiesen sind (wie JAWS, NVDA oder VoiceOver), sind Uberschriften eines der wichtigsten Navigationswerkzeuge. Screenreader-Nutzer drucken haufig eine Tastenkombination (typischerweise "H"), um von Uberschrift zu Uberschrift zu springen und die Seitenstruktur zu uberfliegen, ahnlich wie ein sehender Nutzer visuell scannt. Wenn deine Uberschriften fehlen, in falscher Reihenfolge sind oder fur visuelles Styling statt Struktur verwendet werden, verlieren Screenreader-Nutzer diese Fahigkeit zur effizienten Navigation. Die Web Content Accessibility Guidelines (WCAG) behandeln die Uberschriftenstruktur explizit. Erfolgskriterium 1.3.1 fordert, dass Informationen und Beziehungen, die durch die Prasentation vermittelt werden, programmatisch bestimmbar sein mussen. In der Praxis bedeutet das, dass deine Uberschriftenebenen die tatsachliche Inhaltshierarchie widerspiegeln sollen, nicht nur gut aussehen.

Haufige Heading-Fehler in WordPress

WordPress-Seiten sind besonders anfallig fur Uberschriftenprobleme, weil die Heading-Struktur zwischen Theme und Content-Editor aufgeteilt ist:

• Mehrere H1-Tags: Das ist das haufigste Problem. Manche Themes geben den Seitentitel als H1 im Header aus und umschliessen auch den Seiten-/Beitragstitel mit einem H1. Das ergibt zwei konkurrierende Hauptuberschriften. 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.
• Uberschriftenebenen uberspringen: Direkt von H2 auf H4 zu springen und H3 komplett auszulassen. Das bricht die logische Gliederung. Screenreader geben die Uberschriftenebene an, sodass ein Nutzer, der "Uberschrift Ebene 2" gefolgt von "Uberschrift Ebene 4" hort, sich fragt, was mit Ebene 3 passiert ist.
• Uberschriften fur Styling missbrauchen: Ein H3 statt H2 wahlen, weil die H3-Schriftgrosse im Theme besser aussieht. Das ist ein Missbrauch von Uberschriften. Der richtige Ansatz ist, die korrekte Uberschriftenebene fur die Struktur zu verwenden und dann das CSS anzupassen, um das gewunschte 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, wahrend der eigentliche Seiteninhalt mit H2 beginnt. Jede Seite sollte genau ein H1 haben, das ihr Hauptthema beschreibt.
• Uberschriften in Widgets und Sidebars: WordPress-Widgets geben oft H2- oder H3-Uberschriften fur Widget-Titel aus. Diese Uberschriften gehoren nicht zur Hauptinhaltshierarchie und konnen die Dokumentgliederung verwirren. Manche Themes losen 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 fur 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-Uberschriften fur Hauptabschnitte beginnen und H3 und darunter fur 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 hinzufugen. Vor der Veroffentlichung jeder Seite lohnt es sich zu prufen, ob das Theme automatisch ein H1 ausgibt, um Duplikate zu vermeiden.

Headings im Gutenberg Block-Editor

Gutenberg macht es einfach, Uberschriften einzufugen und zu verwalten. Der Heading-Block lasst dich die Ebene (H2 bis H6, und H1 bei Bedarf) uber ein Dropdown wahlen. Gutenberg enthalt auch eine "Dokumentgliederung" in der Editor-Seitenleiste, die dir die vollstandige Heading-Struktur deines Beitrags auf einen Blick zeigt. Wenn du eine Uberschriftenebene uberspringst, markiert die Gliederungsansicht das mit einer Warnung. Das ist ein hilfreiches eingebautes Tool, das viele WordPress-Nutzer ubersehen. Gewohne dir an, die Dokumentgliederung vor dem Veroffentlichen zu prufen.

Tools zum Prufen und Visualisieren der Heading-Struktur

Uber Gutenbergs eingebaute Gliederung hinaus gibt es mehrere Moglichkeiten, deine Heading-Struktur zu prufen:

• Browser-Erweiterungen: Die "HeadingsMap"-Erweiterung (verfugbar fur 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 prufen die Heading-Struktur als Teil ihrer Inhaltsanalyse. Sie warnen vor fehlenden H1s oder suboptimaler Uberschriftenverwendung.
• Online-Validatoren: Der W3C Markup Validation Service pruft dein HTML auf strukturelle Probleme, einschliesslich Heading-Reihenfolge-Problemen.
• InspectWP: InspectWP scannt deine Seite und listet jede Uberschrift der Reihe nach auf, sodass du die vollstandige Hierarchie auf einen Blick erkennen kannst.

Best Practices fur WordPress-Uberschriften

• Ein H1 pro Seite: Lass das Theme das H1 aus dem Beitrags-/Seitentitel erzeugen. Fuge im Inhalt kein weiteres hinzu.
• Inhalt bei H2 beginnen: Deine erste Uberschrift im Editor sollte H2 sein, nicht H1.
• Keine Ebenen uberspringen: Gehe H2, dann H3, dann H4. Springe nie von H2 auf H4.
• Uberschriften fur Struktur verwenden, nicht fur Styling: Wenn du kleineren oder grosseren Text mochtest, nutze CSS-Klassen statt die Uberschriftenebene zu andern.
• Uberschriften aussagekraftig formulieren: "Sicherheit" ist weniger nutzlich als "WordPress-Sicherheits-Best-Practices" fur Leser und Suchmaschinen.
• Dokumentgliederung prufen: Nutze Gutenbergs eingebaute Gliederung oder eine Browser-Erweiterung vor dem Veroffentlichen.

Was InspectWP pruft

InspectWP analysiert die Heading-Struktur deiner WordPress-Seite und listet jede Uberschrift der Reihe nach auf, von H1 bis H6. Es erkennt fehlende H1-Tags, mehrfache H1-Tags, ubersprungene Uberschriftenebenen und leere Uberschriften. So erhaltst du ein klares Bild der Dokumentgliederung deiner Seite und kannst strukturelle Probleme beheben, die sowohl SEO als auch Barrierefreiheit betreffen.