Überschriften-Hierarchie in WordPress korrigieren

Überschriften geben deinem Seiteninhalt eine klare, logische Struktur. Sie sind nicht nur visuelle Elemente, um Text größer aussehen zu lassen. Screenreader nutzen sie, damit Benutzer durch Abschnitte navigieren können, und Suchmaschinen verwenden sie, um die Themenhierarchie deines Inhalts zu verstehen. Eine fehlerhafte Überschriftenstruktur verwirrt sowohl Menschen als auch Maschinen. Daher lohnt es sich, sie richtig umzusetzen, sowohl für Barrierefreiheit als auch für SEO und die allgemeine Lesbarkeit.

Wie eine korrekte Überschriften-Hierarchie aussieht

Stelle dir deine Überschriften wie eine Gliederung oder ein Inhaltsverzeichnis vor. Jede Ebene repräsentiert eine Verschachtelungstiefe, und du solltest beim Absteigen nie eine Ebene überspringen. So sieht eine korrekte Struktur aus:

H1: Seitentitel (nur einer pro Seite)
  H2: Erster Hauptabschnitt
    H3: Unterabschnitt des ersten Hauptabschnitts
    H3: Weiterer Unterabschnitt
      H4: Detail innerhalb des Unterabschnitts
  H2: Zweiter Hauptabschnitt
    H3: Unterabschnitt des zweiten Hauptabschnitts
  H2: Dritter Hauptabschnitt

Beachte, wie jede Überschriftenebene innerhalb der darüber liegenden Ebene enthalten ist. Du würdest nicht von H2 direkt zu H4 springen, genauso wenig wie du einen Unter-Unter-Abschnitt ohne einen Unterabschnitt erstellen würdest. Zurück nach oben gehen ist in Ordnung: nach einem H4 kannst du für einen neuen Hauptabschnitt zu H2 zurückkehren.

Häufige WordPress-Fehler bei Überschriften

Die meisten Probleme mit der Überschriften-Hierarchie in WordPress kommen von einigen wiederkehrenden Mustern:

• Theme verwendet falsche Tags für den Seitentitel: Manche Themes geben den Beitrags- oder Seitentitel als H2 statt H1 aus, oder sie verwenden den Seitennamen als H1 auf jeder Seite. Das bedeutet, dein eigentlicher Inhaltstitel wird herabgestuft, und viele Seiten haben möglicherweise keinen korrekten H1.
• Mehrere H1-Tags auf einer einzigen Seite: Das passiert normalerweise, wenn das Theme den Seitentitel als H1 im Header ausgibt und der Seitentitel ebenfalls ein H1 ist. Jede Seite sollte genau einen H1 haben. Auf Unterseiten sollte der Seitenname ein <p>, <span> oder gestyltes <div> sein, kein H1.
• Überspringen von Überschriftenebenen: Von H2 zu H4 oder von H1 zu H3 zu springen passiert, wenn Autoren Überschriftenebenen nach ihrem visuellen Aussehen wählen statt nach ihrer logischen Bedeutung. Wenn H3 die richtige Größe zu haben scheint, wählen sie H3, auch wenn kein H2 darüber existiert.
• Überschriften für visuelles Styling verwenden: Autoren verwenden manchmal H2 oder H3, nur weil sie fetten, großen Text für einen Call-to-Action oder einen Sidebar-Widget-Titel wollen. Das sind keine tatsächlichen Inhaltsüberschriften und sollten stattdessen mit CSS-Klassen gestylt werden.
• Page-Builder- und Widget-Überschriften: Page Builder wie Elementor und Widget-Bereiche fügen oft Überschriften auf unerwarteten Ebenen ein. Ein Sidebar-Widget könnte H3 verwenden, während der Inhaltsbereich kein H2 hat, was eine übersprungene Ebene in der gesamten Seitenhierarchie erzeugt.

So überprüfst du deine Überschriften-Hierarchie

Bevor du etwas reparierst, musst du sehen, wie deine aktuelle Überschriftenstruktur aussieht. Hier sind mehrere Möglichkeiten:

• InspectWP: Führe einen Scan durch und schaue dir den Inhaltsbereich an. InspectWP zeigt die komplette Überschriften-Hierarchie deiner Seite an und macht es einfach, fehlende H1-Tags, doppelte H1s, übersprungene Ebenen und andere Probleme zu erkennen.
• HeadingsMap Browser-Erweiterung: Verfügbar für Chrome und Firefox, zeigt diese Erweiterung eine Baumansicht aller Überschriften auf der aktuellen Seite. Sie hebt strukturelle Fehler wie übersprungene Ebenen mit Warnsymbolen hervor.
• WAVE Accessibility Tool: Die WAVE Browser-Erweiterung (wave.webaim.org) bewertet deine Seite auf Barrierefreiheitsprobleme, einschließlich Überschriftenstruktur-Probleme. Sie blendet Icons direkt auf der Seite ein, wo Probleme gefunden werden.
• Manuelle Inspektion: Rechtsklicke auf die Seite, wähle "Seitenquelltext anzeigen" (Strg+U) und suche nach <h1, <h2, <h3 und so weiter. Das zeigt dir die rohen Heading-Tags im HTML.

