So verwenden Sie HTML-Überschriften-Tags richtig

Jede Website ist ihr eigenes einzigartiges Monster, bei dem Entwickler und Designer ihre eigenen charakteristischen Stimmen in den Code einfügen. Aber ein Element, das jede einzelne Website gemeinsam hat, sind HTML-Heading-Tags. Diese Überschriften unterteilen Ihren Inhalt nicht nur in besser lesbare Abschnitte, sie erstellen auch die semantische Gliederung Ihrer Website, sodass Suchmaschinen und Barrierefreiheitssoftware genau sagen können, aus welchen Inhalten die Website besteht. Es gibt gelegentlich einige Verwirrung bezüglich der richtigen Verwendung und Funktion von HTML-Überschriften-Tags, daher möchten wir alle 6 Ebenen durchgehen und besprechen, wie und wann sie richtig verwendet werden.

Abonnieren Sie unseren Youtube-Kanal

Warum HTML-Überschriften-Tags verwenden?

Wie oben erwähnt, bilden diese Tags das Skelett Ihrer Website. Ohne sie sind nicht nur Titel und Zweck Ihrer Website unklar, sondern der Inhalt sieht für Benutzer und Bots wie eine riesige Textwand aus – selbst wenn Sie ihn in Absätze aufteilen.

Außerdem verwenden Screenreader und Barrierefreiheitssoftware sie, um durch Ihre Inhalte zu navigieren (manchmal buchstäblich). Wenn Sie also keine HTML-Überschriften-Tags einschließen, wird Ihre Website für viele Benutzer unzugänglich, weil sie sich einfach nicht auf der Seite und im Inhalt bewegen können.

Darüber hinaus navigieren auch Suchmaschinen und andere Webcrawler, die auf Ihre Website gelangen, über Ihre Überschriften. In letzter Zeit berücksichtigt Google die Code-Semantik in seinen Rankings, was bedeutet, dass die Suchabsicht sehr stark gewichtet wird. Ihre HTML-Überschriften-Tags sind ein wichtiger Teil davon. Sie sagen Google und den Besuchern, wo auf der Seite bestimmte Informationen zu finden sind, die nach hierarchischer Bedeutung geordnet sind.

Und jedes Tag auf Ihrer Seite hilft dabei auf seine Weise.

Tag-Hierarchie ist wichtig

Die HTML-Überschriften-Tag-Hierarchie ist wichtig. Die Reihenfolge, in der Sie diese Tags verwenden, kann SEO für Ihre Website beeinflussen oder beeinträchtigen. Sie können sie zwar mit CSS stylen und ein H6-Tag größer, fetter und heller als ein H2-Tag gestalten, aber Sie sollten dennoch versuchen, sie in Ordnung zu halten, um die Crawler (und Leser) nicht zu verwirren.

Stellen Sie sich die Tags in aufsteigender Reihenfolge vor, als wären sie die Überschriften für die Gliederung Ihres Beitrags. Sie sollten nur (im Allgemeinen) eine höhere Zahl unter den unmittelbaren Vorgänger setzen. Sie können sie so oft tief verschachteln, wie Sie möchten, aber stellen Sie sicher, dass Sie jedes Mal nur die nächste in der Reihenfolge platzieren.

Hier ist ein Beispiel:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

Es kann bestimmte Fälle geben, in denen Sie einen einzelnen H6 über einem H4 haben, aber in den meisten Fällen bestimmen Google und andere Suchmaschinen die Themenpriorität und messen die Effektivität der Inhalte für die Suchabsicht, indem sie Überschriften verwenden, um durch Ihre Inhalte zu navigieren.

H1-Tags

