Zum Hauptinhalt springen

Was ist Twitter Card?

image

Definition​

Twitter Card ist ein Metadatensystem, das beim Teilen von Links auf Twitter (jetzt umbenannt in X) reichhaltige Medienerlebnisse bietet. Normalerweise zeigt das Einbeziehen einer URL in einen Tweet nur einen einfachen Link an, aber mit konfigurierten Twitter Cards erscheint es als visuell ansprechendes Kartenformat mit Bildern, Titeln und Beschreibungen.

Twitter Cards werden mit Tags im Format <meta name="twitter:xxx"> im <head>-Bereich von HTML-Dokumenten implementiert. Ähnlich wie Open Graph bieten sie plattformspezifische Funktionen für Twitter. Twitter unterstützt vier Hauptkartentypen, jeder mit unterschiedlichen Zwecken und Layouts: Summary Card, Summary Card with Large Image, App Card und Player Card.

Richtig konfigurierte Twitter Cards verbessern die Link-Klickraten erheblich. Untersuchungen zeigen, dass Tweets mit Bildern bis zu 150% höhere Retweet-Raten aufweisen als reine Text-Tweets. Twitter Cards sind zu einem unverzichtbaren Marketing-Tool geworden, insbesondere für Nachrichtenmedien, Blogs und E-Commerce-Sites. Ohne Twitter Cards können Ihre Links in der Timeline leicht übersehen werden.

Merkmale​

  • Verschiedene Kartentypen: Wählen Sie unter Summary, Summary with Large Image, App und Player geeignete Karten für Ihren Inhaltstyp. Jeder Typ bietet unterschiedliche Layouts und Funktionalität.
  • Hohes Engagement: Links mit Twitter Cards haben 2-3 mal höhere Klick- und Retweet-Raten als normale Links. Visuelle Elemente ziehen die Aufmerksamkeit der Benutzer auf sich.
  • Open Graph-kompatibel: Wenn Twitter Card-Tags fehlen, verwendet Twitter Open Graph-Tags als Ausweichlösung. Für optimale Ergebnisse wird jedoch die Verwendung von Twitter Card-spezifischen Tags empfohlen.
  • Validierungstool bereitgestellt: Twitter bietet ein offizielles Tool namens Card Validator, um eine Vorschau der Kartendarstellung anzuzeigen.
  • Rich-Media-Unterstützung: Player Cards ermöglichen die direkte Wiedergabe von Videos und Audio in der Twitter-Timeline, was das Benutzererlebnis erheblich verbessert.

Verwendung​

So implementieren und nutzen Sie Twitter Cards effektiv.

Schritt 1: Kartentyp wählen Wählen Sie den Twitter Card-Typ, der zur Art Ihres Inhalts passt. Für Blog-Beiträge oder Artikel ist Summary Card with Large Image am effektivsten. Große Bildkarten funktionieren auch gut für Produktseiten oder Portfolios. Verwenden Sie Player Cards für Videoinhalte und App Cards für die Bewerbung mobiler Apps.

Schritt 2: Grundlegende Twitter Card-Tags hinzufügen Fügen Sie Twitter Card-Meta-Tags zum <head>-Bereich Ihrer Webseite hinzu. Mindestens vier Tags müssen enthalten sein: twitter:card, twitter:title, twitter:description und twitter:image.

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Vollständiger Blog-SEO-Leitfaden">
  <meta name="twitter:description" content="Praktische SEO-Strategien zur Steigerung des Such-Rankings">
  <meta name="twitter:image" content="https://example.com/seo-guide.jpg">
</head>

Schritt 3: Zusätzliche Informations-Tags einschließen Das Hinzufügen des Twitter-Kontos Ihrer Website oder des Autors zeigt es auf der Karte an und hilft, Follower zu gewinnen. twitter:site ist das Twitter-Konto der Website, und twitter:creator ist das Konto des Inhaltsautors.

<meta name="twitter:site" content="@zerocoke">
<meta name="twitter:creator" content="@maxmuster">

Schritt 4: Bildoptimierung Twitter Card-Bilder sind sehr wichtig. Summary Card benötigt mindestens 120x120px (1:1 Verhältnis), und Summary with Large Image benötigt mindestens 300x157px (2:1 Verhältnis). Optimale Größe ist 1200x628px, und die Dateigröße muss unter 5MB liegen. Unterstützt JPG-, PNG- und WEBP-Formate.

