html-einfach.de

Semantisches HTML · Grundlagen & Struktur

Dokument-Metadaten: head, meta & link

Von Zuletzt geändert am

Der <head> ist der unsichtbare Maschinenraum jeder Seite. Hier steht nichts, was man liest – aber alles, was Browser, Suchmaschinen und soziale Netze brauchen, um die Seite korrekt zu verarbeiten. Ein paar Zeilen entscheiden über Zeichensatz, mobile Darstellung, Sprache und das Aussehen in der Suche.

Das Pflichtprogramm

Zwei <meta>-Angaben gehören in jeden <head> – und ganz nach oben:

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Seitentitel | Marke</title>
  <meta name="description" content="Kurze, einzigartige Beschreibung der Seite." />
</head>
  • charset="utf-8" stellt die korrekte Zeichenkodierung sicher (Umlaute, Emojis). Sie gehört an den Anfang, bevor Text geparst wird.
  • viewport sorgt für die richtige Skalierung auf Mobilgeräten. Ohne sie wirkt die Seite winzig oder verzoomt. Wichtig: kein user-scalable=no – das sperrt das Pinch-Zoom aus.

Title & Description

<title> und die Meta-Description sind dein Auftritt in der Suche. Wie du sie schreibst – Länge, Aufbau, Einzigartigkeit – behandelt die eigene Seite Title-Tag & Meta-Description. Merkregel hier: pro Seite einzigartig.

Die Sprache: lang am html-Element

Genau genommen kein <head>-Inhalt, aber Teil des Dokument-Setups: Das lang-Attribut am <html> sagt Browsern und Screenreadern, in welcher Sprache die Seite ist – damit die Aussprache stimmt.

<html lang="de">

<link> verknüpft die Seite mit externen Ressourcen und Beziehungen:

<link rel="stylesheet" href="/styles.css" />
<link rel="canonical" href="https://example.de/seite.html" />
<link rel="icon" href="/favicon.ico" sizes="any" />
  • rel="stylesheet" bindet CSS ein.
  • rel="canonical" benennt die maßgebliche URL gegen Duplicate Content.
  • rel="icon" liefert das Favicon.
  • rel="preload" lädt kritische Ressourcen (z. B. die wichtigste Schrift) früh – ein Hebel für LCP.

Randnotiz – eine Quelle für mehrere Ausgaben. Der <head> ist auch die Heimat der Open-Graph-Tags und des JSON-LD. Wer diese Angaben aus einer zentralen Datenquelle erzeugt, hält Titel, Vorschaubild und strukturierte Daten automatisch konsistent – genau so macht es diese Website.

Häufige Fehler

  • viewport vergessen – die Seite ist auf dem Smartphone unbrauchbar.
  • charset fehlt oder steht zu spät – kaputte Umlaute.
  • lang nicht gesetzt – Screenreader sprechen die Seite falsch aus.
  • Gleicher <title> auf vielen Seiten.
  • user-scalable=no im Viewport – ein Barriere-Verstoß.

Häufige Fragen

Welche Meta-Tags brauche ich wirklich?

charset und viewport sind Pflicht, title und description praktisch immer. Vieles andere (keywords-Meta etwa) ist überflüssig – Google ignoriert das Keywords-Tag seit Langem.

Gehört das lang-Attribut nicht woanders hin?

Es steht am <html>-Element, nicht im <head>. Da es zum grundlegenden Dokument-Setup gehört, behandle ich es hier mit.

So viele wie nötig: Stylesheet, Canonical, Icon, ggf. Preload und alternative Sprachen. Kein Ballast, aber das Wichtige vollständig.

Fazit

Der <head> ist klein, aber folgenreich: charset und viewport als Pflicht, Title und Description für die Suche, lang am <html> für die Aussprache und <link> für Stylesheet, Canonical, Icon und Preload. Unsichtbar – aber die Grundlage dafür, dass Browser, Suchmaschinen und soziale Netze die Seite richtig verstehen.