SEO Glossar: HTML Header - Alles was Du wissen musst!

Inhaltsübersicht

 

Kurz & knapp: Was ist ein HTML-Header?

Die HTML-Sprache dient dazu, Texte und andere Elemente zu strukturieren und korrekt darzustellen. Das Header-Element ist ein einleitendes Element, das unter anderem den Titel, das Logo und das Navigationsmenü einer Seite enthalten kann. Somit steht das Header-Element am Anfang einer Webseite und vor dem Body-Element mit dem Content der Seite.

„header“ oder „head“ – das ist hier die Frage!

Die Elemente „header“ und „head“ ähneln einander von der Bezeichnung her, unterscheiden sich aber von der Funktion her deutlich voneinander. Das Element „header“ kann auf jeder Webseite mehrmals verwendet werden, wohingegen „head“ nur einmal zum Einsatz kommt. Im Folgenden wird auf die Definition und Unterscheidung beider Arten von Tags eingegangen.

Das Tag <head> kurz und kompakt!

Mit dem Tag <head> wird der obere Bereich einer Webseite eröffnet. In diesem Tag sind zahlreiche Informationen enthalten, von denen der Großteil für die Website-Besucher nicht einsehbar ist. Doch für die Algorithmen der Suchmaschinen (z. B. Googlebot) und für die Browser ist nahezu jede im Page-Header enthaltene Information unverzichtbar. Geschlossen wird dieses Header-Element mit dem Tag </head>.

Aufgrund der weitreichenden Bedeutung dieses Elements für die technisch korrekte Darstellung und Abrufbarkeit jeder Webseite wird ab dem übernächsten Abschnitt näher auf den Page-Header eingegangen.

Das Tag <header> kurz und kompakt!

Die Inhalte inmitten der Tags <header> und </header> sind für Website-Besucher sichtbar. Zum Einsatz kommen diese Tags sowohl in den sichtbaren Kopf-Bereichen einer Webseite als auch zwischendurch auf der Webseite.

Man kann sich merken, dass überall dort, wo nicht nur die Überschriften <h1>, <h2>, <h3> etc. stehen, sondern auch Bilder, Videos oder besondere Visualisierungen in Kombination mit diesen Überschriften genutzt werden, ein zusätzliches Header-Tag zum Einsatz kommen kann.

Dort hingegen, wo nur die Überschriften <h1>, <h2>, <h3> etc. stehen, muss man von einem zusätzlichen Header-Tag keinen Gebrauch machen, weil dies die Webseite nur unnötig aufblähen würde.

Kostenloses SEO Strategiegespräch

In einem kostenlosen SEO Strategiegespräch, decken wir ungenutzte Potenziale auf und erarbeiten eine Strategie, damit Du auf Google erfolgreicher wirst.

head: Ein Element mit mehreren wichtigen Funktionen

Die Funktionen, die das Heading-Element auf jeder Website und jeder Unterseite der Website erfüllt, lassen sich in drei Stichpunkten zusammenfassen.

  • Übermittlung von Informationen zur Seite: Jede Webseite hat einen anderen Titel, Content und unterscheidet sich auch sonst von den anderen Unterseiten einer Website. Im Heading sind die wichtigsten Informationen zu einer Seite enthalten.
  • Erklärung der Beziehung zu anderen Seiten: Durch die Einbindung des Navigationsmenüs in das head-Element wird klar, welche Beziehung die besuchte Seite zu den anderen Unterseiten der Website hat – also zum Beispiel, ob es sich um eine Kategorieseite oder eine in der Menüstruktur untergeordnete Webseite handelt.
  • Steuerung der Darstellung von Inhalten: Damit alle gewünschten Elemente in der richtigen Reihenfolge und im richtigen Stil angezeigt werden, ist das head-Element erforderlich.

Bis auf das Title-Tag ist kein Inhaltselement des Headings für die User im Browser sichtbar. Jenes Title-Tag ist übrigens für die Suchmaschinenoptimierung (SEO), im Speziellen für die On-Page SEO und für die Technical SEO, von immenser Bedeutung: Sämtliche Website-Betreiber, die mit ihrer Website und den Unterseiten gute Rankings in Suchmaschinen erzielen möchten, sollten großen Wert auf einen gepflegten und technisch korrekt gesetzten Page-Header legen.

 

Kennst Du meinen SEO Newsletter?

Jetzt anmelden und regelmäßig Tipps vom Experten erhalten

 

HTML-Header-Tag richtig setzen – die wichtigsten Hinweise

Das head-Tag gehört zu den Arten von Tags, die sich aus einem öffnenden und einem schließenden Tag zusammensetzen. Während das Alt-Tag nur ein öffnendes und kein schließendes Tag benötigt, sind beim HTML-Header beide Tags erforderlich. So sieht es dann aus:

  • Öffnend: <head>
  • Schließend: </head>

Zwischen den beiden Tags wird der gewünschte Inhalt platziert. Beispiele für typische Header-Inhalte sind Überschriften, die Meta-Beschreibung sowie weitere Metadaten, Logos, die Navigation und andere einleitende Elemente. Zudem eignet sich der Header dazu, um innerhalb des Tags „style“ lokale CSS-Regeln zu setzen.

Wichtig für eine korrekte Einbindung des Heading-Elements ist, dass es in den Elementen „address“, „footer“ und „head“ nicht genutzt werden darf. Ein head-Tag im Heading selbst oder in den anderen beiden genannten Tags zu setzen, wäre ein technischer Fehler, der verhindern würde, dass die Webseite richtig ausgelesen werden kann.

Das Heading setzt als einleitendes Element direkt nach Beginn des HTML-Dokuments, also der Webseite, an – will meinen: Nach „<html>“ kommt das öffnende Header-Tag „<head>“. Auf dieses Heading folgt der Body-Teil, der einen öffnenden und schließenden Body-Tag enthält. Im Body werden beispielsweise der Content (öffnend „<article>“ und schließend „</article>“) der Seite und die Kontaktdaten des Autors bzw. Website-Betreibers (öffnend „<address>“ und schließend „</address>“) hinterlegt.

 

Ich bin einer der führenden SEO Experten Deutschlands

Ich bin bekannt aus großen Medien wie Stern, GoDaddy, Onpulson & dem Frühstücksfernsehen und habe bereiuts über 100+ namenhafte Kunden auf Google erfoglreich gemacht.

 

Fazit zum Thema HTML-Header

Der Begriff HTML-Header wird fälschlicherweise für zwei verschiedene Elemente genutzt: für <head> und <header>. Die Unterscheidung beider Elemente ist jedoch essenziell, denn vor allem das Element <head> erfüllt eine unverzichtbare Funktion: Es sollte immer am Anfang des HTML-Dokuments genutzt werden und mit dem Title, den Metadaten sowie weiteren Angaben die wichtigsten Informationen über die Seite liefern. Anders ist es mit den <header>-Elementen, die mehrmals verwendet werden können und die Überschriften-Bereiche rund um die <h1>, <h2>, <h3> und weitere Überschriften definieren.

Weitere Glossar-Artikel

Interessante Blog-Artikel

Sichere Dir jetzt Dein kostenloses Strategiegespräch

Google Logo
Google Bewertung
Basierend auf 147 Rezensionen