Das H1-Tag ist möglicherweise das einfachste der HTML-Überschriften-Tags, aber auch eines der am meisten missverstandenen. In den meisten Fällen sehen Sie die H1-Überschrift als Titel einer bestimmten Seite oder eines Beitrags. Es ist das, was Suchmaschinen (wahrscheinlich) in den Ergebnissen anzeigen. Ihr Browser wird dies wahrscheinlich auch in seiner Titelleiste anzeigen, obwohl Sie es bei vielen SEO-Plugins und ähnlichen Apps für diese ändern können. Aus diesem Grund ist es zwar wichtig, Ihre Ziel-Keyphrase im H1-Tag zu haben, es ist jedoch nicht zu 100% erforderlich. Schreiben Sie Ihre Überschriften und Titel semantisch, um die Suchabsichten der Besucher abzudecken, anstatt die HTML-Überschriften-Tags mit Schlüsselwörtern zu füllen.

Das obige Bild zeigt ein H1-Tag, das als Eintragstitel für einen Artikel im Elegant Themes-Blog verwendet wird. Es ist auch das einzige H1-Tag auf der Seite. Dies zeigt an, dass es sich um das Thema des Inhalts auf der Seite handelt.

Jahrelang war es üblich, einen (und nur einen) H1-Tag pro Seite zu verwenden. In den meisten Fällen ist dies immer noch ein guter Rat. Google und andere Suchmaschinen crawlen Ihre Seite und suchen nach dem H1-Tag. Daraus bestimmen sie dann Thema, Titel und Struktur.

Google hat jedoch ausdrücklich gesagt, dass die Verwendung mehrerer H1-HTML-Überschriften-Tags auf Ihrer Website keinerlei SEO-Einbußen nach sich zieht. Das bedeutet nicht, dass Sie sie überall auf Ihrer Website verwenden, aber es bedeutet, dass Sie bei Bedarf mehr als eine pro Seite verwenden können.

Wann mehrere H1-Überschriften verwendet werden sollten

Der einzige Zweck eines H1 besteht darin, einen vollständigen Abschnitt zu einem einzelnen Thema anzugeben. Das bedeutet, dass Sie, wenn Sie eine einzelne Seite mit mehr als einem Thema haben, für jedes neue Thema auf dieser Seite ein H1 verwenden möchten. Dies würde Google mitteilen, dass es auf Ihrer Seite nicht nur um das Thema im Titel geht. Es könnte aber auch weiter unten einen Abschnitt zu einem ganz anderen (aber verwandten) Thema geben.

Auf einseitigen Websites ist dies auch wichtig, da Sie auf dieser einen Seite möglicherweise einen Abschnitt "Info", "Preise", "Kontakt" und "Portfolio" haben. Wie können Sie Google also mitteilen, dass der Inhalt jedes Abschnitts eine eigene autonome Einheit ist?

H1-Tags, so geht's. Sie behandeln jeden Abschnitt so, als ob er eine eigene Mini-Webseite wäre, und verwenden dabei die oben besprochene Hierarchie. Auf diese Weise sieht Google die Überschriften, während es auf der Seite navigiert, und kann dann bestimmen, aus welchem ​​dieser Abschnitte Featured Snippets abgerufen werden (und so weiter), um die Fragen der Suchenden zu beantworten.

Sie können auch jedes Mal, wenn Sie ein Abschnitts- Tag auf Ihrer Website verwenden, ein H1-Tag verwenden, aber wir empfehlen, dies nur zu tun, wenn es sich um einen Abschnitt mit paralleler Bedeutung zum Seitentitel und nicht um einen untergeordneten handelt.

H2-Tags

H2-Tags werden jetzt höchstwahrscheinlich die am häufigsten verwendeten HTML-Überschriften-Tags auf Ihren Seiten sein. Und das aus gutem Grund. Die meisten Beiträge und Seiten im Internet bestehen aus einem einzigen Thema mit nur wenigen Zwischenüberschriften. Wir empfehlen, dass jeder von Ihnen erstellte Inhalt mindestens ein H2-Tag enthält. Yoast und andere SEO-Plugins schlagen etwa alle 300 Wörter eine Überschrift vor. Je nach Inhalt sind die H2-Tags dafür da.

Sie trennen Unterthemen (oder Schritte), um das Lesen zu erleichtern. Zum Beispiel bestehen die meisten unserer Beiträge hauptsächlich aus H2-Überschriften (mit H3, falls zutreffend). Das liegt daran, dass unsere Artikel ein einziges Thema behandeln, bei dem wir versuchen, ein einzelnes Problem zu lösen. Wir werden den Titel wie „How to Use OBS Studio to Livestream“ als H1 haben, aber die Unterüberschriften wie „How to Get Started with OBS Studio“ werden in H2 sein.

