DIGITALES MARKETING HEUTE

News für den deutschsprachigen Raum

22

Oct

2014

Twitter Cards – 140 Zeichen sind nicht genug!

Die Einbindung von URLs in Tweets stellt eine wichtige Funktion von Twitter dar; sowohl Private wie auch Unternehmen nutzen den Kurznachrichtendienst, um andere Personen auf interessante Links im Internet aufmerksam zu machen.

Allerdings ergibt sich aus dem Umstand, dass ein Tweet maximal 140 Zeichen lang sein kann das Problem, dass je nach geposteter URL nicht genügend Zeichen vorhanden sind. Bedenkt man insbesondere, dass die meisten Blogs ihre Permalinks in der URL ausschreiben (“example.com/haupttitel-blogeintrag-welcher-sehr-lange-ist/” statt “example.com/?p=123”), werden die Probleme rasch offensichtlich. Dies führte dazu, dass Twitter standardmässig gepostete Links mit dem hauseigenen Shortener http://t.co kürzt. Folglich stehen dem Autor mehr Zeichen zur Verfügung, im Gegenzug erkennt der Tweet-Empfänger nicht auf den ersten Blick, wohin die URL ihn führt. Um dem User nun mehr Details über die URL mitgeben zu können, hat Twitter das System der Twitter Cards entwickelt.

Wie funktionierts?

Angenommen, ein User teilt den Link “http://www.blueglass.ch/blog/twitter-cards-140-zeichen-sind-nicht-genug/”, so kann ich als Inhaber der Seite blueglass.ch festschreiben, dass dem Tweet gewisse Informationen angehängt werden – egal von wem der Tweet verfasst wurde! Jedes mal, wenn jemand die URL postet, greift Twitter auf die in der Website hinterlegten Meta-Daten zurück und fügt diese zu einer Twitter Card zusammen. Ganz dynamisch.

Was bringts?

Im konkreten Fall bedeutet dies, dass ich dem Twitter User bereits beim lesen seiner Timeline den Inhalt meines Posts  näherbringen kann: Featured Image und einen kleinen Textteaser.

Das 140-Zeichen-Limit von Twitter wird durch die Twitter Cards stark relativiert: insbesondere Blogger und Online-Shops haben gute Möglichkeiten ihre Beiträge/Produkte intensiv bei potentiellen Lesern/Kunden zu bewerben.

Die verschiedenen Twitter Cards

Um dem Inhaber einer Domain das Anbieten einer Twitter-Card möglichst einfach zu machen, hat Twitter sieben Karten vordefiniert, welche entsprechend befüllt werden können.

Summary Card

Die Summary Card stellt die Standardkarte dar; nebst dem Textteaser, wird das Beitragsbild in den Tweet eingebettet.

Summary Card with large Image

Diese Version der Summary Card ermöglicht es dem Seitenbetreiber ein grosses, gut sichtbar platziertes Bild mitzugeben; sehr interessant für z.B. Blogartikel mit einem Titelbild, welches nicht nur ein Symbolbild darstellt.

Photo Card


Fotos von z.B. Flickr, Instagram oder Google lassen sich mit dieser Card prominent auf Twitter platzieren. Der Tweet-Autor übergibt mit der URL ein grosses Vorschaubild, welches durch anklicken in seiner vollen Grösse dargestellt wird.

Gallery Card

gallery

Die Gallery Card ist eine ausgebaute Variante der Summary Card: neben der Textvorschau können der Card aber mehrere Bilder (bis zu 4) mitgegeben werden. Dieser Card Typ eignet sich entsprechend für Artikel mit mehreren integrierten Bildern.

App Card

screen_shot_2014-06-20_at_9.52.03_am

Für Websiten mit einer eigenen App lohnt es sich allenfalls, wenn auf Twitter die Mobile User (nur mit App für iOS und Android) direkt in den jeweiligen App Store verlinkt werden. Parameter die der Twitter Card mitgegeben werden können sind u.a. auch der Preis und die Bewertung der App.

Player Card


Besonders für Webseiten mit Multimedia-Elementen, wie Video- oder Audio-Files ist die Player Card entwickelt worden. Der Webseitenbetreiber hat die Möglichkeit Videos direkt in die Twitter Card einzubauen, sodass jeder Empfänger des Tweets die Datei abspielen kann, ohne die Homepage besuchen zu müssen. Die Funktion ist äquivalent zur Einbindung von Youtube Videos, wie im gezeigten Beispiel.

Product Card


Die Product Card eignet sich sehr gut für Webshops, aber auch allgemein für Anbieter von Produkten und Dienstleistungen, die ihr Produkt über Twitter bekannt machen möchten. Produktdetails und weitere selber definierbare Attribute lassen sich der Card nebst Foto und Titel hinzufügen.

