Header-Tags: Was sie sind und wie man sie verwendet

Als ich mit dem Bloggen anfing, hatte ich keine Ahnung, wie ich meine Beiträge so strukturieren sollte, dass sie für Suchmaschinen ranken, oder warum das wichtig war.

Ich habe einfach fettgedruckte Wörter und Phrasen eingefügt, die gut aussahen, und hoffte, zufällig für die Suchmaschinen-Ergebnisseiten (SERPs) ausgewählt zu werden.

Jetzt weiß ich, dass es eine Wissenschaft dafür gibt Blog-Optimierung, und was ich in meine Blog-Beiträge einbaute, um sie professionell aussehen zu lassen, nannte man Header-/Überschriften-Tags – und sind ein wichtiges Werkzeug für das Verständnis und SEO.

Hier ist eine Kurzanleitung zu Header-Tags und deren Verwendung:

• H1 – Der Titel eines Beitrags. Sie konzentrieren sich in der Regel auf Schlüsselwörter, konzentrieren sich auf die „große Idee“ einer Seite oder eines Beitrags und sind so gestaltet, dass sie die Aufmerksamkeit des Lesers erregen.
• H2 – Dies sind Unterüberschriften, die die Hauptpunkte Ihrer Absätze und einzelne Abschnitte klassifizieren. Erwägen Sie die Verwendung semantischer Schlüsselwörter, die sich auf die „große Idee“ in Ihrem H1 beziehen und gleichzeitig dem Leser helfen, die Abschnitte, die er lesen möchte, leicht zu finden.
• H3 — Hierbei handelt es sich um Unterabschnitte, die die im H2 angesprochenen Punkte weiter verdeutlichen. Alternativ können sie in der Formatierung von Listen oder Aufzählungspunkten verwendet werden.
• H4 – Dies sind Unterabschnitte, die die im H3 angesprochenen Punkte weiter verdeutlichen. Alternativ können sie in der Formatierung von Listen oder Aufzählungspunkten verwendet werden.

Das „H“ in H1, H2 usw. steht offiziell für „Heading-Element“, obwohl die SEO-Community diese Tags auch häufig als „Header-Tags“ bezeichnet.

Wie Sie der obigen Anleitung entnehmen können, gibt die Zahl die hierarchische Beziehung zwischen den einzelnen Elementen an (wobei H1 am wichtigsten ist, H2 weniger wichtig usw.).

Hier ist ein Beispiel dafür, wie sich diese hierarchische Struktur in einer Blog-Gliederung manifestieren könnte:

Nachdem Sie nun verstanden haben, dass Header-Tags einer Seite Struktur verleihen, wollen wir uns genauer mit ihnen befassen, beginnend mit dem H1-Tag. 

Machen Sie nicht den Fehler, Header-Tags lediglich als Stilelemente zu verwenden. Schließlich sind sie struktureller Natur. Stellen Sie sich H1 wie einen Buchtitel vor. Normalerweise gibt es nur einen Titel für ein Buch, daher sollte es auch nur einen Titel für Ihre Seite oder Ihren Beitrag geben. 

Darüber hinaus sollten H1-Tags immer oben auf Ihrer Seite vor dem Rest Ihres Inhalts stehen, genauso wie der Buchtitel auf dem Außencover steht, bevor Sie sich mit dem Text im Inneren befassen.

Zur Veranschaulichung: Das Header-Tag im Beispiel unten ist der Titel: „Der ultimative Leitfaden für das Produktmarketing im Jahr 2021"

Der Titel wird mithilfe von HTML-Code als H1 für die Seite festgelegt. Dieser Code könnte sich im Quellcode der Webseite wie folgt manifestieren:

Sieh den Stift H1 Beispiel 1 von Christina Perricone (@ Hubspot) Auf CodePen.

Allerdings gibt es, wie bereits erwähnt, auch andere Überschriften-Tags, die bei der Strukturierung einer Seite hilfreich sind.