Das H2-Tag steht für einzelne Schritte, die sich direkt auf das H1-Thema beziehen. In diesem speziellen Beitrag haben wir die folgende Struktur verwendet:

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

Die H2-Überschriften-Tags in diesem Beitrag gehen auf die wichtigsten Ideen ein, z. Während es auch unterhalb von H3 Schritte gibt, weisen die H2-Überschriften auf das großformatige Bild des Artikels hin. Es handelt sich um eine allgemeine Ansicht, die Crawler und Leser durchsuchen können, um zu sehen, ob der Artikel die gesuchten Informationen enthält.

Im Allgemeinen haben Sie mehrere H2-Tags pro Artikel, während möglicherweise keine Unterüberschriften darunter verschachtelt sind. Wenn sich Ihre Seite oder Ihr Beitrag zu einem einzelnen Thema befindet, das nicht in Abschnitte mit Unterabschnitten unterteilt ist, wie im obigen Beispiel, ist es besser, mehrere H2-Tags zu verwenden als verschachtelte H2 -> H3 -> H4, da diese den Crawlern anzeigen, dass Sie Wir tauchen tiefer in ein Sutopic ein, als das Hauptthema des Beitrags zu erweitern.

H3-Tags

H3-Tags hingegen sind der Ort, an dem Ihre Artikel wirklich in die Details Ihres Themas eindringen können. Sie sollten diese H3-Tags niemals direkt unter einem H1 verwenden. Googlebots und Suchmaschinen sehen sie absolut als Zwischenüberschriften. Während H2 als primäre Überschrift für Abschnitte innerhalb eines einzelnen Artikels akzeptiert wird (wobei H1 das Hauptthema als Titel angibt, denken Sie daran).

Wenn Sie sich das obige Bild genau ansehen, werden Sie feststellen, dass sich das tatsächliche Styling und die Größe zwischen unseren H2- und H3-Tags nicht sonderlich unterscheiden. Der Grund dafür ist, dass Sie beim Scannen nicht davon ausgehen möchten, dass jeder Punkt, den wir in einem H3 machen, weniger wichtig ist als in einem H2. Denn das ist es nicht.

Es ist nur kleiner, um anzuzeigen, dass es sich um einen untergeordneten Punkt zum H2 und nicht um eine direkte Verbindung zum Gesamtthema handelt, was aus struktureller Sicht in Bezug auf die SEO für Ihren Artikel am wichtigsten ist. Für menschliche Leser anstelle von Robotern hilft die visuelle Unterscheidung einfach, sie auf der Seite nach unten zu bewegen und die Informationen aufzuschlüsseln, um sie leichter zu analysieren.

H4, H5, H6-Tags

Wir haben diese aus einem bestimmten Grund in einen Topf geworfen. Im Allgemeinen werden Sie kaum Websites finden, die die H1- bis H6-Reihe von HTML-Überschriften-Tags vollständig nutzen. Die mit Abstand beliebteste Struktur ist H1 bis H3. Genauso wie Sie selten eine Inhaltsgliederung sehen, die über die zweite verschachtelte Ebene hinausgeht.

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

Das H4-Tag dient größtenteils dem gleichen Zweck wie H3. Sie werden sie verwenden, um ins Detail für Schritte und Beispiele zu gehen, aber immer unter Ihren Hauptüberschriften verschachtelt. Designer gestalten sie im Allgemeinen mit CSS, das kleiner als H3 ist. Sie neigen dazu, bei der gewöhnlichen Inhaltserstellung einen begrenzten Nutzen zu sehen. Ein Thema neigt dazu, sehr tiefgreifend zu sein, wenn die Ideen so aufgeschlüsselt werden müssen, dass ein H4-Überschriften-Tag benötigt wird.

H5 und H6

Sie können die Überschriften H5 und H6 auf verschiedene Weise verwenden.

