Twitter Cards – Metatags für Twitter

Was sind Twitter Card

Twitter Cards sind Metainformationen, wie die OG-Tags für Facebook, die Twitter dann nutzt wenn die Seite in einem Tweet verlinkt wird. Enthalten können neben einem Bild auch der Autor und eine Beschreibung zur URL sein, abhängig von der Art der Twitter Card. Hier mal ein Beispiel von meinem Blog. Das obere ist der normale Tweet, an dem Zusätzlichen „Kurzfassung anzeigen“ oder bei manchen Clients ein Symbol, kann man erkennen das eine Twitter Card für die URL existiert.


Wenn der Tweet ausgewählt wird, wird die Twitter Card eingeblendet.


Welche Twitter Cards gibt es?

Das vorangegangene Beispiel zeigt den Typ Summary, der eine Zusammenfassung der URL anbietet.

Was genau bieten die einzelnen Twitter Cards?

Summary Card

Die Summary Card besteht aus folgenden Metadaten:

Twitter:Card Typ der Card (summary)
Twitter:Site Twitter Konto der Seite
Twitter:Creator Twitter Konto des Autors
Twitter:Title Titel des Artikes / der Seite
Twitter:Description Beschreibung des Inhaltes
Twitter:Image Artikelbild (Optional)

In der Quelltext der Webseite sieht das dann so aus

<meta name=“twitter:card“ content=“summary“>

<meta name=“twitter:creator“ content=“@Fabian_Niesen“>

<meta name=“twitter:site“ content=“@Fabian_Niesen“>

<meta name=“twitter:title“ content=“Von Google+ nach Twitter und mehr mit ManageFlitter“>

<meta name=“twitter:description“ content=“Wie kann ich Google+ Postings twittern?Es gibt keine eingebaute Funktion in Google, die die Integration in anderen Soziale Netzwerke erlaubt. Hier helfen allerdings Anbieter wie zum Beispiel … Für die Integration nach Twitter. Der Dienst …“>

<meta name=“twitter:image“ content=“http://www.fabian-niesen.de/wp-content/uploads/2013/07/072513_1717_VonGooglena1-206×150.png“>

Large Image Summary Card

Wie die Summary Card auch, nur wird das Artikelbild über die volle breite der Twitter Card dargestellt.

Photo Card

Die Photo Card besteht aus den folgenden Metadaten

Twitter:Card Typ der Card (photo)
Twitter:Site Twitter Konto der Seite
Twitter:Creator Twitter Konto des Fotographen
Twitter:Title Titel des Fotos
Twitter:Image Foto URL
Twitter:Image:width Breite des Bildes (Optional)
Twitter:Image:height Höhe des Bildes (Optional)

Die Größen Angaben für das Bild dienen Twitter als Hilfe zur Darstellung, damit das Bild bei verändern der Größe nicht verzerrt oder abgeschnitten wird.

Ein Tweet mit einer Photo Card ist an dem Zusatz „Foto anzeigen“ zu erkennen, ähnlich wie eine Summary Card


Ausgewählt sieht der Tweet dann so aus


Wie man an dem Tweet erkennen kann, integriert Flickr für alle Bilder die Photo Card.

Die Gallery Card

Die Gallery Card besteht aus den folgenden Metadaten

Twitter:Card Typ der Card (gallery)
Twitter:Site Twitter Konto der Seite
Twitter:Creator Twitter Konto des Fotographen
Twitter:Title Titel des Fotos
Twitter:Description Beschreibung der Galerie, max. 200 Zeichen.
Twitter:Image0 Erstes Foto
Twitter:Image:1 Zweites Foto
Twitter:Image:2 Drittes Foto
Twitter:Image:3 Viertes Foto

Hier mal die Muster Screenshots von der Twitter Developer Seite


App Card

Die App Card ist bisher nur für den Offiziellen Android und IOS Client verfügbar, sie wird nur dort angezeigt. Die Metadaten sind

Twitter:Card Typ der Card (app)
Twitter:Description Beschreibung der App, max. 200 Zeichen.
Twitter:App:ID:iphone App-ID im Apple Store
Twitter:App:ID:ipad App-ID im Apple Store
Twitter:App:ID:googleplay App String für den Google App Store
Twitter:App:country Zweistelliger Ländercode für nicht US Apps

Product Card

Die Product Card dürfte für viele Shop Betreiber oder Hersteller interessant sein. Die Metadaten sind

Twitter:Card Typ der Card (product)
Twitter:Title Titel des Produktes
Twitter:Image Foto URL
Twitter:Image:width Breite des Bildes (Optional)
Twitter:Image:height Höhe des Bildes (Optional)
Twitter:Description Beschreibung des Produktes (Max. 200 Zeichen)
Twitter:data1 Datensatz 1, zum Beispiel Preis, Verfügbare Größen
Twitter:Label1 Beschriftung für das Datenfeld
Twitter:data2 Datensatz 2 zum Beispiel Händler
Twitter:Label2 Beschriftung für das Datenfeld

Hier wieder ein Screenshot von der Twitter Developer Seite wie das aussehen kann


Player Card

Der Vollständigkeit halber erwähnt, dient zur Einbindung von Videos. Zum Beispiel ist es bei Youtube.com integriert. Benötigt aber eine Spezielle Genehmigung von Twitter.

Generelle Voraussetzungen

Jeder Twitter Card muss Validiert werden, bevor für eine Domäne die Freigabe für Twitter Card beantragt werden kann. Für den Twitter Card Validator muss man sich auf der Entwicklerseite von Twitter anmelden. Der Card Validator prüft die Seite und zeigt die Card so an, wie sie erscheinen würde in Twitter. Wenn die Card Validiert wurde kann die Genehmigung beantragt werden. Die Genehmigung kann schon mal 2-3 Tage dauern, meistens aber innerhalb von 24 Stunden.



Demnächst stelle ich auch noch Twitter Cards Plugins für verschiedene CMS vor.