Twitter Card

Definition: Twitter Cards (heute X Cards) sind Meta-Tags im HTML-<head> einer Seite, die bestimmen wie ein geteilter Link auf X (ehemals Twitter) als visuelle Vorschau (Card) erscheint. Der wichtigste Tag ist twitter:card der den Card-Typ definiert: summary_large_image (großes Bild + Titel + Beschreibung), summary (kleines Vorschaubild), app (App-Store-Karte) oder player (Video/Audio). Weitere Tags: twitter:title, twitter:description, twitter:image, twitter:creator, twitter:site. X greift bei fehlenden twitter:-Tags auf Open-Graph-Tags (og:title, og:description, og:image) als Fallback zurück – was bedeutet dass korrekte OGP-Implementierung ausreicht wenn kein separates Twitter-Targeting nötig ist. Im Marketing-Kontext sind Twitter Cards relevant für Content-Distribution, B2B-Marketing auf X und organische Reichweite durch Shares.

Erläuterung

Twitter Cards und Open Graph Protocol überlappen stark – beide steuern Link-Previews in sozialen Netzwerken. Der Hauptunterschied: Twitter Cards sind spezifisch für X/Twitter und erlauben einige X-spezifische Features (App Cards, Player Cards) die OGP nicht unterstützt. Für die meisten Websites reicht korrektes OGP als Basis – Twitter-spezifische Tags nur wenn X-Traffic relevant und ein spezifisches Twitter-Image-Format gewünscht ist.

Twitter-Card-Typen

summary_large_image: Häufigster Typ; großes Querformat-Bild über dem Titel; Bild: 1200×628px; min. 300×157px; max. 5 MB; JPG oder PNG; Bildinhalt darf nicht hauptsächlich Text sein; zeigt twitter:title und twitter:description unter dem Bild; Standard für Artikel, Landingpages, Produktseiten
summary: Kleines quadratisches Vorschaubild links; Titel und Beschreibung rechts daneben; Bild: 144×144px minimum, 4096×4096px maximum; für kurze Inhalte oder wenn großes Bild nicht verfügbar ist; weniger auffällig in Timeline als summary_large_image
app: Speziell für App-Downloads; zeigt App-Name, Rating, Preis, Beschreibung; Links zu App Store (iOS) und Google Play; twitter:app:id:iphone + twitter:app:id:googleplay; für Mobile-App-Marketing-Seiten
player: Einbettbarer Video- oder Audio-Player direkt im Tweet; twitter:player als iFrame-URL; twitter:player:width + twitter:player:height; erfordert HTTPS; selten genutzt; für Podcast-Sites, Video-Plattformen

Twitter-Card-Tags und OGP-Fallback

Fallback-Logik: X liest twitter:-Tags; wenn twitter:title fehlt → og:title als Fallback; wenn twitter:description fehlt → og:description; wenn twitter:image fehlt → og:image; twitter:card hat keinen OGP-Fallback – dieser Tag muss immer explizit gesetzt sein; ohne twitter:card: kein Rich-Preview
Empfohlene Minimal-Implementierung: <meta name="twitter:card" content="summary_large_image"> + korrektes OGP (og:title, og:description, og:image, og:url); reicht für die meisten Sites; separates twitter:image nur wenn anderes Bildformat als og:image gewünscht
twitter:creator und twitter:site: twitter:creator: X-Handle des Autors (@benutzername); twitter:site: X-Handle der Website/Marke; werden im Card-Footer angezeigt; Attribution für Content-Creator; für Medien- und Blog-Seiten sinnvoll; für E-Commerce optional

Debugging und Testing

X Card Validator: cards-dev.twitter.com/validator (kann variieren – aktuellen Link prüfen); URL eingeben → zeigt Card-Preview; Cache-Invalidierung durch erneutes Einreichen; benötigt X-Login; zeigt Tag-Parsing und eventuelle Fehler; Pflicht vor Kampagnen-Launch auf X
OpenGraph.xyz als Alternative: Zeigt Twitter Card Preview ohne X-Login; schneller für Quick-Checks; zeigt Preview für Twitter, Facebook, LinkedIn gleichzeitig; kein Caching-Problem wie beim X Card Validator
Häufige Probleme: twitter:card nicht gesetzt → Standard-Link ohne Card; Bild zu klein (unter 300×157px) → Card wird nicht angezeigt; Bild-URL nicht erreichbar (404, kein HTTPS) → leere Card; twitter:image mit Großbuchstaben-Extension (.PNG statt .png) kann Probleme verursachen; Bild zu groß (>5 MB) → Card ohne Bild

Marketing-Anwendungsfälle auf X

Content-Distribution: Blog-Artikel und Studien mit summary_large_image; Bild mit Headlines im Header erhöht CTR; Twitter-spezifisches Bild mit weniger Text als LinkedIn-Bild; organische Shares zeigen immer Card → konsistentes Branding wichtig
B2B-Marketing: X (Twitter) für B2B noch relevant (Tech, Marketing, Finance); Artikel-Cards für Thought-Leadership-Content; twitter:creator/@autor-Handle für Personal-Branding-Amplifikation; Retweet-Rate als Proxy für Content-Resonanz
Kampagnen-Landingpages: Separates twitter:image für X-spezifisches Creative wenn OGP-Bild für andere Plattformen optimiert ist; 2:1-Seitenverhältnis für summary_large_image (1200×628px); keine Überladung mit Text im Bild (X-Policy: max. 20 % Text empfohlen)

Praxistipp: Setzen Sie <meta name="twitter:card" content="summary_large_image"> auf allen Content-Seiten und verlassen Sie sich für Titel, Beschreibung und Bild auf Ihre OGP-Tags (og:title, og:description, og:image). Das minimiert Implementierungsaufwand bei vollständiger X-Card-Unterstützung. Testen Sie mit OpenGraph.xyz ob die Card korrekt erscheint. Separates twitter:image nur wenn Sie für X ein Format-spezifisches Bild (2:1-Ratio vs. Facebook 1.91:1) verwenden wollen. Bei aktivem X-Marketing: twitter:site und twitter:creator setzen für Attribution in Cards.