Wie viele Header-Tags werden von HTML unterstützt?

HTML unterstützt bis zu sechs Header-Tags (H1–H6), mit denen Sie Ihre Seite nach Bedarf strukturieren können. Sie können visuell entsprechend Ihrer Marke stilisiert werden, und mit Ausnahme von H1 können Sie so viele dieser Tags auf einer Seite haben, wie Sie möchten. 

Ihre Kopfzeilen sollten sich an das Thema halten, worüber Sie schreiben, denn sie können dem Leser (und den Suchmaschinen) helfen, die Hauptpunkte im Inhalt zu finden und ihn durch den Seitenfluss zu leiten. Verwenden Sie beim Formatieren Ihr bestes Urteilsvermögen, wenn Sie Abschnitte aufteilen.

Unten sehen Sie einen Screenshot eines HubSpot-Blogbeitrags mit Beispielen für Header-Tags, die mit Pfeilen gekennzeichnet sind:

Wie Sie sehen, sieht jedes Header-Tag optisch anders aus und jedes Header-Tag wird für eine neue Idee verwendet.

Nachdem Sie nun etwas mehr darüber wissen, was Header-Tags sind, wollen wir uns damit befassen, wie sie für SEO verwendet werden.

Header-Tags und SEO

Sie denken vielleicht, dass Header-Tags im Gesamtbild der Website-bezogenen Dinge keine Rolle spielen. Header-Tags können jedoch dabei helfen, einem Inhalt Struktur zu verleihen und die Aufmerksamkeit auf die wichtigsten Ideen, Themen und (tatsächlich) Schlüsselwörter in diesem Inhalt. Dadurch haben Header-Tags einen hohen Stellenwert hinsichtlich der Keyword-Relevanz und Lesbarkeit. 

Bedenken Sie Folgendes: Google findet Inhalte, die es seinen Nutzern bereitstellen kann Crawlen von Webseiten. Dabei analysiert es den Text, die Bilder und andere Elemente, die es findet verstehen, worum es auf dieser Seite geht.

Wenn Sie Text in ein Header-Tag einfügen, signalisieren Sie, dass dieser Text wichtig ist, und Google verwendet diese, um den Kontext der Seite zu bestimmen, der Google dann dabei hilft, Ergebnisse bereitzustellen, die für die Suchanfragen der Sucher relevant sind.

Deshalb ist es bei der Verwendung von Header-Tags wichtig, sicherzustellen, dass sie korrekt mit a übereinstimmen Keyword-Intent. Wenn das H1-Tag eines Beitrags kein Schlüsselwort enthält oder wenn Sie irrelevanten Text in die H2- und H3-Tags einfügen, wird es für Google schwieriger, eine Seite zu verstehen. Das hat zur Folge, dass diese Seite nicht so gut rankt, wie sie könnte. 

Nehmen wir zur Veranschaulichung an, Ihr Schlüsselwort ist „eCommerce“. Sie möchten, dass sich dies in Ihrem H1-Tag widerspiegelt, daher wäre ein Titel wie „Der Leitfaden zur Gründung eines E-Commerce-Unternehmens“ ideal. Das würde Google genau sagen, wie Webbrowser an Ihren Beitrag gesendet werden sollen.

Suchmaschinen schauen sich auch die Header-Tags in Ihrem Beitrag an, daher ist es gut, auch diese auf Schlüsselwörter zu konzentrieren. Sie könnten beispielsweise einige H2-Abschnitte rund um beliebte Long-Tail-Keywords im Zusammenhang mit E-Commerce erstellen, etwa „Fünf Schritte zum Aufbau eines E-Commerce-Geschäfts“ oder „Beste Social-Media-Tools für E-Commerce“.

Sie müssen sich die Schlüsselwörter auch nicht selbst ausdenken – Sie können sie ganz einfach umsetzen Keyword-Recherche um Ihnen zu helfen oder sich Tools zur Keyword-Recherche anzusehen SEMRush or Ahrefs. Stellen Sie einfach sicher, dass Ihre Header-Tags sowohl für Menschen als auch für Suchmaschinen-Robots geeignet sind.

