mitmario.dev

<meta>

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.

Steckbrief <meta>
Kategorie
Meta & Scripting
Art
Leeres Element
Attribute
5
Beispiele
3
Browser
4 von 4
E-Mail
0 von 4
Stand
03.02.2026

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

5 Attribute
Attribut und Beispiel Beschreibung
charset String
charset="UTF-8"
Definiert die Zeichenkodierung des Dokuments. Sollte immer UTF-8 sein.
name String
name="description"
Name des Metadaten-Typs (z.B. description, viewport, author). Wird zusammen mit content verwendet.
content String
content="Eine tolle Webseite"
Der Wert der Metadaten. Wird zusammen mit name, http-equiv oder property verwendet.
http-equiv String
http-equiv="refresh"
Simuliert HTTP-Header (z.B. refresh, content-type). Veraltet für die meisten Anwendungsfälle.
property String
property="og:title"
Wird für Open Graph und andere RDFa-basierte Metadaten verwendet (z.B. og:title).

Wichtige Meta-Tags

Diese Meta-Tags solltest du in fast jeder Webseite verwenden:

TypBeispielBeschreibung
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

3 Beispiele
index.html
Standard-Setup für jede Webseite
<!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>

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=no oder maximum-scale=1 deaktivieren 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.
  • description fü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

5 Fehler
01 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.
02 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.
03 Doppelte Meta-Tags
Mehrere <meta name="description"> auf einer Seite verwirren Suchmaschinen. Jeder Meta-Tag sollte nur einmal vorkommen.
04 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.
05 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

4 von 4

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.

  • Chrome

    Komplett

  • Firefox

    Komplett

  • Safari

    Komplett

  • Edge

    Komplett

Email-Kompatibilität

0 von 4

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.

  • Gmail

    Keine

  • Outlook

    Keine

  • Apple Mail

    Keine

  • Thunderbird

    Keine

Newsletter

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

Danach kommt eine Mail mit Bestätigungslink, erst dann bist du eingetragen. Abmelden geht unten in jeder Ausgabe. Mehr dazu in der Datenschutzerklärung.