Der Header ist der obere Bereich einer Webseite. Er enthält meist das Logo und die Hauptnavigation, häufig auch Funktionen wie Suche, Login oder Warenkorb. Da der Header auf vielen oder allen Seiten einer Website identisch eingebunden wird, spielt er auch für die interne Verlinkung und damit für SEO eine Rolle.
Im Web-Kontext tauchen außerdem die HTML-Begriffe <header> und <head> auf. Sie haben unterschiedliche Aufgaben.
Was gehört in den Header einer Website?
Der Header soll Nutzern schnellen Zugang zu den wichtigsten Bereichen einer Website geben. Welche Elemente dort sinnvoll sind, hängt vom Seitentyp ab. Typisch sind:
- Logo mit Link zur Startseite
- Hauptnavigation
- Suche
- Login oder Kundenkonto
- Warenkorb bei Online-Shops
- Sprach- oder Länderauswahl
Die Hauptnavigation sollte die Struktur der Website verständlich abbilden. Bei einem Shop könnten dort etwa die wichtigsten Produktkategorien stehen, bei einem Nachrichtenportal die zentralen Ressorts.
Gerade bei großen Websites sollte der Header nicht zum vollständigen Inhaltsverzeichnis werden. Zu viele Navigationspunkte erschweren die Orientierung und machen die Hierarchie der Website weniger deutlich.
Welche Bedeutung hat der Header für SEO?
Für SEO ist vor allem die Navigation im Header relevant. Ihre Links werden meist auf einem großen Teil der Website ausgespielt. Wichtige Kategorien und Bereiche erhalten dadurch viele interne Links und sind für Nutzer und Suchmaschinen direkt erreichbar.
Google nutzt interne Links, um Seiten zu finden und Zusammenhänge innerhalb einer Website zu verstehen. Für zentrale Navigationsziele sollten deshalb reguläre HTML-Links mit einem href verwendet werden:
<a href="/schuhe/">Schuhe</a>
Auch der Linktext ist relevant. Bezeichnungen wie „Schuhe“, „SEO-Wissen“ oder „Preise“ machen das Ziel verständlich. Google empfiehlt ebenfalls beschreibende und zum Ziel passende Linktexte.
Die Auswahl der Header-Links sollte sich an der Informationsarchitektur orientieren. Eine wichtige Kategorie, die ausschließlich über mehrere Zwischenseiten erreichbar ist, wird durch die Website anders priorisiert als eine Kategorie, die direkt in der Hauptnavigation verlinkt ist.
Wie bewertet Google Links im Header?
Links in der Navigation sind normale interne Links. Ihre Position und ihr Kontext unterscheiden sich allerdings von redaktionellen Links im Hauptinhalt.
Googles Patent zum Reasonable Surfer Model beschreibt ein Modell, bei dem Links abhängig von verschiedenen Merkmalen unterschiedlich gewichtet werden können. Daraus lässt sich keine feste Gewichtung für Header-Links ableiten.
Für die Praxis ist entscheidend, die Navigation nach der Bedeutung der Seiten aufzubauen. Zusätzliche Links allein sind kein sinnvoller Grund, immer mehr URLs in den Header aufzunehmen.
Was ist das HTML-Element <header>?
<header> ist ein semantisches HTML-Element für einleitende Inhalte. Es kann beispielsweise Logo, Überschrift oder Navigation enthalten.
Hinweis: Nicht zu verwechseln mit HTTP-Headern – diese übertragen serverseitige Metadaten (wie Statuscodes oder Caching-Anweisungen) im Hintergrund der Datenübertragung und sind kein Bestandteil des HTML-Dokuments.
Ein einfacher Website-Header kann so ausgezeichnet werden:
<header>
<a href="/">Logo</a>
<nav>
<a href="/produkte/">Produkte</a>
<a href="/wissen/">Wissen</a>
</nav>
</header>
Das <header>-Element befindet sich innerhalb des <body> einer HTML-Seite.
Eine Seite kann mehrere <header>-Elemente enthalten. Auch ein einzelner Artikel oder ein anderer Seitenbereich kann einen eigenen <header> für Überschrift und einleitende Informationen besitzen.
Für WordPress-Nutzer übernimmt das Theme diese HTML-Struktur normalerweise automatisch. Beim Bearbeiten des Headers im Website-Editor, Theme oder Page Builder verändert man daher meist den sichtbaren Website-Header, ohne selbst das HTML schreiben zu müssen.
Was ist der Unterschied zwischen Header, <header> und <head>?
Die drei Begriffe lassen sich klar voneinander abgrenzen:
<header> und <head>?| Begriff | Bedeutung | Sichtbar? |
|---|---|---|
| Website-Header | Oberer Bereich einer Webseite | Ja |
| header | HTML-Element für einleitende Inhalte | Der enthaltene Inhalt meist ja |
| head | Bereich für Metadaten des HTML-Dokuments | Nein |
Im <head> stehen Informationen über die Seite, beispielsweise der <title>, die Meta Description, Canonical-Angaben oder Verweise auf CSS-Dateien.
Der grundlegende Aufbau sieht vereinfacht so aus:
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
<header>
<nav>...</nav>
</header>
<main>
Seiteninhalt
</main>
</body>
</html>
Die ähnliche Bezeichnung von <head> und <header> ist damit vor allem eine sprachliche Stolperfalle.
Worauf sollte man beim Header für SEO achten?
Für die SEO-Praxis reichen einige klare Grundsätze:
- Wichtige Bereiche sollten über die Navigation gut erreichbar sein.
- Linktexte sollten das jeweilige Ziel verständlich beschreiben.
- Navigationspunkte sollten als crawlbare HTML-Links umgesetzt sein.
- Der Header sollte nicht unnötig mit Links überladen werden.
- Wichtige Navigationsziele sollten auch mobil erreichbar sein.
- Nach einem Relaunch oder Theme-Wechsel sollten die Links im Header kontrolliert werden.
Bei WordPress sind reguläre Menüs in etablierten Themes normalerweise bereits als HTML-Links umgesetzt. Eine genauere technische Prüfung lohnt sich vor allem bei individuellen Themes, Mega-Menüs und stark JavaScript-basierten Navigationen.
Teste SISTRIX 14 Tage kostenlos und finde mit der Onpage-Analyse heraus, ob die Links in deinem Header crawlbar sind und wie deine interne Verlinkung aufgebaut ist.
Häufige Fragen zum Header
Der Website-Header befindet sich üblicherweise am oberen Rand einer Webseite und steht vor dem eigentlichen Hauptinhalt. Seine genaue Position ist allerdings eine Frage des Layouts. Das HTML-Element <header> selbst schreibt keine bestimmte Position auf der Seite vor.
Für die Höhe eines Headers gibt es keinen festen Standard. Sie richtet sich nach Logo, Navigation, zusätzlichen Funktionen und der Bildschirmgröße. Der Header sollte genügend Platz für eine gut bedienbare Navigation bieten, ohne einen unnötig großen Teil des sichtbaren Bereichs einzunehmen.
Nein. Eine Webseite benötigt weder einen sichtbaren Website-Header noch zwingend ein <header>-Element. Bei Websites mit mehreren Unterseiten ist ein einheitlicher Header jedoch üblich, weil er die zentrale Navigation und Orientierung bereitstellt.
Der Header befindet sich üblicherweise am Anfang einer Webseite und enthält die zentrale Navigation. Der Footer steht am Seitenende und enthält häufig ergänzende Navigationselemente, Kontaktinformationen sowie Links zu Impressum, Datenschutz oder anderen übergeordneten Seiten.
Der Header bezeichnet einen Bereich der Webseite. Die Navigation ist ein Element, das sich innerhalb dieses Bereichs befinden kann. In HTML lässt sich diese Unterscheidung auch semantisch ausdrücken: <header> kennzeichnet den einleitenden Bereich, <nav> einen Bereich mit Navigationslinks.
Nein. HTML-Dokumente müssen kein <header>-Element enthalten. Das Element dient dazu, passende einleitende Inhalte semantisch auszuzeichnen. Eine Webseite funktioniert auch ohne diese Auszeichnung.
Ja. Ein <header> kann einleitende Inhalte für einen einzelnen Bereich der Seite enthalten. Innerhalb eines <article> kann darin etwa die Artikelüberschrift mit ergänzenden Informationen stehen. Deshalb kann ein HTML-Dokument mehrere <header>-Elemente enthalten.
SISTRIX kostenlos testen
- Kostenloser Testaccount für 14 Tage
- Unverbindlich, keine Kündigung notwendig
- Persönliches Onboarding durch Experten
