Was ist ein Header?
Der Header ist der Kopfbereich deiner Website. Er steht oben auf jeder Seite und sieht überall gleich aus. Sein Gegenstück am unteren Ende ist der Footer.
Typischer Inhalt:
- Logo oder Firmenname, verlinkt auf die Startseite
- Hauptnavigation mit den wichtigsten Seiten
- Suche, vor allem bei Shops und großen Websites
- Kontakt-Button oder Telefonnummer, bei Shops der Warenkorb
Im Code steckt dahinter meist das HTML-Element „header“. Laut Web Almanac 2024 nutzen es 65 % der Websites. Nicht verwechseln: Der unsichtbare „head“-Bereich enthält unsichtbare Angaben wie den Seitentitel, und HTTP-Header sind Zusatzinfos zwischen Browser und Server. Mit dem sichtbaren Kopfbereich hat beides nichts zu tun.
Logo und Navigation: was die Forschung sagt
Die Nielsen Norman Group hat 2016 mehrere Studien zum Header gemacht. Die Ergebnisse gelten bis heute als Grundregeln:
Case A · Logo
Links, mittig oder rechts?
39 %
Markenerinnerung mit Logo links
21 %
mit Logo rechts
Logo oben links: fast doppelt so gut im Gedächtnis
128 Teilnehmende, vier Hotel-Websites. Bei zentriertem Logo scheiterten Nutzer in einer weiteren Studie sechsmal so oft daran, mit einem Klick zur Startseite zu kommen.
Case B · Navigation
Hamburger-Menü am Desktop
27 %
nutzten das versteckte Menü
48 %
nutzten das sichtbare Menü
Versteckte Navigation wird viel seltener genutzt — und macht langsamer
179 Teilnehmende, sechs Websites. Mit verstecktem Menü brauchten Nutzer am Desktop mindestens 39 % länger.
Auf dem Handy führt am Hamburger-Menü — den drei Strichen — oft kein Weg vorbei. Am Desktop rät die Nielsen Norman Group klar davon ab. Ein Kompromiss für das Handy: die zwei, drei wichtigsten Links sichtbar lassen, den Rest ins Menü.
Sticky Header: mitlaufen oder nicht?
Ein Sticky Header bleibt beim Scrollen oben stehen. Das ist praktisch, weil Menü und Kontakt-Button immer erreichbar sind. Auf dem Handy frisst er aber Platz. Die Regeln der Nielsen Norman Group:
- So flach wie möglich — Logo klein, nur das Nötigste.
- Deckender Hintergrund, klar vom Inhalt abgesetzt.
- Keine Spielereien: kaum Animation; erscheint er erst beim Hochscrollen, dann flott.
- Fokus nicht verdecken: Wer mit der Tastatur navigiert, muss sehen, wo er gerade ist. Das verlangt die Richtlinie WCAG 2.2 (Kriterium 2.4.11).
Häufige Fehler
Fehler 1 · Kein Link „Zum Inhalt springen“
Wer mit Tastatur oder Screenreader unterwegs ist, muss sonst auf jeder Seite das ganze Menü durchklicken. Die Richtlinie WCAG verlangt deshalb einen Weg, wiederholte Bereiche wie den Header zu überspringen. Laut Web Almanac 2024 hat nur rund jede vierte Website so einen Skip-Link.
Fehler 2 · Header springt beim Laden
Lädt eine Hinweisleiste oder das Logo erst nach und schiebt alles nach unten, misst Google das als Layout-Verschiebung (CLS). Reservier den Platz für diese Elemente von Anfang an. Das Logo kann übrigens auch das größte Element im sichtbaren Bereich sein — dann zählt es für die Ladezeit (LCP).
Fehler 3 · Zu viel in den Header packen
Zwölf Menüpunkte, zwei Telefonnummern, Social-Icons, Sprachwahl und Suche: Dann sieht man nichts mehr. Alles, was nicht jeder Besucher braucht, gehört eine Ebene tiefer oder in den Footer.
Fehler 4 · Wichtigste Aktion versteckt
Wenn du willst, dass Leute anrufen oder einen Termin buchen, gehört genau dieser Button in den Header — gut sichtbar, nicht als sechster Menüpunkt.
So baust du einen guten Header
- Logo oben links, verlinkt auf die Startseite.
- Wenige Menüpunkte mit klaren Namen statt Fachbegriffen.
- Eine Hauptaktion als Button: „Termin buchen“, „Anrufen“, „Zum Shop“.
- Skip-Link „Zum Inhalt springen“ einbauen.
- Auf dem Handy testen: Wie viel Platz bleibt für den Inhalt?
- In Elementor den Header im Theme Builder anlegen und als HTML-Tag „header“ einstellen.
Häufige Fragen
Was gehört in einen Website-Header?
Das Logo oben links mit Link zur Startseite, die Hauptnavigation und eine klare Hauptaktion wie „Kontakt“ oder „Termin buchen“. Bei Shops kommen Suche und Warenkorb dazu. Alles andere ist optional und sollte gut überlegt sein.
Lohnt sich ein Sticky Header?
Ja, wenn er flach bleibt, einen deckenden Hintergrund hat und den Inhalt nicht verdeckt. Auf dem Handy kann ein zu hoher Sticky Header viel Platz kosten. Nach WCAG 2.2 darf er außerdem den Tastatur-Fokus nicht komplett verdecken.
Hamburger-Menü oder sichtbare Navigation?
Am Desktop sichtbar. In einer Studie der Nielsen Norman Group nutzten nur 27 % das versteckte Menü, aber 48 % das sichtbare, und mit verstecktem Menü waren Nutzer mindestens 39 % langsamer. Auf dem Handy ist das Hamburger-Menü üblich, am besten mit einigen sichtbaren Links daneben.
Was ist der Unterschied zwischen Header, H1 und HTTP-Header?
Schadet der Header der SEO, weil er auf jeder Seite gleich ist?
Nein. Google sagte schon 2016, solche wiederholten Bereiche würden nicht abgestraft, sie zählen nur nicht als Hauptinhalt. Wichtig für SEO ist eher, dass der Header schnell lädt und die Navigation deine wichtigen Seiten verlinkt.
Quellen
- MDN Web Docs: Das header-Element
- Nielsen Norman Group: Logo Placement and Brand Recall
- Nielsen Norman Group: Centered Logos Hurt Website Navigation
- Nielsen Norman Group: Hamburger Menus and Hidden Navigation
- Nielsen Norman Group: Sticky Headers
- W3C: WCAG 2.2, Bypass Blocks
- W3C: WCAG 2.2, Focus Not Obscured
- HTTP Archive: Web Almanac 2024, Kapitel Accessibility
- web.dev: Cumulative Layout Shift optimieren
- web.dev: Largest Contentful Paint
