HTML Head: Aufbau & SEO-Optimierung

Was ist der HTML Head?

Der Head (geschrieben als <head>) ist der Bereich eines HTML-Dokuments, der wichtige Informationen über eine Webseite enthält, ohne selbst sichtbar zu sein. Während der <body> die sichtbaren Inhalte zeigt, liefert der Head Anweisungen und Metadaten an den Browser, an Suchmaschinen und an soziale Netzwerke.

Man kann sich den Head wie das Etikett auf einer Verpackung vorstellen: Der Inhalt selbst (der Body) ist das Produkt, aber das Etikett verrät wichtige Informationen darüber, wie das Produkt heißt, wie es einzuordnen ist und wie es dargestellt werden soll.

Wo steht der Head im HTML-Aufbau?

Der Head steht direkt nach dem öffnenden <html>-Tag und vor dem Body. Ein typisches Grundgerüst sieht so aus:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beispielseite</title>
  <meta name="description" content="Eine kurze Beschreibung der Seite.">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Hier beginnt der sichtbare Teil -->
</body>
</html>

Die wichtigsten Elemente im Head

<title> (Seitentitel): Der wohl wichtigste Eintrag für SEO. Der Titel erscheint im Browser-Tab und als anklickbare Überschrift in den Google-Suchergebnissen. Er sollte das Hauptkeyword enthalten und zum Klicken einladen.
Meta Description: Eine kurze Beschreibung des Seiteninhalts, die oft als Vorschautext in den Suchergebnissen angezeigt wird. Sie ist kein direkter Rankingfaktor, beeinflusst aber die Klickrate (CTR) erheblich.
Charset-Deklaration: <meta charset="UTF-8"> legt den Zeichensatz fest. UTF-8 sorgt dafür, dass Umlaute, Sonderzeichen und Emojis korrekt angezeigt werden.
Viewport-Tag: <meta name="viewport"> ist für die mobile Darstellung unverzichtbar. Es sorgt dafür, dass sich die Seite an unterschiedliche Bildschirmgrößen anpasst.
Stylesheets und Favicon: Über <link>-Tags werden CSS-Dateien für das Design und das Favicon (das kleine Symbol im Browser-Tab) eingebunden.

Steuerungsanweisungen für Suchmaschinen

Im Head lässt sich auch festlegen, wie Suchmaschinen mit einer Seite umgehen sollen:

Robots-Meta-Tag: Mit <meta name="robots" content="noindex, nofollow"> lässt sich Google anweisen, eine Seite nicht in den Index aufzunehmen und Links auf der Seite nicht zu folgen. Das ist nützlich für Seiten wie interne Suchergebnisse oder Danke-Seiten, die nicht in der Suche erscheinen sollen.
Canonical-Tag: Mit <link rel="canonical"> wird die bevorzugte Version einer Seite angegeben. Das verhindert Duplicate-Content-Probleme, wenn ähnliche oder identische Inhalte unter mehreren URLs erreichbar sind.

Social-Media-Vorschau steuern

Wird eine Seite in sozialen Netzwerken geteilt, bestimmen spezielle Meta-Tags im Head, wie die Vorschau aussieht:

Open Graph Tags: Legen Titel, Beschreibung und Vorschaubild für Plattformen wie Facebook, LinkedIn oder WhatsApp fest.
Twitter Cards: Erfüllen denselben Zweck speziell für die Darstellung auf X (ehemals Twitter).

Gut gepflegte Social-Media-Tags sorgen dafür, dass geteilte Links ansprechend aussehen, was die Klickbereitschaft deutlich erhöht.

Einfluss auf die Ladegeschwindigkeit

Der Head spielt auch bei der Performance einer Webseite eine Rolle:

async und defer: Diese Attribute beim Einbinden von JavaScript sorgen dafür, dass Skripte das Laden der Seite nicht blockieren, was die Ladezeit verbessert.
preload und prefetch: Über <link rel="preload"> lassen sich wichtige Ressourcen wie Schriftarten frühzeitig laden, was sich positiv auf die Core Web Vitals auswirkt.

Hinweis für WordPress-Nutzer

Bei WordPress und ähnlichen Systemen wird der Head automatisch generiert. Für die Pflege von Titel, Meta Description und Social-Media-Tags muss man nicht im Code arbeiten. SEO-Plugins wie Yoast SEO, SEOPress, Rank Math oder The SEO Framework stellen dafür komfortable Eingabefelder bereit und übernehmen die technische Einbindung im Hintergrund.

Hinweis zu Meta Keywords

Das früher verbreitete <meta name="keywords">-Tag wird von Google seit vielen Jahren ignoriert und hat heute keinen Einfluss mehr auf das Ranking. Es muss nicht mehr gepflegt werden.

Fazit

Der Head ist das unsichtbare Steuerzentrum jeder Webseite. Hier werden zentrale SEO-Elemente wie Seitentitel und Meta Description festgelegt, die Darstellung auf Mobilgeräten und in sozialen Netzwerken gesteuert und wichtige Weichen für die Ladegeschwindigkeit gestellt. Wer diese Elemente sorgfältig pflegt, legt eine solide Grundlage für gute Sichtbarkeit und eine professionelle Außenwirkung in Suchergebnissen und auf Social Media.