Twitter bietet fast für jeden Bedarf einen Card Typ an; die Cards sind relativ flexibel und lassen sich so optimal auf die eigenen Bedürfnisse anpassen. Wie man nun eine Twitter Card in seinen Blog einfügt, zeigen wir am Beispiel von WordPress auf.

Einbinden mit WordPress (am Beispiel der Summary Card)

Wie fast alles in WordPress, lässt sich auch dieser Prozess ziemlich einfach mit einem Plugin lösen. Viele WordPress User, welche ihre Seite bereits ein wenig für Suchmaschinen optimiert haben, werden das YOAST SEO Plugin installiert haben. Sollte dies noch nicht der Fall sein, empfehlen wir gerne The Definitive Guide To Higher Rankings For WordPress Sites von YOAST. Das YOAST Plugin bietet in der Free Variante die Möglichkeit die Summary Card und die Summary Card with large image einzugliedern.

Um sämtliche Twitter Cards zu nutzen, ist das Plugin JM Twitter Cards empfehlenswert.

Voraussetzungen/Installation

Um die Twitter Cards nutzen zu können, sind verschiedene Schritte notwendig. Bevor die Konfiguration beginnt, ist es aber wichtig, dass

  • WordPress korrekt installiert ist und die letzten Updates eingespielt wurden und
  • das Plugin JM Twitter Cards installiert wurde.

Damit Twitter eure Card anzeigt, muss als erstes das Plugin aktiviert werden. Danach finden sich im Plugin Menü unter dem Punkt Allgemein die Felder “Creator” und “Site”. Hier müssen die Twitter Kontaktdaten eingetragen werden – in unserem Falle war dies @blueglass (ohne ‘@‘) in beiden Feldern. Sollte für die Webseite noch kein Twitter Account erstellt worden sein, sollte das an dieser Stelle nachgeholt werden. Twitter verlangt, dass Webseiten, welche Twitter Cards nutzen, selber auch über einen Twitter Alias verfügen.

Das Feld “Card Types” kann je nach Bedürfnis gewählt werden und wird nur als globale Einstellung genutzt; jedem Beitrag kann ein eigener Card Typ zugewiesen werden.

Damit auch die Twitter Product Card genutzt werden kann, muss im Reiter “Meta Box” die Box auf “Display” umgeschalten werden.

Die erste Twitter Card publizieren

So, nun gehts darum, die erste Twitter Card bereit zu stellen.

  1. Öffne einen bestehenden Post oder erstelle einen neuen. Unter dem Editor erscheint die Options-Box “Twitter Cards”. Hier kann dem Beitrag eine Twitter Card zugewiesen werden. Wenn oben bereits “Summary Card” als Standard Card gewählt wurde, müssen wir hier nichts ändern. Je nach Card Typ, der gewählt wird, öffnen sich mehrere Felder unterhalb – hier können zum Beispiel Details für eine Twitter Product Card hinzugefügt werden. Am Schluss muss der Post gespeichert und veröffentlicht werden.Twitter Cards Settings
  2. Sind alle benötigten Felder ausgefüllt, muss noch der Card Validator gestartet werden. Diesen findet man unter https://dev.twitter.com/docs/cards/validation/validator. Das Pop-Up kann geschlossen werden und die Registerkarte “Validate & Apply” wird ausgewählt. Im URL-Feld den Pfad zum Beitrag eingeben und auf “Go!” drücken. Twitter lädt nun die Meta-Daten von der Website und baut darauf die Card auf. Ganz so, als würde ein x-beliebiger Twitter User die URL posten.
  3. Nachdem geprüft wurde, dass alles soweit mit der Card in Ordnung ist, müssen die Domain und die Karten von Twitter freigegeben werden. Hierzu klickt man auf “Request Approval”, füllt die Details aus (hier ist insbesondere der Twitteraccount der Webseite wichtig) und schickt das Formular ab.
  4. Sobald die Card von Twitter akzeptiert wurde, wird jeder Tweet mit der entsprechenden URL um eine Twitter Card ergänzt.

Hab Ihr weiterführende Fragen oder Anregungen? Dann postet diese hier und wir helfen euch gerne weiter!

 

Share this:

Über den Autor

Andreas Wartmann

Als Jurist, der gerne über den Tellerrand hinausblickt, ist Andreas Wartmann in diversen Projekten von BlueGlass involviert. Durch die Betreuung vieler Online Projekte unterstützte er bereits Kunden aus verschiedensten Branchen bei der Realisation individueller Lösungen.

 

Was meinen Sie dazu?

Your email address will not be published. Required fields are marked *