SEO und Überschriften: Warum ist die korrekte Hierarchie so wichtig und wie können HTML5 Sections helfen?

Wer sich nur ein wenig mit SEO Onpagefaktoren beschäftigt hat – oder Kunde bei uns ist 😉 – ist ganz sicher mit dem Thema Überschriften-Hierarchie in Berührung bekommen.

Von der Suchmaschinenoptimierung abgesehen ist das Thema schnell erklärt: Seit Anbeginn des WWW sieht der HTML Standard hierarchische Überschriften von Stufe 1 bis 6 vor. Im Quelltext wird das so geschrieben:

<h1>ich bin eine Überschrift erster Ordnung</h1>
<h2>ich bin eine Überschrift zweiter Ordnung</h2>
<h3>ich bin eine Überschrift dritter Ordnung</h3>
<h2>ich bin wieder eine Überschrift zweiter Ordnung</h2>

Das dient dazu, den Inhalt eines Dokumentes zu strukturieren. Oben als Überschrift des gesamten Dokumentes wird eine H1 verwendet, dann wird der Inhalt in sinnvolle Abschnitte und Unterabschnitte (und Unter-Unterabschnitte) mit H2 bis H6 Überschriften strukturiert. Als Gliederung kann man sich das so visualisieren:

• Titel des Dokuments: H1
  • Abschnitt 1: H2
    • Abschnitt 1.1: H3
    • Abschnitt 1.2: H3
  • Abschnitt 2: H2
  • Abschnitt 3: H2
    • Abschnitt 3.1: H3
      • Abschnitt 3.1.1: H4
  • Abschnitt 4: H2

Visuell sollte man die Überschriften entsprechend gestalten, so dass auch für den menschlichen Leser die Struktur erkennbar wird. Ganz klassische Typografie.

Soweit, so simpel. Leider wird das sowohl von Hobbywebmastern also auch von großen, erfahrenen Internetagenturen selbst heute noch gravierend falsch gemacht. In unserer täglichen Arbeit sehen wir häufig, dass Überschriften beliebig auf einer Seite durcheinander gewürfelt werden. Und nicht selten werden für die Links im Navigationsmenü Überschriften verwendet. Die Ursache dieser Fehler ist das fehlende Wissen über die Hierarchie. Es wird dann aus optischen Gründen anstatt einer eigenen CSS Klasse einfach eine bestimmte Überschrift (z.B. H5) verwendet.

Das ist zwar nicht im Sinne des Erfinders und in gewisser Weise “unordentlich”, aber solange die Seite für das menschliche Auge gut aussieht ist es ja egal.

Aber nur solange, bis die Seite für Suchmaschinen optimiert werden muss.

Warum legen SEO Berater soviel Augenmerk auf die korrekte Überschriftenhierarchie?

Antwort: Um den Suchmaschinen zu verdeutlichen, was der relevante Inhalt und was nebensächlicher Inhalt einer Seite ist. Und vor allem, worum es auf dieser einen Seite geht. Suchmaschinen werten H1 bis H6 mit abnehmender Bedeutung. Deswegen empfehlen wir, strukturell nicht “tiefer” als H4 zu werden. Der Algorithmus von Google wertet die Überschriftenhierarchie ganz im Sinne des HTML Standards aus. Deswegen bestehen SEOs auch auf nur eine H1 pro Dokument. Denn die H1 Überschrift macht klar, was das Thema der Seite ist. Der Titel des Dokuments, sozusagen. Bei mehreren H1 Überschriften muss der Algorithmus “raten”.

Eine alternative Antwort auf die Frage wäre: Weil Matt Cutts von Google es gesagt hat 🙂

H1 als HTML Tag ist wichtiger als die typografische Optik

Auch wenn eine H1 für das menschliche Auge aufgrund ihrer Gestaltung unwichtiger erscheinen mag, so ist sie für die Algorithmen der Suchmaschinen nach wie vor die Hauptüberschrift. Ich habe hier mal zwei Screenshots eingefügt, die das verdeutlichen:

 

Googles Technologien sind zwar problemlos in der Lage, solche visuellen Hierarchien zu erkennen, aber ob und im welchem Umfang das genutzt wird ist unbekannt. Der Ressourcenaufwand dafür wäre natürlich viel größer als für das reine parsen des HTML Codes.

Keine Überschriften außerhalb des eigentlichen Inhaltes einsetzen

Um es für den Crawler von Suchmaschinen noch einfacher zu machen, sollte man tunlichst vermeiden, abseits des eigentlichen Seiteninhaltes Überschriften einzusetzen. Das bedeutet:

• Keine Überschriften in der Navigation
• Keine Überschriften in Boxen neben dem Inhalt (z.B. “Newsletter abonnieren”)
• Keine Überschriften in Footer-Elementen

Vor allem wenn der eigentliche Text sehr kurz ist – zum Beispiel eine Produktdetailseite in einem Shop – haben wir schon gesehen, dass Google die entsprechende Seite für Begriffe rankt, die eigentlich nichts mit der Seite zu tun haben.

Seit HTML 5 gibt es Sections

Im aktuellen, noch gar nicht so alten HTML 5 Standard sind die sections eingeführt worden: https://www.w3.org/TR/html5/sections.html

Section Elemente dienen dazu, eine Seite – wie der Name sagt – in Sektionen zu unterteilen. Folgende Section Elemente gibt es:

• article
• section
• nav
• aside
• header
• footer
• address
• body (schon immer in HTML enthalten gewesen)
• blockquote (schon lange in HTML enthalten, seit HTML 5 semantisch bedeutsam)

