English
HTML, Mobile & Barrierefreiheit

HTML-Head

Auch genannt: <head>, head-Element

Der HTML-Head, im Code das Element <head>, enthält die Metadaten eines HTML-Dokuments. Er steht als erstes Kind von <html> vor dem <body> und wird nicht als Seiteninhalt angezeigt. Browser, Suchmaschinen und andere Programme lesen daraus Angaben wie Seitentitel, Zeichensatz oder verknüpfte Dateien.

Was gehört in den Head?

Laut MDN darf ein Dokument nur einen <head> haben. Erlaubt sind Elemente der Metadaten-Kategorie: <title>, <meta>, <link>, <style>, <script>, <base>, <noscript> und <template>. Das <title> ist verpflichtend und darf nur einmal vorkommen, <base> höchstens einmal. SELFHTML empfiehlt, die Zeichenkodierung als erstes Element zu nennen.

Vom <header>-Element ist der Head zu unterscheiden. <header> ist ein sichtbarer Bereich im Body, etwa mit Logo und Navigation.

Was wertet Google im Head aus?

Google listet auf einer eigenen Seite die unterstützten Angaben. Dazu zählen description für Snippets, robots und googlebot für Crawling und Indexierung, viewport für die mobile Darstellung, charset sowie google-site-verification für die Search Console. Nicht unterstützt wird unter anderem das keywords-Meta-Tag. Zudem soll der Head gültiges HTML enthalten.

Beispiel

HTML
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Schuhe kaufen | Beispiel Shop</title>
    <meta name="description" content="Laufschuhe, Wanderschuhe und Sneaker mit Versand in 2 Tagen.">
    <link rel="canonical" href="https://www.example.com/schuhe/">
  </head>
  <body>…</body>
</html>

Häufige Fehler

  • Mehrere <title>-Elemente. MDN erlaubt genau eines.
  • Ungültiges Markup im Head. Google verlangt gültigen HTML-Code in diesem Bereich.
  • Meta-Keywords pflegen. Google wertet das Tag nicht aus.

Häufige Fragen

Ist der Head Pflicht? Ein <title> im Head ist laut MDN verpflichtend. Start- und End-Tag des Heads dürfen unter bestimmten Bedingungen weggelassen werden.

Worin unterscheiden sich head und header? <head> enthält Metadaten und ist unsichtbar, <header> ist ein sichtbarer Bereich im Body.

Quellen

  1. <head>: Das Dokument-Metadaten-Element – MDN Web Docsdeveloper.mozilla.org
  2. Von Google unterstützte Meta-Tags und Attribute – Google Search Centraldevelopers.google.com
  3. head – SELFHTMLwiki.selfhtml.org

Stand: