Twitter Cards einrichten — Vorschauen auf X optimieren
Twitter (X) nutzt eigene Meta-Tags für Link-Vorschauen, die sogenannten Twitter Cards. Mit dem richtigen Card-Typ und optimierten Texten und Bildern lassen sich Links auf Twitter deutlich aufmerksamkeitsstärker darstellen. Der WikiPlus Open-Graph-Vorschau-Tool zeigt, wie Links auf Twitter aussehen werden — damit Probleme vor dem ersten Tweet behoben werden können.
Twitter Card Typen im Überblick
Twitter bietet verschiedene Card-Typen für unterschiedliche Inhaltstypen. summary: Die kompakteste Card — kleine Bildvorschau links, Titel und kurze Beschreibung rechts. Geeignet für allgemeine Webseiten und Blog-Posts. summary_large_image: Großes Querformat-Bild oben, Titel und Beschreibung darunter. Deutlich auffälliger als summary, daher für Marketing-Inhalte, Artikel und Landingpages empfohlen. app: Zeigt App-Informationen mit Download-Button — für iOS- und Android-App-Bewerbungen. player: Ermöglicht Video- oder Audio-Wiedergabe direkt in der Card — für Mediendienste. Für die meisten Websites ist summary_large_image die beste Wahl, da sie visuell dominanter ist und mehr Klicks erzeugt. Die Konfiguration: <meta name='twitter:card' content='summary_large_image'>. Der WikiPlus OG-Preview-Tool zeigt die Darstellung beider Haupttypen.
Twitter Card Metadaten: Was man setzen sollte
Für eine vollständige Twitter Card Implementierung sollten folgende Tags gesetzt werden. twitter:card: Pflichtfeld, definiert den Card-Typ. twitter:site: @Username des Website/Unternehmens-Twitter-Accounts (optional, aber empfohlen für Branding). twitter:creator: @Username des Autors (relevant für Artikel und Blog-Posts). twitter:title: Seitentitel für die Card — wenn nicht gesetzt, wird og:title verwendet. Optimal: 70 Zeichen. twitter:description: Beschreibungstext — wenn nicht gesetzt, wird og:description verwendet. Optimal: 200 Zeichen. twitter:image: Bild-URL — wenn nicht gesetzt, wird og:image verwendet. Empfohlen: 1200x628 px, maximal 5 MB, JPG, PNG, WEBP oder GIF. twitter:image:alt: Alt-Text für das Bild — wichtig für Barrierefreiheit. Wenn og:-Tags bereits korrekt gesetzt sind, reicht für viele Seiten das Hinzufügen von twitter:card als einzigem Twitter-spezifischen Tag.
Twitter Card Validator nutzen
Bevor Tweets versendet werden, sollte die Card-Implementierung getestet werden. Der Twitter Card Validator (früher unter cards-dev.twitter.com) ermöglicht es, eine URL einzugeben und die Card-Vorschau zu sehen sowie eventuelle Fehler zu identifizieren. Der Validator ist für eingeloggte Twitter-Entwickler zugänglich. Alternativ bietet der WikiPlus OG-Preview-Tool eine sofortige Vorschau ohne Login. Häufige Fehler, die der Validator aufdeckt: Fehlende twitter:card-Definition (Standard ist dann 'summary'). Bild zu groß (über 5 MB). Bild-URL nicht öffentlich zugänglich oder nicht HTTPS. Beschreibung fehlt vollständig. twitter:site enthält kein @-Zeichen. Nach Änderungen an den Tags ist ein erneuter Test empfehlenswert, da Twitter Card-Vorschauen gecacht werden können.
Twitter Cards für verschiedene Content-Typen optimieren
Je nach Content-Typ gibt es spezifische Empfehlungen für Twitter Cards. Blog-Artikel: summary_large_image mit einem hochwertigen Artikel-Header-Bild. twitter:creator sollte den Autor-Account angeben. Titel sollte neugierig machen oder einen klaren Nutzen versprechen. Produktseiten: summary_large_image mit Produktfoto auf weißem oder hellem Hintergrund. Preis und USP in der Description. Landing Pages: summary_large_image mit einem Design, das die Conversion-Message visuell unterstützt. Starker CTA in der Description. Event-Seiten: summary_large_image mit Event-Visual, Datum und Ort in Title und Description. Für Unternehmen mit regelmäßigem Content-Output lohnt sich ein standardisiertes OG/Twitter-Image-Template, das Markenkonsistenz sicherstellt und sich schnell für neue Inhalte anpassen lässt.
Häufig gestellte Fragen
- Was ist der Unterschied zwischen summary und summary_large_image?
- Bei summary erscheint links ein kleines quadratisches Vorschaubild. Bei summary_large_image wird das Bild groß über den gesamten Card-Bereich angezeigt. Summary_large_image ist deutlich auffälliger und erzeugt in der Regel mehr Klicks — empfohlen für alle Seiten mit hochwertigem Bildmaterial.
- Zeigt Twitter immer das og:image, wenn kein twitter:image gesetzt ist?
- Ja, Twitter liest og:image als Fallback, wenn kein twitter:image-Tag vorhanden ist. In der Praxis reicht es daher oft, og:image zu setzen und nur twitter:card als Twitter-spezifischen Tag hinzuzufügen.
- Kann ich animierte GIFs als Twitter Card Bild verwenden?
- Ja, Twitter unterstützt GIFs als twitter:image. Beachte das 5-MB-Limit. Animierte GIFs fallen auf und können die Engagement-Rate erhöhen, können aber auch als aufdringlich wahrgenommen werden. Teste, welches Format für deine Zielgruppe besser funktioniert.