Auch vor HTML 5 haben Webentwickler die Dokumente mittels <div> Blöcken in solche Sektionen eingeteilt. Dies diente aber nur Designgründen und der Codeübersichtlichkeit. Semantisch war das völlig unbedeutend. Die oben genannten HTML Sections haben aber semantisch eine Bedeutung, was zu zwei Eigenschaften führt:

1. Suchmaschinen wissen, dass die Sektionen nav, aside, header, footer nicht zum Kerninhalt des Dokuments gehören.
2. Jede Sektion “resettet” die Überschriftenhierarchie und “darf” mit einer H1 beginnen.

Gerade der zweite Punkt ist interessant.

Dazu eine Grafik, wie nach dem HTML 5 Standard eine HTML Datei aufgebaut sein kann:

Die grau unterlegten Bereiche enthalten keine sichtbaren Inhalte und gehören schon immer zu einer HTML Datei. Ebenso wie der Body Tag, der sämtlichen sichtbaren Inhalt umschließt. Bei dieser Seite wäre es nach HTML 5 Standard legitim, 9 (neun!) H1 Überschriften zu verwenden. Für jede Section eine.

Nach wie vor würden wir aus SEO Gesichtspunkten davon abraten, aber die Sections header, nav, aside und footer können hilfreich sein, wenn es aus technischen Gründen schwieriger ist, in diesen Bereichen auf Überschriften-Tags zu verzichten. Beim Beispiel dieser Seite würde ein SEO die einzige H1 Überschrift des Dokumentes wahrscheinlich in der <section> einfügen, die <article> umschließt, und außerhalb dieser section wenn möglich auf Überschriften zu verzichten.

Fazit

Idealerweise sollte man nur im Zusammenhang mit dem tatsächlichem Inhalt der Seite Überschriften einsetzen, und die H1 muss das Thema der Seite (oder das Keyword) enthalten. Sollte dies technisch nicht möglich sein, kann man sich eventuell mit den neuen HTML 5 Sections behelfen.

Aber wie bei vielen Onpage Faktoren gilt: Man muss nicht katholischer sein als der Papst. Wenn man grandiosen, einmaligen und den zur Suchanfrage besten Inhalt im ganzen Internet hat, dann darf man sich auch Schnitzer in der Dokumentstruktur erlauben. Aber wer ist heutzutage schon ohne Wettbewerber im Internet vertreten? Je größer der Wettbewerb ist, desto wichtiger ist es, alle OnPage Faktoren zu perfektionieren.

Bonus: Barrierefreiheit und Lesemodus

Unabhängig von der Suchmaschinenoptimierung gibt es noch weitere Aspekte, für die der korrekte Einsatz von Überschriften und HTML5 Sections hilfreich ist. Zum einen gibt es in Browsern wie iOS Safari, Microsoft Edge und Kindle eBook Readern eine spezielle Leseansicht, die Webseiten als Nur-Text darstellt. Damit die Browser wissen, welche Inhalte zum Text gehören, und welche im Lesemodus ausgeblendet werden, ist eine semantische Strukturierung der Seite sehr hilfreich.

Der zweite Aspekt, der dem Lesemodus ähnlich ist, ist der Thema Barrierefreiheit. In unserer täglichen Arbeit ist Barrierefreiheit selten ein Thema, aber für Behörden und öffentliche Einrichtung spielt dies eine wichtige Rolle. Browsersoftware für Menschen mit Behinderung funktioniert mit sehr ähnlichen Prinzipien wie der bereits erwähnte Lesemodus. Deswegen ist es auch diesbezüglich empfehlenswert, Webseiteninhalte sauber zu strukturieren.

Update 25.1.2017:

In der zukünftig gültigen HTML 5.1 Fassung wird die Norm, dass HTML-Sections die Überschriftenreihenfolge zurücksetzen, wieder entfernt. Wie Google und andere Suchmaschinen dann mit der Thematik umgehen ist ungewiss. Deshalb wie gehabt: Optimalerweise (aus SEO-Gesichtspunkten) Überschriften ausschließlich im Inhalt verwenden und nur eine H1.

Aber: Wie ich mittlerweile erfahren habe, sind Überschriften an Stellen, wo Sie aus SEO-Gründen nicht hingehören, für die Barrierefreiheit wichtig und unverzichtbar. Auch muss die einzige H1 ganz oben auf der Seite sein, noch vor der Navigation – ein einer Position, wo sie eigentlich falsch – auf jeden Fall aber abseits der Screenreader unsinnig – ist. Das liegt an der Art und Weise, wie Screenreader (Software und Hardware) funktionieren und bedient werden.

In dem Fall muss man dann mit Sections arbeiten und die Hierarchie um eine Ebene nach unten schieben und hoffen, dass die Suchmaschine trotzdem den Inhalt vollständig und gleichwertig erfasst. Falls Sie gesetzlich verpflichtet sind, Ihre Website barrierefrei zu gestalten, wird Ihnen hier geholfen: https://anatom5.de/

Update 5.5.2018

So ganz ernst nimmt Google die Überschriften-Hierarchie laut eigener Aussage nicht mehr. Allerdings empfiehlt John Müller trotzdem, Überschriften semantisch korrekt zu verwenden.

I wouldn't worry that much about the placement of headings — try to use them in a semantically correct way, they help users outside of SEO too, but if that's not possible, that's usually a non-issue for SEO.

— 🍌 John 🍌 (@JohnMu) May 3, 2018

 

Weitere interessante Beiträge:

>> Relaunch Checkliste für Ihren Website Relaunch

>> Der neue Google AdWords Keyword-Planer im SEO-Test

✔ Mehr Traffic ✔ mehr Kunden ✔ Mehr Umsatz 👉 kostenlose SEO Ersteinschätzung