Twitter Cards

Twitter bietet für Webseiten-Betreiber die Möglichkeit sogenannte Twitter Cards zu hinterlegen, die im Stream dargestellt werden, wenn jemand die entsprechende Seite in einem Tweet erwähnt. Zusatzinformationen wie Titel, Beschreibungstext, etc. werden über Meta-Tags definiert, die Twitter aus dem Quellcode liest.

Vorteile

Werden für eine Internetseite optisch ansprechende Twitter Cards hinterlegt, lässt sich die Klickrate bei Erwähnungen auf Twitter deutlich erhöhen. Denn den Twitter-Leser unterstützen die Karten dabei leichter auf verlinkte Seiten und deren Inhalte aufmerksam zu werden und ein Interesse für diese zu entwickeln.

Für den User ist somit leichter erfassbar, was ihn erwartet und für den Seitenbetreiber erhöht sich der Traffic über Tweets mit Erwähnungen.

Einbindung

Da der Inhalt von Twitter Cards über Meta-Daten definiert wird, braucht es nur wenige HTML Tags, um die Darstellung der eigenen Seite im Twitter Stream zu verbessern.

Der Kartentyp

Twitter bietet verschiedene Kartentypen an, die für eine Seite angelegt werden können.
Die größte Aufmerksamkeit erzielt der Typ „summary with large image“.

summary

Bei diesem Typ wird ein kleines Bild, in Kombination mit Titel und Beschreibung dargestellt und ergänzt den einfachen Textlink um hilfreiche Zusatzinfos.

Um eine solche Karte anzulegen benötigt man folgenden HTML-Code:

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Base64 Image Encoder" />
<meta name="twitter:description" content="Convert your images to base64 online" />
<meta name="twitter:image" content="http://placehold.it/300x300" />

Und so sieht ein mögliches Ergebnis aus:

Twitter card type: summary

summary with large image

Dieser Typ enthält ein großes Bild und generiert somit eine hohe Aufmerksamkeit. Aber vorsicht: Wenn man einfach irgendein Bild verwendet, kann dieses Format sehr schnell nach hinten los gehen. Das gewählte Bild sollte optisch ansprechend und möglichst wenig aufdringlich sein sowie einen guten Eindruck davon vermitteln, was den User bei einem Klick erwarten wird.

Um eine solche Karte anzulegen benötigt man folgenden HTML Code:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@noreading">
<meta name="twitter:title" content="Base64 Image Encoder">
<meta name="twitter:description" content="Convert your images to base64 online">
<meta name="twitter:image" content="http://placehold.it/1800x1200">

Und so sieht ein mögliches Ergebnis aus:

Twitter card type: summary large

Die Kartenprüfung

Bevor Twitter für eure Seiten Cards anzeigt, müsst ihr diese mit dem Card Validator überprüfen. Ist die Überprüfung erfolgreich, wird eure Seite nach kurzer Zeit auf die Liste der freigeschalteten Seiten aufgenommen.

So sieht es aus, wenn die Prüfung ohne Fehler ist:

Base64-Image.de Twitter Card