L A D I N G . . .

Überschriften als Dekoration: wie Themes deine Seitenstruktur zerstören

Gestaffelte Textbalken als Gliederung

Auf einer typischen Startseite aus einem gekauften Theme stehen zwischen sechzig und achtzig Überschriften. Sichtbar sind vielleicht acht. Der Rest sind Zahlen, einzelne Wörter aus einem Laufband, Preisangaben und kleine Vorzeilen, die jemand als Überschrift ausgezeichnet hat, weil sie dann die gewünschte Schriftgröße hatten.

Überschriften sind kein Gestaltungsmittel, sondern die Gliederung des Dokuments. Sie sagen Suchmaschinen und Vorleseprogrammen, worum es auf der Seite geht und wie die Teile zueinander stehen. Wer sie für Optik einsetzt, hat am Ende eine Seite ohne erkennbares Thema und ein Inhaltsverzeichnis aus Zahlen.

Was Themes typischerweise falsch auszeichnen

Element Häufig ausgezeichnet als Richtig wäre
Wörter in einem Laufband h6, je Wort eines span oder div
Schrittnummern 01 bis 04 h4 span, aria-hidden
Zähler wie „10+ Jahre“ h3 span, Zahl im Text
Vorzeile über der Überschrift h6 span innerhalb der Überschrift
Preisangaben h4 p oder span
Kartentitel, doppelt für Hover zweimal h3 einmal h3, Dublette als span
Fragen in einem Aufklappbereich reiner button button innerhalb einer Überschrift

Die letzte Zeile ist der umgekehrte Fehler: Dort fehlt eine Überschrift, wo eine hingehört. Aufklappbare Fragen sind Abschnittsüberschriften, und wenn sie nur als Schaltfläche existieren, verliert die Seite ihre gesamte Fragenstruktur.

Warum das messbar schadet

Für Suchmaschinen ist die Überschriftenfolge ein wichtiges Signal dafür, welche Themen eine Seite behandelt und welcher Abschnitt zu welcher Frage gehört. Diese Zuordnung ist auch die Grundlage dafür, dass ein einzelner Abschnitt als direkte Antwort ausgespielt werden kann. Steht dort eine Zahlenfolge, entfällt diese Möglichkeit.

Für Menschen mit Vorleseprogramm ist die Überschriftenliste die wichtigste Navigation überhaupt. Sie springen damit durch die Seite, so wie andere überfliegen. Eine Liste aus „01″, „02″, „Digital“, „Marketing“, „10+“ ist als Navigation wertlos, und die Seite wird dadurch praktisch unbenutzbar.

Wie du deine Seite in einer Minute prüfst

Öffne die Seite, drücke F12, geh in die Konsole und füge das ein:

document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(h =>
  console.log(h.tagName, '|', h.textContent.trim().replace(/\s+/g,' ').slice(0, 70)));

Drei Dinge solltest du in der Ausgabe sehen:

  1. Genau eine h1, und sie benennt das Thema der Seite.
  2. Eine nachvollziehbare Folge. Nach h1 kommt h2, unter h2 kommen h3. Sprünge von h1 auf h4 sind ein Fehler.
  3. Nur echte Aussagen. Jede Zeile in der Ausgabe sollte für sich verständlich sein. Wenn dort „04″ oder ein einzelnes Wort steht, gehört es nicht dorthin.

Wie sich das beheben lässt, ohne das Theme umzubauen

Der naheliegende Weg wäre, die Theme-Dateien zu ändern. Das ist der schlechteste, weil jede Aktualisierung die Arbeit zunichte macht. Zwei bessere Wege:

Über die Ausgabe. Ein kleines Zusatzmodul greift die fertige Seite ab und ersetzt die dekorativen Überschriften durch neutrale Elemente. Optisch ändert sich nichts, wenn die Gestaltung an der Klasse hängt und nicht am Element. Das ist bei diesen Themes fast immer der Fall.

Über die Einstellungen. Manche Baukastenelemente lassen die Überschriftenebene wählen. Wo das möglich ist, ist es der sauberste Weg, weil er ohne Zusatzcode auskommt.

Wichtig bei beiden Wegen: Vorsicht mit allgemeinen Klassennamen. Eine Regel, die pauschal auf eine Klasse wie „title“ greift, erwischt auch echte Kartentitel und löscht dann die Gliederung, die man gerade herstellen wollte.

Was keine Rolle spielt

Damit die Sache nicht überhöht wird: Die reine Anzahl der Überschriften ist kein Bewertungskriterium. Eine lange Seite mit dreißig sinnvollen Abschnitten ist völlig in Ordnung. Ebenso ist es kein Problem, wenn eine h2 nicht das Fokus-Keyword enthält, oder wenn zwei Abschnitte gleich lang sind.

Es geht ausschließlich um den Unterschied zwischen Gliederung und Dekoration. Alles, was eine Aussage über einen Abschnitt macht, darf Überschrift sein. Alles andere nicht.

Wie wir das angehen

Wir prüfen die Überschriftenfolge auf jeder Seite, bevor über Inhalte gesprochen wird, und stellen sie über die Ausgabe gerade, damit ein Theme-Update sie nicht wieder zerstört. Das ist unspektakulär und wirkt an einer Stelle, die sonst niemand ansieht. Mehr dazu unter Webentwicklung und technische Überarbeitung.

Wie viele h1 darf eine Seite haben?

Genau eine. Sie benennt das Thema der Seite. Mehrere h1 sind technisch erlaubt, machen die Gliederung aber uneindeutig und verschenken das stärkste Strukturmerkmal.

Schadet es, wenn Überschriftenebenen übersprungen werden?

Ja, für Vorleseprogramme und für die Zuordnung von Abschnitten. Ein Sprung von h1 direkt auf h4 lässt offen, welchem übergeordneten Abschnitt der Inhalt zugehört.

Wie prüfe ich die Überschriftenstruktur meiner Website?

Über die Konsole des Browsers mit einer Abfrage aller h1 bis h6. Jede ausgegebene Zeile sollte für sich verständlich sein. Zahlen, einzelne Wörter und Preise gehören nicht in diese Liste.

Muss ich dafür das Theme ändern?

Besser nicht, weil Aktualisierungen die Änderung überschreiben. Der stabilere Weg führt über ein Zusatzmodul, das die fertige Seite abgreift, oder über die Einstellungen des jeweiligen Baukastenelements.