Überschriften im Gutenberg-Block-Editor korrigieren

Wenn du den WordPress-Block-Editor (Gutenberg) verwendest, ist das Korrigieren von Überschriftenebenen unkompliziert:

1. Klicke auf einen beliebigen Überschriften-Block in deinem Inhalt.
2. In der Block-Toolbar oben siehst du die aktuelle Überschriftenebene (zum Beispiel "H3"). Klicke darauf, um ein Dropdown zu öffnen.
3. Wähle die korrekte Überschriftenebene aus dem Dropdown. Denke daran: Abschnitte deines Inhalts sollten mit H2 beginnen (da H1 für den Seitentitel reserviert ist), und Unterabschnitte sollten H3 verwenden.
4. Der Block-Editor enthält jetzt eine "Dokument-Gliederung"-Funktion. Klicke auf das Info-Symbol (Kreis mit "i") in der oberen Toolbar, um die Überschriftenstruktur des gesamten Beitrags zu sehen. Es warnt dich bei übersprungenen Ebenen.

Wenn du den Classic Editor verwendest, wechsle zum "Text"-Tab, um das rohe HTML zu sehen und die Heading-Tags manuell zu ändern.

Überschriften in Theme-Templates korrigieren

Wenn deine Überschriftenprobleme vom Theme statt vom Inhalt kommen, musst du die Theme-Template-Dateien bearbeiten. Verwende immer ein Child Theme, damit deine Änderungen Theme-Updates überleben.

Häufige Korrekturen beinhalten das Ändern des Seitentitel-Tags auf Unterseiten:

// In header.php deines Child Themes
<?php if (is_front_page()) : ?>
    <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<?php else : ?>
    <p class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></p>
<?php endif; ?>

Und sicherstellen, dass der Beitragstitel auf Einzel-Beitrags/Seiten-Templates H1 verwendet:

// In single.php oder content-single.php
<h1 class="entry-title"><?php the_title(); ?></h1>

Auf Archivseiten (Kategorie, Schlagwort, Datumsarchive) sollte der Archivtitel typischerweise der H1 sein, und einzelne Beitragstitel innerhalb der Schleife sollten H2 sein.

Überschriften stylen, ohne die Hierarchie zu brechen

Wenn du willst, dass Text visuell wie eine Überschrift aussieht, aber keine strukturelle Überschrift ist (zum Beispiel ein Werbebanner oder ein Widget-Titel), verwende eine CSS-Klasse statt eines Heading-Tags:

.heading-style {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

Wende diese Klasse auf ein <p>- oder <div>-Element an. Umgekehrt, wenn du eine echte Überschrift kleiner oder anders als den Standard aussehen lassen willst, style sie mit CSS, statt eine niedrigere Überschriftenebene wegen des Aussehens zu wählen.

Auswirkungen der Überschriften-Hierarchie auf die Barrierefreiheit (WCAG 1.3.1)

Das Web Content Accessibility Guidelines (WCAG) Erfolgskriterium 1.3.1 verlangt, dass Informationen, Struktur und Beziehungen, die durch die Darstellung vermittelt werden, programmatisch bestimmbar sind. Überschriften sind die primäre Art, wie Screenreader-Nutzer auf Webseiten navigieren. Laut der Screenreader-Nutzer-Umfrage von WebAIM nutzen über 67% der Screenreader-Nutzer Überschriften als ihre primäre Methode, um Inhalte auf einer Seite zu finden. Wenn du Überschriftenebenen überspringst oder Überschriften für visuelles Styling verwendest, können Screenreader-Nutzer deinen Inhalt nicht zuverlässig navigieren. Die Überschriften-Hierarchie zu korrigieren ist eine der einfachsten und wirkungsvollsten Barrierefreiheitsverbesserungen, die du machen kannst.

SEO-Auswirkungen einer korrekten Überschriftenstruktur

Google hat bestätigt, dass es Überschriften verwendet, um den Inhalt und die Struktur einer Seite zu verstehen. Überschriften allein werden deine Rankings nicht entscheiden, aber sie liefern wichtige Kontextsignale. Ein H2 mit dem Text "Installationsanleitung" sagt Google, dass der folgende Abschnitt die Installation behandelt. Korrekt verschachtelte Überschriften helfen Google auch dabei, Featured Snippets und Sitelinks zu generieren. Ebenen zu überspringen oder Überschriften inkonsistent zu verwenden sendet widersprüchliche Signale über deine Inhaltsstruktur und kann verhindern, dass Suchmaschinen deine Seitenthemen korrekt interpretieren.

Überschriften-Hierarchie mit InspectWP überprüfen

Nach den Korrekturen führe einen neuen InspectWP-Scan durch. Der Inhaltsbereich zeigt jede Überschrift auf deiner Seite in der richtigen Reihenfolge zusammen mit ihrer Ebene an. Du solltest einen einzelnen H1 sehen, gefolgt von H2s für Hauptabschnitte, H3s für Unterabschnitte, und keine übersprungenen Ebenen. Wenn du verbleibende Probleme entdeckst, gehe zurück zum Editor oder Theme-Template und passe es entsprechend an.