Überschriften erleichtern auch das Lesen von Seiten. Durch die Unterteilung verschiedener Teile einer Webseite bleiben die Informationen auf verständliche Weise organisiert und aufgeteilt. Dies hilft den Lesern, die gesuchten Informationen zu finden, aber auch Suchmaschinen, die mitscannen.

Wenn Ihre Abschnitte keinen Sinn ergeben, hat Ihre Seite möglicherweise keinen Rang. Denken Sie an die Abschnitte in diesem Beitrag – glauben Sie, dass sie auf lesbare Weise aufgeteilt wurden?

So fügen Sie Header-Tags in HTML hinzu

Das Hinzufügen von Header-Tags in HTML ist ein ziemlich einfacher Vorgang. Wenn Sie ein H1 notieren möchten, geben Sie und ein und platzieren den H1-Text zwischen diesen beiden Tags. Dies ist die gleiche Methode für jede Art von Header-Tag.

Wenn Ihr h1 beispielsweise „Der Leitfaden zum Einstieg in den E-Commerce,„Es würde so aussehen:

Sieh den Stift H1 Beispiel 2 von Christina Perricone (@ Hubspot) Auf CodePen.

Dies funktioniert für HTML4 oder älter. Wenn Sie mit HTML5 arbeiten, müssen Sie möglicherweise eine etwas andere Zeile verwenden, um das gleiche Ergebnis zu erzielen. Die Änderung besteht darin, Google darüber zu informieren, was das H1 ist:

Sieh den Stift H1 Beispiel 3 von Christina Perricone (@ Hubspot) Auf CodePen.

Sie können zwischen den beiden Tags auch Satzzeichen einfügen. Beispielsweise könnten Sie Folgendes haben:

Sieh den Stift H3 Beispiel 1 von Christina Perricone (@ Hubspot) Auf CodePen.

Denken Sie daran, dass Google den HTML-Code der Header-Tags scannt, um Webbrowsern mitzuteilen, worum es auf Ihrer Seite geht. Daher ist es wichtig, dass Sie sich die Tags ansehen und prüfen, ob Ihre HTML-Header richtig formatiert sind.

Einige Blogging-Plattformen wie WordPress und HubSpot verfügen in der Symbolleiste über eine Option zum Erstellen von Header-Tags, sodass Sie nicht jedes Mal, wenn Sie eines hinzufügen möchten, dafür im Quellcode oder HTML stöbern müssen.

Wenn Sie das nächste Mal einen Beitrag für Ihre Website erstellen, prüfen Sie, ob sich das Hinzufügen relevanter Header-Tags auf die SEO auswirkt und wie Ihre Leser Informationen verstehen.

Ein guter Test, den ich gerne verwende, besteht darin, Beiträge an ein nahes Familienmitglied zu senden, das nicht viel über Bloggen oder Marketing weiß. Das Feedback von Außenstehenden zu nutzen und zu fragen, ob sie meine Texte verstehen können, bevor ich sie veröffentliche, hilft mir, Beiträge so zu formatieren, dass sie verständlich sind.

Da die Verwendung von Headern die Lesbarkeit für Ihre Benutzer sowie die Crawlbarkeit für Suchmaschinen verbessern kann, gibt es keinen Grund, sie beim Erstellen von Seiten und Beiträgen nicht zu verwenden. Möglicherweise sehen Sie sogar Sprünge bei den Suchmaschinen-Rankings, beim Traffic und bei der Verweildauer auf der Seite.

Anmerkung der Redaktion: Dieser Beitrag wurde ursprünglich im Januar 2020 veröffentlicht und wurde aus Gründen der Vollständigkeit aktualisiert.

Quelle: https://blog.hubspot.com/marketing/header-tags