Wenn wir bei Wingmen HTML-Templates von Webseiten analysieren, schauen wir auch auf die H-Tags, also die Überschriftenstruktur. Wie wichtig oder unwichtig ist das überhaupt? Meist liegen die großen Hebel in anderen Maßnahmen und die Behebung der fehlerhaften Anordnung von Überschriften findet sich eher in der Nice-to-have-/ Nicht-so-wichtig-Ecke wieder.
Doch gerade bei Relaunch-Projekten, wo sich die Gelegenheit bietet, die Templates sauber und zukunftssicher umzusetzen, lohnt sich die Mühe. So kann nicht nur Googlebot leichter verstehen, worum es in Deinen Inhalten geht. Eine logische H-Struktur bietet klare Vorteile für die Nutzbarkeit (UX) und den barrierefreien Zugang (Accessibility) für Deine Leserinnen und Leser. Und alle drei Punkte werden immer wichtiger.
Im Artikel "Level Up Your Headings Game" führt Dir Matthias Ott die Vorteile einer sauberen H-Struktur knackig aus. Dazu liefert er Dir direkt eine Liste mit Tool-Tipps, um H-Tags nebst weiterer Accessibility-Features schnell zu erkennen.
Persönlich nutze ich ja gerne die "headingsMap".
![H1 Struktur mit der headingsMap am Beispiel vom Wingmen-Artikel "Die XML-Sitemap - alles was Du wissen musst" (https://wngmn.de/wissen/die-xml-sitemap-alles-was-du-wissen-musst) mit der Browser-Extionsion headingsMap] (https://lh4.googleusercontent.com/taP_pa9d2BKwnrqIuExOGNYcT0u1sK3erEsiueiceRX68JBMN2jzEIw6yVvchtUDfsAfzm3IplBPtUoCC8sI0Do1CuRi0pkgeDFFFXYPDEGUfMLCFZx268L_tepikP9yxiaSLTkfSH-82R02M6-fUClplU-7eyyclGYFoBDSdcOO_XmqtGuQR3oOTw)
Wie sieht eine gute H-Struktur aus?
-
H-Tags ausschließlich im Main Content. Nicht in der Sidebar, nicht im Footer – und auch nicht in Teaser-Karten.
-
H-Tags nur für Überschriften und nicht zweckentfremdet als Styling-Elemente, um Text hervorzuheben. Es folgen also Absätze, die inhaltlich zur Überschrift gehören. Keine Slogans, Untertitel, Callouts oder Zitate etc.
-
Keine Lücken oder Sprünge. Eine H2 folgt nicht auf eine H3.
-
Es gibt eine, und ausschließlich eine, H1 pro Seite.
-
Keine Verlinkung von H-Tags. Die Überschriften sollen Ihre Signale auf der Seite entfalten, auf der sie stehen, und nicht weglinken (analog Teaser-Karten oben).
Was ist für uns pure Kosmetik
- H-Tags verändern, wenn sich an der Hierarchie nichts ändert.
"Wenn die wichtigste Überschrift eine H2 ist, dann gibt es keine Vorteile, daraus eine H1 zu machen. Denn dadurch wird die wichtigste Überschrift nicht wichtiger."\ Johan von Hülsen
Startet die Seite also mit einer H2, hat dann aber nur diese eine H2 und setzt die Überschriften-Hierarchie dann logisch fort, bietet es keinen Mehrwert, alle Überschriften "eins hoch" zu korrigieren – auch wenn sämtliche Content-Check-Tools aufheulen werden.
Was hat sich verändert?
Webstandards entwickeln sich weiter. Organisationen wie W3C und WHATWG dokumentieren die Spezifikationen für uns alle.
Der Outline Algorithm ist tot. (Und ist es seit Langem.)
So hatten wir jahrelang Überschriften in anderen Seitenelementen als dem Main Content durchgewunken (Sidebar, Footer etc.) und somit auch kein Problem in mehreren H1en auf einer Seite gesehen, weil der "Outline Algorithm" dafür sorgen sollte, dass die verschiedenen Überschriften vom Browser auf der Seite in eine logische Struktur gebracht werden.
"With the Document Outline Algorithm, you could (theoretically) use an < h1 > for all headings, and the browser would figure out the level of each heading based on its nesting within < article >, < section >, and related elements. The outline algorithm would ensure that the top heading in the page would be a level 1, and that all other headings would be nested in a consistent order, with no levels skipped."\ Amelia Bellamy-Royds in "The Document Outline Dilemma" (⚠️ Achtung: veraltet)
Das ist jetzt offiziell hinfällig.
"Recently, the HTML spec changed to replace current outline algorithm with one based on heading levels. So the idea that you could use < h1 > for a generic heading across your documents, and the browser would "know" which level it actually should be by its nesting inside < section> and other related "sectioning elements", is no more. [...]
Here comes the shocker: it has never worked."
Bruce Lawson in "Why the HTML Outlining Algorithm was removed from the spec -- the truth will shock you!"
Was sind Deine Alternativen?
Besonders häufig tritt das Durcheinander von Überschriften bei Titeln und Untertiteln von Texten auf. Dafür gibt es eine Lösung: die im Standard definiertee HGROUP. Statt den Titel in die H1 und den Untertitel in die H2 zu schreiben, wird der Untertitel zum einfachen P-Absatz innerhalb der Überschriftengruppe wie hier im Beispiel von Steve Faulkner.
Vorher:
< h1>All At Sea Over Ventriloquism< h1>\
< h2>Captain Dick's Logbook< /h2>\
< h3>By Richard P. Wightman alias Captain Dick< /h3>
Nachher:
< hgroup>
< h1>All At Sea Over Ventriloquism< h1>
< p>Captain Dick's Logbook< /p>
< p>By Richard P. Wightman alias Captain Dick< /p>
< /hgroup>
Eine deutsche Fassung der Debatte samt HGROUP-Lösung kannst Du auf SELFHTML nachlesen.
Fazit
Überschriften sind in der Regel nicht der größte Hebel, um besser zu ranken. Aber sie sind ein wesentlicher Faktor für eine saubere HTML-Struktur, von der wir alle profitieren. Den Effekt beobachte ich regelmäßig, wenn ich Leuten ausschließlich die Überschriften Ihrer Seiten vorlese, mit der Bitte, mir zu sagen, worum es denn da wohl geht. Da stellt sich schnell nervös-heiteres Gelächter ein...
Wie wichtig oder unwichtig sind Dir die Überschriften auf Deinen Seiten?