Überschriften wirken auf einer Webseite erst einmal ganz normal. Sie machen Texte übersichtlicher, trennen Abschnitte voneinander und helfen Besuchern dabei, Inhalte schneller zu erfassen. Viele Webseitenbetreiber denken dabei vor allem an die Optik: Welche Überschrift ist groß genug? Welche Schrift sieht gut aus? Passt die Farbe zum Design?
Das ist verständlich. Aber Überschriften sind nicht nur Gestaltungselemente. Sie haben auch eine wichtige strukturelle Aufgabe. Gerade für Barrierefreiheit und Suchmaschinen ist es entscheidend, dass H1, H2 und H3 sinnvoll verwendet werden.
Wenn Überschriften falsch eingesetzt werden, sieht die Seite für sehende Besucher vielleicht trotzdem ordentlich aus. Für Screenreader, Tastaturnutzer und Suchmaschinen kann die Struktur aber verwirrend sein.
Was bedeutet H1, H2 und H3 überhaupt?
H1, H2 und H3 sind Überschriftenebenen im HTML-Code einer Webseite. Man kann sie sich wie die Gliederung eines Dokuments vorstellen.
Die H1 ist die Hauptüberschrift einer Seite. Sie beschreibt das zentrale Thema. H2-Überschriften gliedern die wichtigsten Abschnitte darunter. H3-Überschriften unterteilen diese Abschnitte noch einmal genauer.
Ein einfaches Beispiel:
H1: Barrierefreie Kontaktformulare erstellen
H2: Warum Labels wichtig sind
H3: Sichtbare Labels statt Platzhalter
H2: Fehlermeldungen verständlich anzeigen
H3: Fehler direkt am Feld erklären
So entsteht eine klare Struktur. Besucher können den Inhalt leichter erfassen, und Hilfstechnologien verstehen besser, wie die Seite aufgebaut ist.
Überschriften sind keine reinen Designgrößen
Ein häufiger Fehler ist, Überschriften nur nach ihrer Größe auszuwählen. Man möchte einen Text etwas größer darstellen und nimmt deshalb einfach eine H2. Oder man möchte eine kleinere Überschrift und verwendet eine H4, obwohl sie inhaltlich eigentlich eine H2 sein müsste.
Das Problem dabei: Die Überschriftenebene sagt etwas über die Struktur aus, nicht nur über das Aussehen.
Wenn eine Überschrift optisch groß sein soll, sollte man das über das Design lösen, nicht über eine falsche Überschriftenebene. Eine H2 kann kleiner gestaltet werden. Eine H3 kann größer aussehen. Wichtig ist, dass die logische Reihenfolge im Hintergrund stimmt.
Gerade in WordPress passiert dieser Fehler schnell, weil Überschriften im Editor direkt auswählbar sind. Man klickt auf „Überschrift 2“ oder „Überschrift 3“, weil es optisch passt. Dabei sollte man zuerst fragen: Welche Rolle hat diese Überschrift im Inhalt?
Die H1 sollte das Hauptthema der Seite nennen
Die H1 ist die wichtigste Überschrift einer Seite. Sie sollte klar sagen, worum es auf dieser Seite geht. Bei einem Blogbeitrag ist das meistens der Beitragstitel. Bei einer Leistungsseite kann es der Name der Leistung sein. Bei einer Startseite kann es eine zentrale Aussage über das Unternehmen sein.
Problematisch wird es, wenn die H1 fehlt oder mehrfach falsch verwendet wird. Manche Webseiten haben gar keine echte H1, weil der Titel nur optisch groß gestaltet wurde. Andere nutzen mehrere H1-Überschriften für verschiedene Bereiche, weil sie alle wichtig wirken sollen.
Für eine normale Unterseite ist meistens eine klare H1 die beste Lösung. Sie gibt der Seite ein Hauptthema und bildet den Einstieg in die Struktur.
Beispiele für gute H1-Überschriften:
„Barrierefreie Webseite erstellen lassen“
„Gebäudereinigung in Rüsselsheim“
„Kontaktformular barrierefrei gestalten“
„WooCommerce-Shop barrierefrei machen“
Die H1 sollte nicht kryptisch, zu allgemein oder nur werblich sein. „Willkommen“ ist selten eine gute H1, weil sie kaum Inhalt vermittelt.
H2-Überschriften gliedern die Hauptabschnitte
H2-Überschriften sind die wichtigsten Unterüberschriften nach der H1. Sie teilen den Inhalt in größere Themenbereiche auf. In einem Blogbeitrag sind das die Abschnitte, an denen sich Leser orientieren.
Ein guter Beitrag lässt sich oft schon durch seine H2-Überschriften grob verstehen. Wenn man nur die H2 liest, sollte klar werden, welche Fragen der Artikel beantwortet.
Beispiel:
H1: Fehler bei Überschriften richtig vermeiden
H2: Warum Überschriften für Barrierefreiheit wichtig sind
H2: Die H1 als Hauptüberschrift
H2: H2 und H3 sinnvoll einsetzen
H2: Häufige Fehler in WordPress
H2: So prüfst du deine Überschriftenstruktur
Das ist übersichtlich und logisch. Jede H2 führt einen neuen Hauptgedanken ein.
H3-Überschriften gehören unter eine H2
H3-Überschriften werden verwendet, wenn ein H2-Abschnitt weiter unterteilt werden soll. Sie sind also keine beliebigen kleinen Zwischenüberschriften, sondern gehören inhaltlich zu einer übergeordneten H2.
Ein Beispiel:
H2: Häufige Fehler bei Überschriften
H3: Mehrere H1-Überschriften auf einer Seite
H3: Überschriften nur wegen der Schriftgröße verwenden
H3: Ebenen überspringen
H3: Leere Überschriften im Layout
So ist klar: Die H3-Punkte sind Unterpunkte der H2 „Häufige Fehler bei Überschriften“.
Weniger sinnvoll wäre es, direkt nach einer H1 mit einer H3 zu starten, ohne dass vorher eine H2 kommt. Das wirkt in der Struktur so, als würde ein Kapitel fehlen.
Ebenen nicht einfach überspringen
Ein typischer Fehler ist das Überspringen von Überschriftenebenen. Nach einer H1 sollte normalerweise eine H2 folgen. Unter einer H2 kann eine H3 stehen. Danach kann bei Bedarf eine H4 kommen.
Ungünstig ist zum Beispiel:
H1
H3
H2
H4
H2
Für sehende Nutzer fällt das oft nicht auf, weil sie nur die Gestaltung sehen. Für Screenreader-Nutzer kann diese Reihenfolge aber verwirrend sein. Sie bekommen die Überschriftenstruktur vorgelesen oder können von Überschrift zu Überschrift springen. Wenn Ebenen ohne Grund übersprungen werden, wirkt die Seite unlogisch.
Man kann sich das wie ein Inhaltsverzeichnis vorstellen. Dort würde man auch nicht vom Kapitel direkt zu Punkt 1.1.1 springen, wenn Punkt 1.1 fehlt.
Warum Überschriften für Screenreader wichtig sind
Viele Menschen nutzen Überschriften, um eine Seite schnell zu überfliegen. Screenreader-Nutzer machen das ebenfalls, nur anders. Sie können sich eine Liste der Überschriften ausgeben lassen und so schneller entscheiden, welcher Bereich relevant ist.
Wenn die Überschriften sauber aufgebaut sind, funktioniert das sehr gut. Die Seite wird dadurch deutlich leichter navigierbar.
Wenn Überschriften fehlen, falsch verschachtelt oder nur aus leeren Design-Elementen bestehen, wird diese Orientierung erschwert. Dann muss sich jemand mühsam durch den gesamten Inhalt bewegen, statt direkt zu passenden Abschnitten springen zu können.
Gerade bei längeren Seiten, Blogbeiträgen, Hilfeartikeln, Produktseiten oder Leistungsseiten macht eine klare Überschriftenstruktur einen großen Unterschied.
Auch Suchmaschinen profitieren von klarer Struktur
Überschriften helfen nicht nur Menschen, sondern auch Suchmaschinen. Sie geben Hinweise darauf, welche Themen auf einer Seite behandelt werden und wie die Inhalte zusammenhängen.
Das bedeutet nicht, dass man jede Überschrift mit Keywords vollstopfen sollte. Das wirkt schnell unnatürlich und hilft dem Leser nicht. Eine gute Überschrift beschreibt einfach klar den Abschnitt.
Statt:
„SEO Barrierefreiheit Überschriften H1 H2 H3 BFSG Webseite“
besser:
„Warum Überschriften für Barrierefreiheit wichtig sind“
Das ist verständlich, natürlich und trotzdem thematisch klar.
Häufige Fehler in WordPress
In WordPress entstehen Überschriftenfehler besonders leicht. Der Editor macht es sehr einfach, verschiedene Überschriften auszuwählen. Dazu kommen Themes, Page Builder und Plugins, die manchmal eigene Strukturen erzeugen.
Typische Fehler sind:
Die H1 wird durch das Theme ausgegeben, zusätzlich setzt der Seitenbetreiber noch eine zweite H1 in den Inhalt.
Abschnitte werden mit H3 gestaltet, obwohl vorher keine H2 vorhanden ist.
Buttons oder kleine Textblöcke werden als Überschrift formatiert.
Leere Überschriften bleiben im Layout zurück.
Footer- oder Sidebar-Elemente verwenden Überschriften, die nicht zur Seitenstruktur passen.
Nicht jeder dieser Fehler zerstört sofort die ganze Webseite. Aber zusammen können sie die Struktur deutlich verschlechtern.
Überschriften sollten Inhalte beschreiben
Eine gute Überschrift ist nicht nur technisch richtig, sondern auch verständlich. Sie sollte kurz sagen, was im folgenden Abschnitt kommt.
Schlecht sind Überschriften wie:
„Mehr erfahren“
„Weitere Infos“
„Unser Angebot“
„Wichtig“
„Das sollten Sie wissen“
Solche Überschriften können funktionieren, sind aber oft zu allgemein. Besser ist es, konkreter zu werden.
Zum Beispiel:
„Welche Webseiten vom BFSG betroffen sein können“
„Warum Alt-Texte für Bilder wichtig sind“
„So erkennst du schlechte Farbkontraste“
„Was bei barrierefreien Formularen häufig schiefgeht“
Konkrete Überschriften helfen allen Nutzern. Sie sparen Zeit und machen die Seite leichter verständlich.
Überschriften nicht für jedes kleine Element verwenden
Manche Webseiten nutzen sehr viele Überschriften, auch für kleine Boxen, kurze Slogans oder dekorative Elemente. Dadurch entsteht schnell eine unruhige Struktur.
Nicht jeder hervorgehobene Text muss eine echte Überschrift sein. Ein kurzer Hinweis, ein Buttontext oder ein einzelnes Schlagwort kann auch einfach normaler Text sein, der optisch gestaltet wird.
Eine Überschrift sollte immer einen Abschnitt einleiten. Wenn danach kein echter Inhalt folgt, ist sie wahrscheinlich keine sinnvolle Überschrift.
So prüfst du deine Überschriftenstruktur
Man kann die Überschriftenstruktur einer Webseite relativ einfach prüfen. Der erste Schritt ist ein Blick auf die Seite: Gibt es genau eine klare Hauptüberschrift? Sind die Abschnitte sinnvoll gegliedert? Versteht man den Aufbau, wenn man nur die Überschriften liest?
Danach lohnt sich ein technischer Blick. Viele Browser-Erweiterungen oder Prüfwerkzeuge können die Überschriftenhierarchie anzeigen. Dort sieht man schnell, ob Ebenen übersprungen werden oder mehrere H1-Überschriften vorhanden sind.
Auch ein einfacher Test hilft: Kopiere alle Überschriften einer Seite untereinander in ein Dokument. Wenn daraus ein logisches Inhaltsverzeichnis entsteht, ist die Struktur meist gut. Wenn es durcheinander wirkt, sollte man nachbessern.
Eine gute Struktur macht Texte angenehmer
Saubere Überschriften sind nicht nur ein Thema für Technik und Barrierefreiheit. Sie machen Inhalte auch für normale Besucher angenehmer.
Viele Menschen lesen Webseiten nicht von oben bis unten. Sie scannen erst einmal. Sie schauen auf Überschriften, springen zu interessanten Abschnitten und entscheiden dann, ob sie weiterlesen.
Wenn die Überschriften klar sind, fühlt sich die Seite aufgeräumt an. Besucher finden schneller, was sie suchen. Gerade bei längeren Texten ist das wichtig.
Eine gute Überschriftenstruktur ist deshalb nicht trocken oder rein technisch. Sie verbessert die gesamte Nutzererfahrung.
Fazit: Überschriften brauchen eine klare Reihenfolge
Fehler bei H1, H2 und H3 entstehen oft nicht aus Absicht, sondern aus Gewohnheit. Man wählt eine Überschrift, weil sie optisch passt, ohne an die Struktur zu denken. Genau das kann aber zu Problemen führen.
Die H1 sollte das Hauptthema der Seite nennen. H2-Überschriften gliedern die wichtigsten Abschnitte. H3-Überschriften unterteilen diese Abschnitte weiter. Ebenen sollten nicht ohne Grund übersprungen werden.
Wer Überschriften richtig verwendet, macht seine Webseite verständlicher, barriereärmer und besser strukturiert. Das hilft Screenreader-Nutzern, Suchmaschinen und allen Besuchern, die Inhalte schnell erfassen möchten.
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.