Definition
Die H1–H6-Überschriftenstruktur ist ein zentrales Element im Bereich SEO, Webentwicklung und Contentstrukturierung. Überschriften sind nicht nur ein visuelles Gestaltungsmittel, sondern dienen auch als semantische Gliederung für Crawler, Screenreader und Nutzer. Eine saubere, hierarchisch korrekte Überschriftenstruktur verbessert sowohl die Lesbarkeit für Menschen als auch die Verständlichkeit für Suchmaschinen.
1. Was sind H1 bis H6?
H1–H6 sind HTML-Elemente zur Kennzeichnung von Überschriftenebenen. Dabei steht:
-
H1 für die wichtigste Hauptüberschrift (z. B. der Titel einer Seite)
-
H2 bis H6 für nachgeordnete Unterüberschriften, entsprechend ihrer Hierarchie
Beispiel:
<h1>Rezept für vegane Lasagne</h1>
<h2>Zutaten</h2>
<h3>Für die Béchamelsauce</h3>
<h2>Zubereitung</h2>
<h3>Schritt 1: Gemüse schneiden</h3>
Je höher die Zahl, desto tiefer die Gliederung. Eine H3 darf nur als Unterpunkt einer H2 erscheinen, nie direkt unter einer H1. Am leichtesten merkt man sich dies anhand eines Buches oder Roman. Dieser ist auch immer in Kapitel und Teilüberschriften untergliedert. Genauso wie es in einem solchen Buch ist, muss es analog auch im Web erfolgen. Schließlich wollen wir Leser und die Crawler wissen, wann ein Kapitel zu Ende ist und wann ein neues Thema beginnt.
2. Warum ist die Überschriftenstruktur wichtig?
🔍 SEO-Relevanz
-
Google nutzt Überschriften zur Themenanalyse und Einordnung des Seiteninhalts
-
Klar strukturierte Seiten erleichtern das Crawling und können Featured Snippets oder Sitelinks begünstigen
-
Überschriften mit relevanten Keywords können das Ranking positiv beeinflussen
🧠 Usability und Lesbarkeit
-
Nutzer erfassen Inhalte schneller durch visuelle Gliederung
-
Verweildauer und Scrolltiefe steigen, wenn Inhalte gut gegliedert sind
♿ Barrierefreiheit
-
Screenreader nutzen Überschriften zur Navigation für blinde und sehbehinderte Menschen
-
Richtige Reihenfolge ist entscheidend für verständliche Textausgabe
🔧 Technische Semantik
-
Für HTML5-basierte Seiten ist eine logische Überschriftenhierarchie Best Practice
-
Moderne Web-Frameworks und CMS unterstützen semantische Tags zur besseren Indexierung
3. Best Practices für H1–H6
✅ Nur eine H1 pro Seite
-
Sie definiert das Hauptthema der Seite
-
Sie ist meist identisch mit dem Seitentitel (z. B.
<title>im<head>)
✅ Hierarchisch und lückenlos gliedern
-
Niemals eine H4 direkt unter eine H2 setzen – dazwischen muss eine H3 stehen
-
Keine Überschriftenebene überspringen
✅ H2–H4 zur Gliederung von Content verwenden
-
H2 = Hauptabschnitte
-
H3 = Unterabschnitte
-
H4–H6 = selten nötig, eher bei umfangreichen Texten (z. B. Gesetzestexte, große Anleitungen)
✅ Keine Formatierungstricks!
-
Überschriften sind keine Design-Tools – fett + größer ≠ Überschrift
-
Stilfragen sollten über CSS geregelt werden, nicht über semantische Tags
✅ Keywords sinnvoll einbauen
-
Jede Hx-Überschrift sollte klar zum Abschnitt passen und ein Hauptkeyword enthalten, sofern natürlich möglich
-
Vermeide Keyword-Stuffing („Unsere SEO-Agentur – SEO-Agentur – beste SEO-Agentur“)
4. Fehler, die man vermeiden sollte
| Fehlerbeispiel | Warum problematisch? |
|---|---|
| Mehrere H1 auf einer Seite | Verwirrt Google und Screenreader, erschwert die Themenzuordnung |
| Überschriftenreihenfolge nicht eingehalten (z. B. H2 → H4) | Bricht die semantische Logik |
| H-Überschriften nur für Design verwendet | Missbrauch semantischer Tags kann SEO und UX schaden |
| Inhalte ohne jede Gliederung | Erschwert sowohl Nutzern als auch Suchmaschinen das Verständnis |
5. Technische Tipps für CMS & Entwickler
WordPress
-
Viele Themes generieren automatisch H1 aus dem Titel → keine zusätzliche H1 in den Content einbauen
-
Im Editor auf visuelle Gliederung achten (z. B. „Überschrift 2“ = H2)
TYPO3, Contao, Joomla
-
Struktur oft über Templates gesteuert
-
Redakteur*innen sollten geschult werden, wie sie saubere Hx-Tags nutzen
Entwickler-Hinweis
-
Bei Landingpages, Onepagern oder App-ähnlichen Seiten: mit
<section>undaria-labelskorrekt strukturieren -
Bei modalen Inhalten (z. B. Popups) ggf. zweite H1 vermeiden oder als visuell versteckt kennzeichnen
6. H1–H6 und SEO-Tools
SEO-Tools bieten automatische Prüfungen der Überschriftenstruktur. Typische Hinweise:
-
Screaming Frog SEO Spider: zeigt Hx-Tags jeder Seite
-
Ryte / Sistrix / SEMrush: analysieren H1-Präsenz und Hierarchie
-
Chrome DevTools: manuelle Prüfung über „Untersuchen“-Funktion
Tools helfen dabei, doppelte H1, fehlende H2 oder nicht themengerechte Überschriften aufzudecken.
7. Fazit
Die H1–H6-Überschriftenstruktur ist weit mehr als ein Gestaltungsdetail. Sie ist ein zentraler Baustein in der SEO-Strategie, User Experience und technischen Seitenoptimierung. Wer Inhalte sauber strukturiert, verbessert sowohl das Rankingpotenzial als auch die Lesefreundlichkeit. Eine konsequente Hx-Praxis ist daher Pflicht in jedem Content- und Entwicklungsteam.
H1–H6-Überschriftenstruktur – SEO, Usability & semantische Klarheit