Schritt 5: Mit Card Validator testen Geben Sie Ihre URL in den Twitter Card Validator (https://cards-dev.twitter.com/validator) ein, um zu überprüfen, ob Karten korrekt angezeigt werden. Beheben Sie Fehler sofort und testen Sie erneut. Die Vorschau zeigt, wie es auf dem tatsächlichen Twitter erscheinen wird.

Schritt 6: Mit Open Graph verwenden Während Twitter Twitter Card-Tags priorisiert, verwendet es Open Graph-Tags, wenn diese fehlen. Implementieren Sie Open Graph auch für die Optimierung anderer sozialer Plattformen. Die Verwendung beider ist in Ordnung und wird als Best Practice empfohlen.

Beispiele​

Beispiel 1: Summary Card with Large Image (am häufigsten)

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Backlink-Aufbau-Strategie-Leitfaden</title>

  <!-- Twitter Card Grundlegende Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@zerocoke">
  <meta name="twitter:creator" content="@maxmuster">
  <meta name="twitter:title" content="Backlink-Aufbau-Strategie: Seite-1-Rankings erreichen">
  <meta name="twitter:description" content="Lernen Sie effektive Backlink-Aufbau-Methoden und zu vermeidende Fehler mit echten Fallstudien.">
  <meta name="twitter:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta name="twitter:image:alt" content="Backlink-Aufbau-Strategie-Infografik">

  <!-- Open Graph zusammen (für andere Plattformen) -->
  <meta property="og:title" content="Backlink-Aufbau-Strategie: Seite-1-Rankings erreichen">
  <meta property="og:description" content="Lernen Sie effektive Backlink-Aufbau-Methoden und zu vermeidende Fehler mit echten Fallstudien.">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta property="og:url" content="https://zero-coke.com/blog/backlink-strategy">
  <meta property="og:type" content="article">
</head>
<body>
  <!-- Seiteninhalt -->
</body>
</html>

Beispiel 2: Summary Card (kleines Bild)

<head>
  <!-- Inhalt geeignet für kleines Vorschaubild -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@mynewssite">
  <meta name="twitter:title" content="Heutige SEO-Nachrichten Zusammenfassung">
  <meta name="twitter:description" content="Google-Algorithmus-Updates, Such-Trends, Branchennachrichten auf einen Blick">
  <meta name="twitter:image" content="https://example.com/logo-square.jpg">
  <meta name="twitter:image:alt" content="Nachrichtenseiten-Logo">
</head>

Beispiel 3: Player Card (Video-Inhalt)

<head>
  <!-- Karte mit direkter Video-Wiedergabe -->
  <meta name="twitter:card" content="player">
  <meta name="twitter:site" content="@videosite">
  <meta name="twitter:title" content="Vollständiger Leitfaden zur Blog-Monetarisierung (15 Min.)">
  <meta name="twitter:description" content="1000€/Monat mit Ihrem Blog verdienen. Von AdSense bis Affiliate-Marketing">
  <meta name="twitter:image" content="https://example.com/video-thumbnail.jpg">
  <meta name="twitter:player" content="https://example.com/embed/player?video=123">
  <meta name="twitter:player:width" content="1280">
  <meta name="twitter:player:height" content="720">
  <meta name="twitter:player:stream" content="https://example.com/video-123.mp4">
  <meta name="twitter:player:stream:content_type" content="video/mp4">
</head>

Beispiel 4: App Card (Mobile-App-Bewerbung)

<head>
  <!-- Mobile-App-Download-Bewerbung -->
  <meta name="twitter:card" content="app">
  <meta name="twitter:site" content="@myappcompany">
  <meta name="twitter:title" content="Blog-Manager - Blog-Statistiken auf einen Blick">
  <meta name="twitter:description" content="Überprüfen Sie Ihre Blog-Leistung in Echtzeit auf dem Handy">
  <meta name="twitter:image" content="https://example.com/app-icon.png">

  <!-- iOS-App-Informationen -->
  <meta name="twitter:app:name:iphone" content="Blog-Manager">
  <meta name="twitter:app:id:iphone" content="123456789">
  <meta name="twitter:app:url:iphone" content="blogmanager://open">

  <!-- Android-App-Informationen -->
  <meta name="twitter:app:name:googleplay" content="Blog-Manager">
  <meta name="twitter:app:id:googleplay" content="com.example.blogmanager">
  <meta name="twitter:app:url:googleplay" content="blogmanager://open">
</head>

Beispiel 5: E-Commerce-Produktseite

<head>
  <!-- Produktseiten-Optimierung -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@myshop">
  <meta name="twitter:title" content="Premium Wireless Ohrhörer XYZ-2000 - 50% Sonderrabatt">
  <meta name="twitter:description" content="Geräuschunterdrückung, 30Std. Wiedergabe. Nur heute 129€ → 64,50€">
  <meta name="twitter:image" content="https://shop.example.com/products/xyz-2000-promo.jpg">
  <meta name="twitter:image:alt" content="XYZ-2000 Wireless Ohrhörer Produktfoto">

  <!-- Produkt-Labels (Optional) -->
  <meta name="twitter:label1" content="Preis">
  <meta name="twitter:data1" content="64,50€">
  <meta name="twitter:label2" content="Lagerbestand">
  <meta name="twitter:data2" content="Begrenzte Menge">
</head>

Beispiel 6: Nachrichtenartikel

<head>
  <!-- Für Nachrichtenartikel optimierte Karte -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@newsmedia">
  <meta name="twitter:creator" content="@journalist_kim">
  <meta name="twitter:title" content="2024 SEO-Trends: KI-Suche ändert das Spiel">
  <meta name="twitter:description" content="Googles SGE und Bings KI-Chat verändern die Such-Landschaft grundlegend. SEO-Strategien müssen sich auch weiterentwickeln.">
  <meta name="twitter:image" content="https://news.example.com/2024/ai-seo-trends.jpg">
  <meta name="twitter:image:alt" content="KI-Suchmaschinen-Schnittstelle">

  <!-- Open Graph-Artikel-Tags zusammen -->
  <meta property="og:type" content="article">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:author" content="Reporter Kim">
  <meta property="article:section" content="Technologie">
</head>

Beispiel 7: Event-/Webinar-Bewerbung

<head>
  <!-- Event-Bewerbungsseite -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@eventorganizer">
  <meta name="twitter:title" content="2024 SEO-Konferenz | 15. Sept. COEX">
  <meta name="twitter:description" content="Praktisches Know-how von 20 in- und ausländischen SEO-Experten. 50% Frühbucher-Rabatt!">
  <meta name="twitter:image" content="https://event.example.com/seo-conference-2024.jpg">
  <meta name="twitter:image:alt" content="SEO-Konferenz 2024 Hauptvisual">

  <!-- Wichtige Informationen mit Labels hervorheben -->
  <meta name="twitter:label1" content="Datum">
  <meta name="twitter:data1" content="15. September 2024">
  <meta name="twitter:label2" content="Veranstaltungsort">
  <meta name="twitter:data2" content="COEX Convention Center">
</head>

Vor- und Nachteile​

Vorteile​

  • Dramatisch erhöhte Klickraten: Links mit Twitter Cards zeigen 2-3 mal höhere Klickraten als normale Links. Visuell ansprechende Karten ziehen die Aufmerksamkeit der Benutzer in der Timeline auf sich.

  • Verbesserte Markenbekanntheit: Professioneller Markenausdruck mit konsistenten Bildern und Botschaften. Twitter-Kontoinformationen werden auf Karten angezeigt und helfen, Follower zu erhöhen.

  • Rich-Media-Erlebnis: Player Cards ermöglichen die Video-Wiedergabe direkt auf Twitter, sodass Benutzer Inhalte konsumieren können, ohne Ihre Website zu besuchen. Dies erhöht das Engagement erheblich.

Nachteile​

  • Zusätzliche Arbeit erforderlich: Das Hinzufügen separater Twitter Card-Tags über Open Graph hinaus erhöht den Arbeitsaufwand. Die Optimierung aller sozialen Plattformen führt zu vielen Meta-Tags.

  • Plattformabhängigkeit: Twitter Cards funktionieren nur auf Twitter (X). Andere Plattformen benötigen Open Graph oder ihre eigenen eindeutigen Tags.

  • Bilderstellungsaufwand: Hochwertige Bilder sind für effektive Twitter Cards unerlässlich. Das Erstellen oder Auswählen geeigneter Bilder für jeden Inhalt erfordert Zeit und Ressourcen.

FAQ​

F: Sollte ich Twitter Cards oder Open Graph verwenden? A: Am besten beide verwenden. Twitter priorisiert Twitter Card-Tags und verwendet Open Graph-Tags als Ausweichlösung, wenn diese fehlen. Open Graph wird jedoch von Facebook, LinkedIn, KakaoTalk und anderen Plattformen verwendet, implementieren Sie also beide. Twitter Card-Tags dienen der Twitter-Optimierung, während Open Graph der universellen Social-Media-Optimierung dient.

F: Meine Twitter Cards werden nicht angezeigt. Warum? A: Mehrere Ursachen sind möglich: 1) Meta-Tag-Syntaxfehler - mit Card Validator überprüfen. 2) Bildgrößenprobleme - Mindestgrößenanforderungen überprüfen. 3) Bildzugriff blockiert - sicherstellen, dass robots.txt Bilder nicht blockiert. 4) HTTPS-Probleme - HTTPS-URLs verwenden, wenn möglich. 5) Cache-Probleme - erneutes Crawlen der URL im Card Validator kann es lösen.

F: Was ist der Unterschied zwischen Summary Card und Summary Large Image Card? A: Summary Card ist ein kompaktes Format mit einem kleinen quadratischen Vorschaubild (120x120px+), das neben dem Text angezeigt wird. Hauptsächlich geeignet für Logos oder Symbole. Summary Large Image Card zeigt ein großes rechteckiges Bild (1200x628px empfohlen) prominent oben auf der Karte. Für die meisten Fälle, einschließlich Blog-Beiträge, Artikel und Produktseiten, ist Summary Large Image effektiver. Es hat größere visuelle Wirkung und viel höhere Klickraten.

F: Ich habe Twitter Cards geändert, aber Änderungen werden nicht angezeigt. A: Twitter cached Karteninformationen, sodass Änderungen möglicherweise nicht sofort angezeigt werden. Geben Sie die URL in Card Validator (https://cards-dev.twitter.com/validator) ein und klicken Sie auf "Preview card", um mit den neuesten Informationen neu zu crawlen. Karten auf bereits getwitterten Links werden nicht aktualisiert, daher sollten wichtige Änderungen mit neuen Tweets geteilt werden. Twitters Cache bleibt normalerweise etwa 7 Tage bestehen.