<meta>
Zuletzt aktualisiert am 3. Februar 2026
Das <meta>-Element ist das Schweizer Taschenmesser für Metadaten in HTML. Es transportiert Informationen über deine Webseite, die zwar für Besucher unsichtbar bleiben, aber für Browser, Suchmaschinen und Social-Media-Plattformen extrem wichtig sind.
Grundlagen
Meta-Tags leben immer im <head>-Bereich und sind für normale Besucher unsichtbar. Sie werden von Browsern gelesen, um die Seite korrekt darzustellen, von Suchmaschinen für SEO und Snippets verarbeitet und von Social-Media-Plattformen verwendet, um schöne Link-Vorschauen zu generieren.
Das <meta>-Element ist ein void element (selbstschließendes Element): Es hat keinen Inhalt und wird nicht geschlossen. Die Informationen stecken komplett in den Attributen.
Syntax
<meta charset="UTF-8">Attribute
| Attribut | Typ | Beschreibung | Beispiel |
|---|---|---|---|
charset | String | Definiert die Zeichenkodierung des Dokuments. Sollte immer UTF-8 sein. | charset="UTF-8" |
name | String | Name des Metadaten-Typs (z.B. description, viewport, author). Wird zusammen mit content verwendet. | name="description" |
content | String | Der Wert der Metadaten. Wird zusammen mit name, http-equiv oder property verwendet. | content="Eine tolle Webseite" |
http-equiv | String | Simuliert HTTP-Header (z.B. refresh, content-type). Veraltet für die meisten Anwendungsfälle. | http-equiv="refresh" |
property | String | Wird für Open Graph und andere RDFa-basierte Metadaten verwendet (z.B. og:title). | property="og:title" |
Wichtige Meta-Tags
Diese Meta-Tags solltest du in fast jeder Webseite verwenden:
| Typ | Beispiel | Beschreibung |
|---|---|---|
| charset | <meta charset="UTF-8"> | Zeichenkodierung, immer UTF-8 verwenden |
| viewport | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | Responsive Design, essentiell für mobile Geräte |
| description | <meta name="description" content="Kurze Beschreibung"> | SEO-Beschreibung für Suchergebnisse (max 160 Zeichen) |
| robots | <meta name="robots" content="index, follow"> | Steuert Suchmaschinen-Crawling |
| author | <meta name="author" content="Mario"> | Name des Autors |
| og:title | <meta property="og:title" content="Seitentitel"> | Open Graph Titel für Social Media |
| og:description | <meta property="og:description" content="Beschreibung"> | Open Graph Beschreibung |
| og:image | <meta property="og:image" content="bild.jpg"> | Open Graph Bild (Link-Vorschau) |
| og:type | <meta property="og:type" content="website"> | Open Graph Typ (website, article, etc.) |
| twitter:card | <meta name="twitter:card" content="summary_large_image"> | Twitter Card Format |
| twitter:title | <meta name="twitter:title" content="Titel"> | Twitter-spezifischer Titel |
Beispiele
Basis-Meta-Tags
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Lerne HTML und werde zum Web-Entwickler.">
<meta name="author" content="Mario">
<title>Meine Webseite</title>
</head>
<body>
<h1>Willkommen!</h1>
</body>
</html>Open Graph Tags für Social Media
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta property="og:title" content="Programmieren mit Mario">
<meta property="og:description" content="Lerne Webentwicklung mit praxisnahen Tutorials.">
<meta property="og:image" content="https://mitmario.dev/og-image.jpg">
<meta property="og:type" content="website">
<meta property="og:url" content="https://mitmario.dev">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Programmieren mit Mario">
<meta name="twitter:description" content="Lerne Webentwicklung mit praxisnahen Tutorials.">
<meta name="twitter:image" content="https://mitmario.dev/og-image.jpg">
<title>Programmieren mit Mario</title>
</head>
<body>
<h1>Willkommen!</h1>
</body>
</html>Robots-Meta
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex, nofollow">
<title>Private Seite</title>
</head>
<body>
<h1>Diese Seite soll nicht in Suchmaschinen erscheinen</h1>
</body>
</html>Barrierefreiheit
Einige Meta-Tags haben direkten Einfluss auf die Barrierefreiheit:
- Viewport und Zoom: Das
viewport-Meta-Tag steuert, ob Nutzer die Seite zoomen können.user-scalable=noodermaximum-scale=1deaktivieren den Zoom, das ist ein häufiger Barrierefreiheits-Fehler. Viele Nutzer mit Sehbeeinträchtigung vergrößern Inhalte über die Zoom-Funktion. Verwende stattdessen<meta name="viewport" content="width=device-width, initial-scale=1.0">ohne Zoom-Einschränkungen. descriptionfür Screenreader: Die Meta-Beschreibung wird in Suchergebnissen angezeigt und von Screenreadern vorgelesen. Sie gibt Nutzern eine Vorschau auf den Seiteninhalt, bevor sie die Seite öffnen.theme-color: Mit<meta name="theme-color">kannst du die Farbe der Browser-Adressleiste auf Mobilgeräten setzen. Achte auf ausreichenden Kontrast zwischen der gewählten Farbe und dem weißen Text in der Adressleiste.color-scheme: Das Meta-Tag<meta name="color-scheme" content="light dark">informiert den Browser, dass die Seite sowohl helles als auch dunkles Farbschema unterstützt. Das hilft Nutzern, die aus medizinischen Gründen auf Dark Mode angewiesen sind.
Häufige Fehler
Viewport vergessen: Ohne <meta name="viewport" content="width=device-width, initial-scale=1.0"> ist deine Seite auf mobilen Geräten nicht responsive. Der Browser zeigt dann die Desktop-Version winzig klein an.
Description zu lang: Google schneidet Meta-Descriptions nach etwa 160 Zeichen ab. Halte sie kurz und knackig, damit sie in den Suchergebnissen vollständig angezeigt wird.
Doppelte Meta-Tags: Mehrere <meta name="description"> auf einer Seite verwirren Suchmaschinen. Jeder Meta-Tag sollte nur einmal vorkommen.
Charset nicht an erster Stelle: Das <meta charset="UTF-8"> sollte eines der ersten Elemente im <head> sein, damit der Browser sofort weiß, wie er die Zeichen interpretieren muss.
Open Graph ohne absolute URLs: Bei og:image und og:url musst du absolute URLs verwenden (https://...), sonst können Social-Media-Plattformen die Bilder nicht laden.
Browser-Kompatibilität
Das meta-Element wird von allen modernen Browsern vollständig unterstützt. Auch ältere Browser interpretieren die wichtigsten Meta-Tags wie charset und viewport korrekt.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Chrome | Komplett | — |
| Firefox | Komplett | — |
| Safari | Komplett | — |
| Edge | Komplett | — |
Email-Kompatibilität
Meta-Tags im head werden von E-Mail-Clients komplett ignoriert oder entfernt. E-Mails verwenden inline-Styles statt Meta-Tags für viewport und andere Einstellungen.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Gmail | Keine | — |
| Outlook | Keine | — |
| Apple Mail | Keine | — |
| Thunderbird | Keine | — |
Verwandte Elemente
Bleib auf dem Laufenden
Erhalte neue Inhalte direkt in dein Postfach
Was erwartet dich?
Neue Artikel & Videos
Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.
Plattform & Kurs-Updates
Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.
Einmal die Woche in deinem Postfach
Kurz, auf den Punkt, kein Spam.