Die komplette SEO-Anatomie der HTML H1- bis H6-Heading-Tags
HTML-Heading-Tags – besser bekannt als <h1>-, <h2>-, <h3>-, <h4>-, <h5>- und <h6>-Tags – machen es Menschen und Suchmaschinen leichter, schnell zu verstehen, worum es auf einer Website geht. Zusätzlich können sie auch indirekt beeinflussen, wie hoch deine Seiten in den SERPs ranken.
Und weil sie so wichtig für die Suchmaschinenoptimierung und das Nutzererlebnis sind, ist es entscheidend zu wissen, was sie sind, warum sie relevant sind und wie man sie möglichst zielführend einsetzt.
Falls dieses Thema also für dich nach böhmischen Dörfern klingt, findest du in diesem Beitrag Antworten auf die häufigsten Fragen zum Thema HTML-Heading-Tags.
Heading-Tags oder Header-Tags?
Fangen wir mit der Terminologie an, um Verwirrung darüber zu vermeiden, wie die h-Tags genannt werden sollten.
- Heading-Tag ist der gebräuchlichste und am besten geeignete Begriff für h-Tags, den auch Google in seinen Richtlinien verwendet.
- Header-Tag wird manchmal synonym zu Heading-Tag verwendet, und auch Bing verwendet es in seinen Richtlinien. Dieser Begriff kann jedoch zu Verwirrung führen, da seine Singularform eine andere Bedeutung hat: das <header> Tag.
Mit dem Header-Tag ist der <header> gemeint, der den oberen Teil einer HTML-Seite markiert und für die Nutzer nicht sichtbar ist. Er wird benötigt, um das Layout einer Seite aufzubauen.
Was sind Heading-Tags?
Heading-Tags legen die Hauptüberschrift einer Seite (<h1>) sowie die Unterüberschriften (<h2> bis <h6>) der verschiedenen Inhaltsbereiche fest.
Aus Sicht von Menschen sowie Suchmaschinen dienen diese Tags als zusammenfassender Text, der Lesern und Crawlern die Essenz des Inhalts vermittelt, indem er die Hauptaussage prägnant wiedergibt.
Das World Wide Web Consortium definiert sechs Stufen von Abschnittsüberschriften in HTML, wobei <h1> die wichtigste und <h6> die unwichtigste ist:
Bei SE Ranking veröffentlichen wir unsere Inhalte mit WordPress. Aber egal, ob du Inhalte in Google Docs, WordPress oder einem anderen Dienst erstellst, die Überschriftenoptionen sind immer verfügbar:
Wenn wir uns nun einen von unseren früher veröffentlichten Beiträgen genauer ansehen, wirst du sehen, dass wir die ersten beiden Überschriften hier markiert haben:
Natürlich könnte man meinen, dass ich einfach die Schrift vergrößert, den Text hervorgehoben oder dessen Farbe geändert habe. Das mag zwar der Fall sein, aber etwas komplizierter ist es doch.
Wenn wir uns den Quellcode der Seite ansehen, sehen wir nämlich, dass diese H-Tags jeweils mit den Tags <h1> und <h2> markiert sind:
Hier kannst du auch die Grundregel hinter der Arbeit mit HTML-Tags sehen: Heading-Tags gibt es paarweise, daher ist ein abschließender Tag mit einem zusätzlichen Schrägstrich vor “h” erforderlich.
<h2>Das ist eine Überschrift</h2>.
So sieht es aus! Jetzt, wo wir wissen, was HTML-Heading-Tags sind, wollen wir uns auf das ‘Warum’ konzentrieren.
Was ist ein H1-Tag?
Es ist die Hauptüberschrift, die den Kern des Inhalts in einem Satz zusammenfasst. Suchmaschinen durchkämmen Seiten und verwenden h1 als starken Indikator für das Thema einer Seite. Gleichzeitig ist das Tag auch ein Teil des zentralen Textinhalts.
H1 ist ein allgemeines Element eines Website-Layouts. Die Nutzer deiner Website erwarten, es oben auf den Seiten von ihnen besuchten Seiten zu sehen. Es hilft Nutzern schnell zu entscheiden, ob eine Seite relevant ist. Je nachdem, was sie sehen, lesen sie entweder weiter und konvertieren möglicherweise, oder sie verlassen die Seite. Deine Aufgabe ist es also, Überschriften mit hoher Konversionsrate zu erstellen, indem du die Best Practices des Werbetextens befolgst und verstehst, wie Überschriften funktionieren.
An dieser Stelle möchte ich dich in das Konzept der Nutzerabsicht einführen.
Die Nutzerabsicht oder Suchabsicht ist ein wichtiges Konzept in der SEO. Du solltest jede Seite mit ihrer H1 auf der Grundlage solcher Absichten aufbauen. Kurz gesagt, die Nutzerabsicht ist der Grund, warum Suchende auf deine Seite kommen und welche Informationen sie dort suchen. Für dein H1 bedeutet das zweierlei: Das HTML-Tag muss der Nutzerabsicht entsprechen und für den Hauptinhalt deiner Seite relevant sein.
Die Nutzerabsicht kann im Allgemeinen in kommerzielle und informative Absichten unterteilt werden. Eine Seite über die Dienstleistungen deines Unternehmens hat zum Beispiel eine kommerzielle Absicht, und ein H1-Tag wie “Online-Marketing-Dienstleistungen” passt dazu.
Formulierungen wie “Was ist” und “Wie” in deiner H1 weisen dagegen auf einen informativen Inhalt hin. Im ersten Fall sollte der Inhalt eine Definition und zusätzliche Informationen über das Konzept liefern. Im zweiten Fall erwarten die Nutzer eine Anleitung mit einer Reihe von Schritten oder Tipps, wie sie ein bestimmtes Problem lösen können.
H1 vs. Title-Tag
Der H1-Tag ist ein HTML-Element für die Überschrift der ersten Ebene innerhalb eines Website-Textes. Es ist sowohl für Website-Nutzer als auch für Suchbots sichtbar und wird nicht nur benötigt, um Informationen über den Inhalt der Seite zu liefern, sondern auch, um ihr Struktur zu geben und das Layout zu verbessern.
Der Title-Tag ist ebenfalls ein HTML-Element, das auf der Seite selbst nicht sichtbar ist (aber sichtbar ist, wenn du den HTML-Code überprüfst oder den Mauszeiger über den Seitenreiter bewegst). Es wird in den SERPs angezeigt, um Nutzern zu helfen, das richtige Ergebnis für ihre Suchanfrage zu finden. Dieser Teil des HTML-Codes wird hauptsächlich für Suchmaschinen benötigt.
Zusammenfassend lässt sich sagen, dass der Title-Tag Nutzer dazu verleiten soll, von den SERPs auf die Seite zu klicken, während der <h1>-Tag als Hauptüberschrift für die Seite dient, wenn Leser auf ihr landen. Beide Tags werden also benötigt, damit Nutzer und Suchbots verstehen, worum es auf einer Webseite geht und wie relevant sie für eine Suchanfrage ist.
Die Faustregel für die Erstellung dieser Tags lautet: Verwende Fokus-Keywords in verschiedenen Variationen, die das Hauptthema deines Artikels oder den Inhalt der Seite richtig beschreiben.
Sehen wir uns ein Beispiel an:
H1: Googles “Featured Snippets”: Das größte Stück vom SERP-Kuchen?
Titel: Featured Snippets: Varianten, Vorteile und Möglichkeiten, sie zu optimieren
Um diese Aufgabe zu erleichtern, kannst du unser Keyword-Recherche-Tool verwenden. Gehe zum Modul Keyword-Recherche, gib ein Kern-Keyword ein (die allgemeinste und kürzeste Phrase, die deine Seite korrekt beschreibt) und wähle das Land, das dich interessiert.
Schlage hier unter den Reitern “Ähnlich” und “Verwandt” nach, um die beiden relevantesten Suchbegriffe mit dem höchsten Suchvolumen zu finden (wähle unter den Suchbegriffen mit hohem Suchvolumen diejenigen mit niedrigeren Schwierigkeitsgraden). Wähle aber keine Ein-Wort-Suchbegriffe, da diese meist eine vage Suchabsicht haben.
Die beiden Keywords im Screenshot unten scheinen eine gute Wahl für unseren Blogartikel über Hervorgehobene Snippets zu sein.
In diesem Modul kannst du dir auch die Top-10 der organischen Ergebnisse für diese Suchanfragen ansehen, um eine Vorstellung über deren h1-HTML-Tags zu erhalten.
Tipp: Wirf zuerst einen Blick auf die Titel.
Warum du Überschriften verwenden solltest
Heading-Tags bieten zwei große Vorteile für Websites: Übersichtlichkeit und Hierarchie. Sie erfüllen zwei Hauptaufgaben: Sie sorgen für ein positives Nutzererlebnis beim Besuch einer Website und helfen den Suchbots, deine Inhalte besser zu verstehen.
Die Gründe, warum du Überschriften verwenden solltest, lassen sich in zwei Hauptkategorien unterteilen. Schauen wir uns jede davon genauer an.
Heading-Tags verbessern das Nutzererlebnis
Heading-Tags verbessern die Lesbarkeit deines Inhalts und machen ihn für die Nutzer leichter verdaulich. 43 % der Menschen geben an, dass sie Inhalte überfliegen, um zu sehen, ob diese die gesuchten Informationen enthalten. Entsprechend wichtig ist es, ihnen Wegweiser an die Hand zu geben. Passende Überschriften ermöglichen es den Menschen, einen schnellen Blick auf den Inhalt zu werfen, um herauszufinden, ob er dem Gesuchten entspricht.
Alternativ können Überschriften den Lesern helfen, den Überblick zu behalten, falls sie unterbrochen werden. Das kann dazu führen, dass die Leute länger auf deiner Seite bleiben.
An dieser Stelle können ordentliche, ehrliche und gut formulierte Heading-Tags den Lesern die Struktur des Inhalts klar vermitteln und sie hoffentlich zum Weiterlesen oder sogar zum Handeln animieren.
Frag dich also Folgendes: Würde irgendjemand deine Inhalte lesen, wenn du einen Beitrag veröffentlichst, der wie eine massive Textwand aussieht?
Natürlich nicht. Sie würden von deiner Seite abprallen wie ein Gummiball.
Schließlich ist auch die Struktur der HTML-Überschriften entscheidend dafür, dass sehbehinderte Menschen digitale Inhalte lesen können. Da die H-Tags in HTML ausgeschrieben sind, können Bildschirmlesegeräte die Struktur jeder Webseite interpretieren und sie behinderten Nutzern vorlesen. Außerdem bieten Bildschirmlesegeräte Shortcuts, mit denen Nutzer leicht zwischen den Überschriften wechseln können und damit eine erleichterte Navigation.
Heading-Tags helfen Suchmaschinen, deine Seite zu verstehen
Gut formulierte Überschriften erleichtern es Suchmaschinen, das Hauptthema und die Struktur einer Seite zu verstehen. Bing hat dies bestätigt. Google ist zwar nicht so transparent, erklärt aber offiziell, dass Überschriften wichtig sind, damit die Nutzer auf der Seite navigieren können. Während einer Google-Webmaster-Hangout-Sitzung bestätigte John Mueller, dass Google H-Tags verwendet, um die Struktur des Textes auf einer Seite besser zu verstehen und dass dies einer der Ranking-Faktoren ist, die Google verwendet.
H-Tags helfen Crawlern zu verstehen, in welche Kategorie die Seite passt und welche Suchanfragen sie möglicherweise beantworten kann. Auf diese Weise hilft es Google, die Relevanz und die semantische Struktur einer Webseite zu bestimmen. Alles in allem sind Überschriften Teil des Seiteninhalts und wie wir wissen, ist der Inhalt der Grundstein für SEO.
Das heißt, eine klare und korrekte Seitenstruktur kann Google dabei helfen, zu erkennen, wann eine Seite als Antwort auf eine Suchanfrage angezeigt werden sollte. Zudem kommt die Seite damit für Hervorgehobene Snippets in Frage.
Hervorgehobene Snippets oder Zero-Position-Ergebnisse sind schnelle Antworten, die Google auf Suchanfragen von Nutzern anzeigt. Da du bereits auf Seite eins ranken musst, um ein Kandidat für ein Google Snippet zu werden, können HTML-Überschriften hier sehr hilfreich sein. Die Anzeige der Hervorgehobenen Snippets hängt von Googles Fähigkeit ab, festzustellen, welche Seite eine Frage am besten beantwortet und worum es in einem bestimmten Textteil genau geht. Die Strukturierung deiner Inhalte hilft Google bei dieser Aufgabe.
Ein Beispiel: “beste videobearbeitungsprogramm” ist eine Frage, die man am besten in einem Blogbeitrag im Listenstil beantwortet. Solche Seiten sind normalerweise mit einem <h1>-Tag strukturiert, gefolgt von einer Liste von Artikeln, die von einem <h2>-Tag umschlossen werden. Du kannst auch ein <h2>-Tag auf das <h1>-Tag folgen lassen und erst dann eine Liste von Artikeln mit dem <h3>-Tag einfügen.
Und du kannst auf der Seite selbst sehen, dass die Überschrift “Die besten kostenlosen Videobearbeitungsprogramme für den Desktop” tatsächlich ins <h2> ist und die Liste der Programme ist in <h3> eingebettet.
Heading-Tags wirken sich also nicht nur auf die Suchmaschinenoptimierung aus, sondern die Verwendung von HTML-H-Tags trägt auch dazu bei, qualitativ hochwertige Inhalte mit guter Lesbarkeit zu erstellen. Und bedenke: Je besser der Text aus Sicht des Nutzers ist, desto besser ist er für die Suchmaschinenoptimierung.
Und ist das nicht das eigentliche Ziel?
Best Practices für die Verwendung von Heading-Tags
Nachdem wir das “Was” und “Warum” der Heading-Tags kennen, sehen wir uns jetzt das “Wie” an.
Bisher haben wir festgestellt, dass Suchmaschinen den Menschen das Suchen und Finden der richtigen Online-Inhalte erleichtern. Das bedeutet, dass du es dir nicht leisten kannst, deine HTML-H-Tags nicht zu optimieren, wenn du eine Chance auf hohe SEO-Rankings haben willst.
Hier sind einige der SEO-Best-Practices zur Erstellung effektiver HTML-Headings in deinen Inhalten.
Konzentriere dich auf den <h1>-Tag
Zunächst möchte ich betonen, dass du zwar auch ohne H-Tags organisch ranken kannst, das jedoch eine riesige vertane Chance wäre, die ein unvollständiges SEO-Profil zur Folge hätte.
Da der <h1>-Tag dazu dient, den Inhalt einer Seite klar zu beschreiben, sollte er:
- sich auf die gleiche Nutzerabsicht wie der Hauptinhalt konzentrieren
- prägnant, natürlich und organisch geschrieben sein
- Am Seitenanfang platziert sein
- sich vom Meta-Title-Tag unterscheiden und auf der gesamten Website einzigartig sein
- Ein Fokus-Keyword enthalten
- keine Inline-Stile verwenden
- nur einmal pro Seite verwendet werden
Was die Länge des HTML-H1-Tags angeht, gibt Google keine Empfehlungen, sondern sagt nur, dass man “sehr lange Überschriften vermeiden” sollte. Hier würde ich vorschlagen, die Länge unter 60–70 Zeichen zu halten, da dies die Grenze für Meta-Title-Tags ist, die einen ähnlichen Zweck wie das H1-HTML-Tag haben. Die Tatsache, dass Google ein Experiment durchgeführt hat, bei dem Title-Tags durch H1-Tags ersetzt wurden, untermauert diesen Vorschlag.
Jetzt fragst du dich vielleicht: Kann ich zwei oder mehr H1-Tags haben?
Obwohl die Verwendung von mehr als einem <h1>-Tag offiziell kein Problem darstellt, gibt es zwei Möglichkeiten, wie Google mit diesem Szenario umgehen kann. Der Suchgigant wird entweder:
- den ersten <h1>-Tag stärker gewichten (Bing hat bestätigt, dass es das tut);
oder:
- jeden <h1>-Tag auf einer Seite gleich gewichten, was den Wert der Tags insgesamt mindert.
Da HTML5 zwar mehr als einen <h1>-Heading-Tag zulässt, Internetbrowser diese Empfehlung aber nicht übernommen haben und der Support daher eingestellt wurde, empfehle ich, für SEO-Zwecke nur einen einzigen <h1>-Tag zu verwenden.
Zudem kommt es häufig vor, dass Content Creators einfach den Title-Tag an der Stelle wiederholen, an der eigentlich der <h1>-Tag stehen sollte – damit vertun sie eine große Chance. Achte also darauf, dass du beide Tags verwendest und dass sie sich voneinander unterscheiden.
Die richtige Verwendung der <h2>- bis <h6>-Tags
Die Verwendung der <h2>- bis <h6>-Heading-Tags hängt allein von der Komplexität des Inhalts ab.
Deine h2-h6-Überschriften müssen als Gliederung für eine Website dienen. Ähnlich wie bei einer Gliederung für ein Referat solltest du deine Hauptpunkte in die h2-Tags und die Unterpunkte des Inhalts in die h3-Tags und so weiter einfügen. Wenn eine Seite ein Inhaltsverzeichnis hat, sollte dieses aus den Überschriften der Seite bestehen (beginnend mit H2).
Es ist üblich, <h2>- und <h3>-Tags zu verwenden, während <h4> selten benutzt wird, ganz zu schweigen von <h5>- und <h6>-Tags.
Wie dem auch sei – hier sind die Best Practices für die richtige Verwendung von <h2>- bis <h6>-Heading-Tags:
- Verwende so viele <h2>-Tags, wie du brauchst, um die verschiedenen Inhaltsbereiche einer Seite zu kennzeichnen. Es ist üblich, alle 200–500 Wörter einen <h2>-Tag zu verwenden, damit der Text “atmen” kann.
- Achte darauf, dass sie zum Thema passen und natürlich klingen.
- Verrate in den Heading-Tags nicht alles, sondern verwende sie, um das Interesse der Leser zu wecken. Sie sollen neugierig genug sein, den nächsten Inhaltsabschnitt zu lesen.
- Behalte die Heading-Hierarchie bei und überspringe keine Ebenen.
- Optimiere alle HTML-Headings für die Hervorgehobenen Snippets, fast so, als wären sie eine Sammlung von FAQs
Ich möchte betonen, dass sich die <h2>- bis <h6>-Tags hervorragend zur Strukturierung langer Inhalte wie Fallstudien oder “How-Tos” eignen. Um das Thema einer Website sowohl für Menschen als auch für Suchmaschinen besonders deutlich zu machen, solltest du Suchbegriffe in deinen Überschriften verwenden, um deine Chancen zu erhöhen, in der Suche aufzutauchen. Keywords darin einzubauen, ist jedoch kein absolutes Muss – das ist der Grund:
Seit Google den Hummingbird-Suchalgorithmus eingeführt hat, sind Crawler in der Lage, die gesamte semantische Bedeutung eines Textes sowie die Nutzerabsicht zu erfassen.
Daher wird der Wert einer Seite für Internetsurfer jetzt nicht mehr nur an den verwendeten Keywords gemessen (Keyword-Stuffing war noch nie eine gute Idee). Google berücksichtigt auch Synonyme, kontextabhängige Definitionen und die Verwendung von Sprache, um die Inhalte zu verstehen.
Insgesamt lässt sich sagen, dass die Platzierung einer Seite in den SERPs nun stark von einer Kombination aus Relevanz, Qualität, Struktur und Nutzererlebnis abhängt. HTML-Headings helfen dabei beiden Gruppen – sowohl Nutzern als auch Suchmaschinen.
Verifiziere deine Überschriften
Nehmen wir an, du hast alle H-Tags auf deiner Seite untersucht und optimiert (das manuell zu tun, nimmt in der Regel viel Zeit in Anspruch). Wie kannst du nun überprüfen, ob die ganze Arbeit nicht umsonst war?
Ein HTML-Element inspizieren
In den Browsern Google Chrome und Safari klickst du mit der rechten Maustaste auf ein Element und wählst “Inspizieren” bzw. “Element überprüfen”.
Google Chrome
Safari
Daraufhin öffnet sich ein Fenster, das dir sowohl HTML- als auch CSS-Informationen für das ausgewählte Element anzeigt. Sieh einfach nach, ob es irgendwo einen <h*>-Tag drumherum hat.
Google Chrome
Safari
Analyse des Quellcodes
Wenn du die Browser Google Chrome und Safari verwendest, klicke mit der rechten Maustaste auf eine HTML-Seite und wähle “Seitenquelltext anzeigen”.
Google Chrome
Safari
In dem sich öffnenden Fenster bzw. Panel gibst du mit STRG+F bzw. ⌘ Cmd+F den gesuchten H-Tag ein. Ist er nicht da, weißt du, was zu tun ist – zurück auf Anfang.
Überprüfung von Überschriften in WordPress
Da die meisten Websites heutzutage WordPress verwenden, ist es wahrscheinlich, dass auch du es für deine Veröffentlichungen nutzt.
Um sicherzugehen, dass deine H-Tags wie vorgesehen platziert sind, brauchst du nur auf das Menü mit den drei Punkten in der oberen rechten Ecke zu klicken und vom visuellen Editor zum Code-Editor zu wechseln, um den HTML-Code der Seite anzuzeigen (siehe unten):
Einen gründlichen SEO-Audit durchführen
Die Headings deiner Website rückwirkend zu prüfen scheint eine unmögliche, nicht enden wollende Aufgabe zu sein – vor allem, wenn deine Website schon eine Weile besteht und dutzende oder sogar hunderte von Seiten enthält. Zum Glück gibt es eine Reihe von Tools, die diese Aufgabe automatisch erledigen können.
Wir von SE Ranking haben zwei spezialisierte Tools entwickelt, die deine gesamte Website oder eine bestimmte Website scannen und analysieren: Website-Audit und OnPage Tool.
Schauen wir uns einmal an, was die beiden Tools leisten können, um dir bei der Optimierung deiner HTML-H-Tags zu helfen.
Website-Audit
Um die Überschriften deiner gesamten Website schnell zu überprüfen, kannst du mit unserem Website-Audit-Tool eine Liste deiner Seiten mit den h1- und h2-Tags erstellen. Das Tool weist automatisch auf Probleme mit deinen HTML-Überschriften hin und gibt dir Hinweise, wie du sie beheben kannst. Übrigens: Du kannst das Tool gerne kostenlos testen, um alle Funktionen auszuprobieren.
Die Länge der <h1>- und <h2>-Tags ist standardmäßig auf 100 Zeichen begrenzt. Das Tool erlaubt jedoch eine Anpassung, so dass du sie leicht ändern kannst, wenn du mit längeren oder kürzeren Überschriften gute Ergebnisse erzielst. Auf diese Weise wird es bei der Prüfung nicht als Fehler gewertet, wenn deine Tags die 100-Zeichen-Grenze über- oder unterschreiten.
OnPage-SEO-Check
Eine alternative Lösung ist, eine bestimmte Website zu überprüfen und eine aussagekräftige Analyse aller Überschriften zu erstellen. Das kannst du mit dem hauseigenen OnPage-SEO-Check von SE Ranking machen. Wie der Name schon sagt, kann er eine bestimmte Website anhand der Zielsuchanfrage überprüfen und durch eine umfassende SERP-Analyse tiefe Einblicke bieten. Außerdem überprüft dieses Tool nicht nur die h1- und h2-Tags wie Website-Audit, sondern auch alle H-Tags auf deiner Seite.
Unter der Registerkarte OnPage-SEO-Audit findest du einen separaten Bereich “Textinhalt”, der sich mit der Analyse von Textinhalten, einschließlich SEO-HTML-Überschriften, befasst.
Darüber hinaus gehst du zum Wettbewerbsvergleich und findest dort den Reiter Inhalt. Hier kannst du alle Überschriften überprüfen, die deine größten SERP-Konkurrenten verwenden.
Abschließende Überlegungen
Die richtige Verwendung von HTML-Heading-Tags trägt dazu bei, das Erlebnis deiner Leser zu verbessern, indem sie die Lesbarkeit und Zugänglichkeit deiner Inhalte erhöht. Sie kann sich sogar auf dein SEO auswirken, da diese HTML-Elemente den Suchmaschinen wichtige Informationen liefern.
Füge deinen Inhalten also unbedingt HTML-Heading-Tags hinzu. Denke aber daran, die Best Practices zu befolgen, um einen maximalen Effekt zu erzielen.
Ich hoffe, dass dieser Beitrag dir beim Implementieren von Heading-Tags und dem Einhalten der SEO-Best-Practices als Referenz dient. Lass mich wissen, ob ich etwas vergessen habe oder ob du andere Erfahrungen mit H-Tags gemacht hast!
