HTML <meta>-Tag

Der <meta>-Tag trägt Metadaten — Informationen über die Seite, nicht den darauf angezeigten Inhalt. Browser, Suchmaschinen und soziale Netzwerke lesen diese Metadaten, um zu entscheiden, wie die Seite gerendert, indexiert und beim Teilen angezeigt werden soll. Nichts innerhalb eines <meta>-Elements erscheint auf der Seite selbst.

Ein Dokument kann mehrere <meta>-Tags enthalten, und fast jede moderne Seite benötigt mindestens ein paar davon (Zeichenkodierung und viewport). Alle <meta>-Tags befinden sich im <head>-Element, zusammen mit den Tags <title> und <link>.

Diese Seite behandelt die Meta-Tags, die Sie täglich verwenden werden: Kodierung, den viewport, die SEO-description, die http-equiv-Header-Simulation sowie die Open Graph- und Twitter-Tags, die steuern, wie Links beim Teilen aussehen.

Syntax

Der <meta>-Tag ist ein void-Element — er hat keinen Inhalt und kein schließendes Tag. In XHTML muss er selbstschließend sein (<meta />).

Ein <meta>-Tag verwendet eines von zwei Mustern:

Ein name/content-Paar (oder property/content für Open Graph) — name gibt die Art der Metadaten an, content enthält ihren Wert.
Ein eigenständiges charset-Attribut oder ein http-equiv/content-Paar, das einen HTTP-Antwort-Header simuliert.

Das Attribut content muss angegeben werden, wenn name oder http-equiv vorhanden ist. Das content-Attribut wird nicht zusammen mit charset verwendet.

Zeichenkodierung: `<meta charset>`

Dieser Tag teilt dem Browser mit, welche Zeichenkodierung beim Dekodieren des Dokuments verwendet werden soll. Er sollte das erste Element innerhalb des <head> sein und immer UTF-8 verwenden:

<meta charset="UTF-8">

Warum UTF-8? Es kann jedes Zeichen in jeder Sprache darstellen — Akzente, Emoji, Währungssymbole, CJK-Schriften — mit einer einzigen universellen Kodierung. Ohne eine deklarierte (oder korrekt erkannte) Kodierung können Zeichen wie é, — oder " zu unlesbarem "Mojibake" werden. UTF-8 ist die Kodierung des modernen Webs; der HTML-Standard schreibt sie für neue Dokumente vor.

Platzieren Sie ihn frühzeitig, damit der Browser die Kodierung kennt, bevor er einen Text verarbeitet.

Der viewport-Meta-Tag

Der viewport-Tag macht eine Seite auf Smartphones und Tablets responsiv. Ohne ihn nehmen mobile Browser an, die Seite sei für einen Desktop gebaut, und rendern sie bei etwa 980px Breite, dann verkleinern sie das Ergebnis — was zu winzigem, herausgezoomten Text führt. Fügen Sie diesen Tag hinzu und die Seite passt sich an das Gerät an:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Was jeder Teil bewirkt:

width=device-width — setzt den Layout-viewport auf die eigene Breite des Geräts (z. B. 390px auf einem Smartphone) statt auf eine künstliche Desktop-Breite von 980px.
initial-scale=1.0 — startet mit einem Zoomfaktor von 1:1, sodass ein CSS-Pixel beim Laden einem geräteunabhängigen Pixel entspricht.

Diese einzelne Zeile ist für jede Website erforderlich, die auf Mobilgeräten gut aussehen soll. Vermeiden Sie user-scalable=no oder ein maximum-scale unter 5 — es blockiert das Pinch-Zoom und beeinträchtigt die Barrierefreiheit für sehbehinderte Nutzer.

SEO: der `description`-Meta-Tag

Die description ist die Zusammenfassung, die Suchmaschinen häufig unter dem Seitentitel in den Suchergebnissen anzeigen, und auf die soziale Plattformen zurückgreifen. Streben Sie einen prägnanten, überzeugenden Satz mit etwa 150–160 Zeichen an — längerer Text wird mit Auslassungspunkten abgeschnitten.

<meta name="description" content="Learn how the HTML meta tag controls encoding, the viewport, SEO, and social sharing — with copy-paste examples.">

Die description verbessert nicht direkt die Rankings, aber eine klare, relevante Zusammenfassung erhöht die Klickrate auf der Ergebnisseite.

Weitere `name`/`content`-Werte

Das name-Attribut benennt die Art der Metadaten; content enthält ihren Wert. Häufige Werte:

<!-- Author of the page -->
<meta name="author" content="Jane Doe">

<!-- Software that generated the page -->
<meta name="generator" content="Next.js">

