Was ist die Kopfzeile (Header) einer Website?
Die Kopfzeile – im Webdesign als Header bezeichnet – ist der obere Bereich einer Website, der auf jeder Seite sichtbar ist. Sie enthält in der Regel das Logo, die Hauptnavigation und oft zusätzliche Elemente wie eine Suchfunktion, Kontaktinformationen, Sprachwechsler oder einen Call-to-Action-Button.
Der Header ist das Erste, was Besucher auf jeder Unterseite sehen. Er bildet den visuellen und funktionalen Rahmen der Website und bleibt über alle Seiten hinweg konsistent – was Wiedererkennung schafft und die Orientierung erleichtert.
Typische Bestandteile eines Headers
- Logo: Meist links positioniert, verlinkt auf die Startseite. Das Logo ist das zentrale Wiedererkennungsmerkmal und gleichzeitig ein verlässlicher Rückweg zur Startseite.
- Hauptnavigation: Die wichtigsten Menüpunkte der Website. Auf Desktop-Geräten horizontal angeordnet, auf Mobilgeräten meist hinter einem Hamburger-Icon versteckt.
- Call-to-Action: Ein hervorgehobener Button wie „Termin buchen”, „Angebot anfordern” oder „Jetzt starten” – direkt sichtbar, ohne scrollen zu müssen.
- Kontaktinformationen: Telefonnummer oder E-Mail-Adresse, vor allem bei lokalen Unternehmen und Dienstleistern sinnvoll.
- Suchfunktion: Bei inhaltsreichen Websites ein wichtiges Orientierungswerkzeug, das Nutzern den direkten Zugang zu spezifischen Inhalten ermöglicht.
Kopfzeile (Header) – Varianten
- Statischer Header: Bleibt am oberen Seitenrand stehen und scrollt mit dem restlichen Inhalt aus dem Sichtfeld.
- Sticky Header: Bleibt beim Scrollen fixiert am oberen Bildschirmrand. Vorteil: Die Navigation ist jederzeit erreichbar. Nachteil: Der Header nimmt dauerhaft Platz auf dem Bildschirm ein, was besonders auf Mobilgeräten problematisch sein kann.
- Transparenter Header: Liegt über dem Hero-Bereich der Startseite und wird erst beim Scrollen mit Hintergrundfarbe versehen. Optisch ansprechend, erfordert aber sorgfältige Kontrast-Gestaltung, damit die Menüpunkte lesbar bleiben.
Kann ich beim Header auch was falsch machen?
Ja – und zwar mehr, als die meisten denken. Der Header ist das Element mit dem größten Schadenspotenzial, weil er auf jeder einzelnen Seite geladen wird. Ein paar typische Fehler, die wir regelmäßig sehen:
Überladener Header auf Mobilgeräten. Wenn dein mobiler Header mit Top-Bar, Logo, Menü-Icon, Suchfeld und CTA-Button drei bis vier Zeilen einnimmt, sehen Besucher auf dem Smartphone beim Laden der Seite erstmal nur Header – und keinen Inhalt. Google bewertet das über den CLS-Wert (Cumulative Layout Shift) und die Largest Contentful Paint negativ. Faustregel: Der mobile Header sollte maximal 60–70 Pixel Höhe einnehmen.
Logo als unkomprimiertes PNG. Wir sehen regelmäßig Header-Logos mit 500 KB oder mehr – ein einzelnes Bild, das auf jeder Seite geladen wird. Ein optimiertes SVG oder ein komprimiertes WebP mit maximal 20–30 KB tut denselben Job, ohne die Ladezeit zu belasten.
Sticky Header ohne Shrink-Effekt. Ein fixierter Header, der beim Scrollen genauso groß bleibt wie im Ausgangszustand, frisst dauerhaft wertvollen Viewport-Platz. Besser: Der Header verkleinert sich beim Scrollen auf eine kompaktere Version mit kleinerem Logo und reduzierten Abständen.
Darf ich einen separaten Desktop- und Mobil-Header bauen?
Das ist in Elementor und vielen anderen Page Buildern gängige Praxis: Du erstellst zwei Header-Templates – eins für Desktop, eins für Mobil – und steuerst die Sichtbarkeit über Display Conditions. Technisch funktioniert das, aber es gibt einen wichtigen Haken:
Beide Header werden im HTML geladen, auch wenn nur einer sichtbar ist. Das bedeutet doppelten Code, doppelte Ladezeit und – aus SEO-Sicht relevant – doppelte Links im Quelltext. Google sieht beide Menüs und muss entscheiden, welches zählt. In der Praxis ist das selten ein echtes Ranking-Problem, aber es bläht den DOM auf und kann die Core Web Vitals verschlechtern.
Die sauberere Lösung: Einen einzigen Header bauen, der sich über CSS und Media Queries responsiv anpasst. Das ist technisch etwas aufwendiger, aber schlanker im Code und eindeutig für Suchmaschinen. Wenn du trotzdem zwei separate Header brauchst – etwa weil die mobile Navigation komplett anders aufgebaut sein soll – achte darauf, dass beide dieselben Seiten verlinken. Unterschiedliche Links in Desktop- und Mobil-Header verwirren Google beim Crawling.