Twitter- / X-Card-Tags ergänzen

Was diese Prüfung macht

Scannt den <head> der Seite nach <meta name="twitter:card" content="…"> und (wo zutreffend) twitter:image, twitter:title, twitter:description und twitter:site. Die Prüfung fällt durch, wenn kein twitter:card vorhanden ist und X auf eine kleinere Vorschau — oder gar keine Vorschau — zurückfallen muss.

Warum es wichtig ist

X (ehemals Twitter) rendert gepostete URLs in einem von drei Vorschau-Formaten:

summary_large_image — eine vollbreite Bildkarte mit Titel und Beschreibung darunter. Das hochkonvertierende Format, das jede Marke will.
summary — eine kleine Thumbnail-Karte. Standard, wenn kein twitter:card gesetzt ist, aber Open-Graph-Tags vorhanden sind.
Gar keine Karte — eine nackte URL, keine Vorschau. Tritt ein, wenn weder OG- noch Twitter-Tags vorhanden sind.

Eine summary_large_image-Karte erzielt deutlich mehr Shares und Klicks als ein summary; beide schlagen die nackte URL klar. Der Unterschied ist ein einziger Meta-Tag.

Wie du es behebst

Setze vier Meta-Tags in den <head>. Drei davon können deine Open-Graph-Tags spiegeln — X greift auf OG zurück, wenn Twitter-Pendants fehlen, aber explizite Twitter-Tags lassen dich bei Bedarf ein anderes Bild für X setzen:

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@metricspot">
  <meta name="twitter:title" content="Kostenloses SEO-Audit in 60 Sekunden — MetricSpot">
  <meta name="twitter:description" content="Sieh, was KI-Agenten und Google auf deiner Site sehen. 91 Prüfungen, ohne Anmeldung.">
  <meta name="twitter:image" content="https://metricspot.com/og/home.png">
</head>

Das Minimum ist twitter:card. Hat deine Seite bereits Open-Graph-Kern-Tags, liest X von dort Titel, Beschreibung und Bild. Das einzelne twitter:card-Tag sagt X, dass die Großbild-Variante gerendert werden soll statt eines kleinen Thumbnails.

Bildregeln (dieselben wie für das OG-Bild):

1200×630 (2:1) oder breiter — Minimum 300×157, Maximum 5 MB.
PNG oder JPG. WEBP funktioniert auf den meisten Plattformen, der Renderer von X war hier aber inkonsistent — bleib bei PNG/JPG.
Größen- und Generierungsdetails auf der eigenen Seite Open-Graph-Bild.

Astro / Next.js — aus Frontmatter neben OG generieren:

---
const { title, description, ogImage, twitterHandle = "@metricspot" } = Astro.props;
---
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content={twitterHandle} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={new URL(ogImage, Astro.site).href} />

WordPress — Yoast SEO, Rank Math und SEOPress liefern Twitter-Card-Tags automatisch. In Yoast: SEO → Soziale Netzwerke → Twitter → „Twitter-Card-Metadaten hinzufügen” → An.

Wichtige Card-Typen.

summary_large_image — was du in 95 % der Fälle willst.
summary — kleines Thumb plus Text. Sinnvoll für sehr textlastige Posts, bei denen das Bild nicht im Mittelpunkt steht.
player — eingebetteter Video-/Audio-Player. Nische; braucht ein X-Whitelisting.
app — bewirbt einen Mobile-App-Install. Nutzt die App-Store-ID-Felder.

Der alte Card Validator wurde 2023 abgeschaltet. Zum Verifizieren poste die URL als Entwurf (ohne zu veröffentlichen) — X zeigt dir die gerenderte Karte — oder nutze ein Drittanbieter-Tool wie opengraph.xyz, das Twitter- und OG-Vorschauen rendert.

Häufig gestellte Fragen

Brauche ich sowohl Open-Graph- als auch Twitter-Card-Tags?

X greift auf Open Graph zurück, wenn keine Twitter-Tags vorhanden sind, also liefert OG allein bereits eine Karte — aber nur eine kleine. Für das Großbild-Layout brauchst du mindestens <meta name="twitter:card" content="summary_large_image">. Alles andere kann auf OG zurückfallen.

Meine Karten-Vorschau ist kaputt — wie aktualisiere ich sie?

X cached Vorschau-Scrapes bis zu 7 Tage. Der Cache wird ungültig, wenn du die kanonische URL änderst oder der gecachte Eintrag abläuft. Ein öffentliches „Refresh”-Tool gibt es nicht mehr — der Workaround ist, einmal einen Cache-Buster-Query-Parameter (?v=2) anzuhängen, die gebuste URL einmal zu posten und danach wieder zur sauberen URL zu wechseln.

Was ist mit Mastodon, Bluesky, LinkedIn?

Alle nutzen Open Graph, keine Twitter Cards. Wenn OG sauber ist, rendern sie automatisch korrekt. Siehe Open-Graph-Kern-Tags und Open-Graph-Bild.