<!-- Control how search engines crawl and index this page -->
<meta name="robots" content="index, follow">
<!-- ...or keep a page out of search results -->
<meta name="robots" content="noindex, nofollow">

<!-- Tint the mobile browser UI to match your brand -->
<meta name="theme-color" content="#10b981">

<!-- Limit the referrer information sent to other sites -->
<meta name="referrer" content="strict-origin-when-cross-origin">

Hinweis: Der keywords-Meta-Tag (<meta name="keywords" content="…">) wird von allen wichtigen Suchmaschinen heute ignoriert und kann getrost weggelassen werden. Das alte scheme-Attribut wurde in HTML5 entfernt und sollte nicht verwendet werden.

HTTP-Header simulieren: `http-equiv`

Das http-equiv-Attribut ermöglicht es einem <meta>-Tag, als Ersatz für einen HTTP-Antwort-Header zu dienen. Die häufigsten Werte:

<!-- Declare the content type and encoding (legacy alternative to charset) -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Auto-refresh the page every 60 seconds -->
<meta http-equiv="refresh" content="60">

<!-- ...or redirect to another URL after 3 seconds -->
<meta http-equiv="refresh" content="3; url=https://www.w3docs.com">

Hinweis zur Barrierefreiheit: Vermeiden Sie http-equiv="refresh". Eine Seite, die sich automatisch aktualisiert oder weiterleitet, kann Nutzer desorientieren, Screenreader unterbrechen und Menschen behindern, die mehr Zeit zum Lesen benötigen — dies verstößt gegen die Erfolgskriterien von WCAG. Bevorzugen Sie eine echte serverseitige HTTP-Weiterleitung oder einen sichtbaren Link, den der Nutzer anklickt.

Soziales Teilen: Open Graph und Twitter Cards

Wenn jemand Ihren Link auf Facebook, LinkedIn, Slack oder X teilt, lesen diese Plattformen Open Graph-Tags, um die Vorschaukarte (Titel, Zusammenfassung, Bild) zu erstellen. Open Graph-Tags verwenden das property-Attribut statt name:

<meta property="og:title" content="HTML meta Tag — Full Guide">
<meta property="og:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">
<meta property="og:url" content="https://www.w3docs.com/learn-html/html-meta-tag.html">
<meta property="og:type" content="website">

X (Twitter) legt eigene Tags darüber, die name verwenden:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML meta Tag — Full Guide">
<meta name="twitter:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta name="twitter:image" content="https://www.w3docs.com/images/meta-preview.png">

Geben Sie eine absolute og:image-URL an (ca. 1200×630px), damit Vorschauen ein großes, scharfes Bild anzeigen und kein winziges Thumbnail oder gar keines.

Ein vollständiges `<head>`-Beispiel

So passen diese Tags in einem echten Dokument zusammen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML meta Tag — Full Guide</title>
    <meta name="description" content="Encoding, viewport, SEO, and social meta tags explained with copy-paste examples.">
    <meta name="author" content="Jane Doe">
    <meta name="theme-color" content="#10b981">

    <!-- Open Graph -->
    <meta property="og:title" content="HTML meta Tag — Full Guide">
    <meta property="og:description" content="Everything the meta tag controls, with examples.">
    <meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">

    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Page content goes here</h1>
  </body>
</html>

Attribute

Attribut	Wert	Beschreibung
`charset`	character_set	Definiert die Zeichenkodierung des Dokuments (verwenden Sie `UTF-8`).
`content`	text	Definiert den Wert der Attribute `name`, `property` oder `http-equiv`.
`http-equiv`	content-type, default-style, refresh	Simuliert einen HTTP-Antwort-Header und bestimmt dessen Verarbeitung.
`name`	application-name, author, description, generator, keywords, robots, theme-color, referrer, viewport	Benennt die in `content` enthaltenen Metadaten.
`property`	og:title, og:description, og:image, …	Benennt eine Open Graph-Eigenschaft (wird von sozialen Plattformen verwendet).

Der <meta>-Tag unterstützt außerdem die Globalen Attribute und die Event-Attribute.

Übung

Was ist der Zweck eines Meta-Tags in HTML?

Er stellt Metadaten über das HTML-Dokument bereit, z. B. Zeichensatz, Beschreibung und viewport-Einstellungen.Er zeigt den Webseiteninhalt für den Nutzer an.Er ist der Hauptcontainer für sichtbare Seitenelemente.Er wird verwendet, um Bilder auf der Webseite anzuzeigen.

Syntax

Zeichenkodierung: <meta charset>

Der viewport-Meta-Tag

SEO: der description-Meta-Tag

Weitere name/content-Werte

HTTP-Header simulieren: http-equiv