Der erste Weg

(Nur als Beispiel, wir haben diesen speziellen Abschnitt per Überschrift in verschiedene Teile unterteilt, und wir befinden uns jetzt unter H4, da es sich um ein Unter-Unterthema des Hauptartikels handelt.)

Diese Überschriften werden oft in Inhaltsverzeichnissen und ähnlichen Listen verwendet, obwohl ihre Hauptfunktion technisch die gleiche ist wie die anderen, indem sie Themen von absteigender Bedeutung auf der Seite abgrenzen. Es wird ziemlich selten sein, ein Dokument mit einer vollständigen Reihe von Überschriften bis hinunter zu H6 zu finden.

Der zweite Weg

Einige Leute verwenden H5- und H6-Tags als „Spezial“-Formatierungsüberschriften. Sie wenden spezielles CSS auf diese beiden HTML-Header-Tags an, das sich von H1 bis H4 völlig unterscheidet. Sie können sie dann verwenden, um auf Themen und Ideen aufmerksam zu machen, die sonst übersehen werden könnten.

Dies ist technisch keine optimale Vorgehensweise, da Überschriften hierarchisch sind. Wenn Ihre Website jedoch insgesamt gut strukturiert ist und Sie H5 und H6 als Spezialstile auf bestimmten einzelnen Seiten oder Beiträgen sparsam einsetzen, werden Sie mit ziemlicher Sicherheit keinen SEO-Hit einstecken.

Denken Sie nur daran, dass Sie nicht aus der Hierarchie ausbrechen, selbst wenn Sie sie für spezielle Formatierungen verwenden. Halten Sie sie in Ordnung. Wenn Sie also H6 verwenden, um eine Zwischenüberschrift zu formatieren, stellen Sie sicher, dass die nächste, die Sie verwenden, H1 oder H2 ist, um anzuzeigen, dass Sie zur Standardstruktur zurückgekehrt sind.

Was Sie nicht mit HTML-Überschriften-Tags tun sollten

Strukturieren Sie keine einzelne Seite mit der gesamten Hierarchie der Überschriften ganz nach unten. Sie sind besser dran mit einem H1 für einen Titel und alle H2s, als dass jede nachfolgende Überschrift verschachtelt ist.

Jawohl:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

Nein:

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

Außerdem möchten Sie die Überschriften nicht willkürlich verwenden. Verwenden Sie sie nur der Reihe nach. Andernfalls haben Crawler keine Ahnung, wie sie auf Ihrer Seite navigieren sollen, und auch keine Software für die Barrierefreiheit.

Nein:

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

Im Allgemeinen können Sie davon ausgehen, dass ein Crawler weiß, dass Sie einen Unterabschnitt verlassen haben, wenn er das nächste H1 oder H2 findet. Im obigen Code-Snippet hätten Crawler und Bots Schwierigkeiten, die Informationsstruktur zu analysieren.

Zusammenfassung mit HTML-Überschriften-Tags

Und sehen? Wir sind zurück zu einer H2-Überschrift, um die Dinge abzuschließen. Heading-Tags sind ein wichtiges Element jeder einzelnen Website. Wenn Sie sie richtig verwenden, können Sie Ihre Suchmaschinen-Rankings sowie die UX Ihrer Website verbessern, da Besucher die gesuchten Informationen in Ihren Inhalten leichter finden können. Denken Sie daran, nicht zu viele Ihrer Überschriften mit Keywords zu versehen. Obwohl es eine gute Idee ist, die besprochenen Keywords oder Phrasen aufzunehmen, um sicherzustellen, dass Ihre Ideen klar sind, sind Googlebots und andere ziemlich schlau und können erkennen, wenn Sie Themen ausgetauscht haben oder sich auf demselben Thema befinden. Insgesamt ist die Verwendung von HTML-Überschriften-Tags unglaublich wichtig, aber wenn Sie nur ein paar Dinge beachten, werden Ihre Websites in kürzester Zeit glänzen.

Haben Sie HTML-Überschriften-Tags richtig verwendet?

Beitragsbild des Artikels von VectorV / shutterstock.com