Twitter Cards für deinen WordPress-Blog – So geht’s!

twitter-cards

Twitter Cards ermöglichen es Inhalteanbietern kleine Snippets ihres Outputs direkt in Twitter und den dazugehörigen Apps darzustellen. So lange gibt es diese Möglichkeit bei Twitter noch nicht, in anderen Netzwerken wie Facebook oder Google+ hingegen, gehört es schon immer zum grundlegenden Funktionsumfang beim Teilen von Links ein Vorschaubild und ein Stück Text von der Quelle zu saugen.

Auf die Möglichkeit auch Medien per Twitter Cards einzubinden möchte ich hier nicht eingehen, mir geht es nur um eine Quick-and-dirty-Lösung für Blogger die mit WordPress sowie dem Jetpack-Plugin unterwegs sind und Snippets ihrer Beiträge anbieten möchten. Wie soll es am Ende ausschauen? Genau so, also mit Vorschau zum Beitrag:

twitter cards wordpress blog

Auch in den offiziellen Twitter-Apps und vielen Apps von Drittanbietern werden die Twitter Cards ausgelesen. Das schaut dann ungefähr so aus:

twitter card ios

Wer Jetpack nutzt findet dort ein Modul namens “Publizieren”. Dies kann genutzt werden, um Beiträge automatisch zu Facebook, Twitter und Co. zu pushen. Klappt ganz gut, ich nutze das zum Beispiel, um Facebook zu befüllen. Netter Nebeneffekt ist, wenn ihr dieses Modul aktiviert habt, dann packt es automatisch auch Open Graph Tags in euren Seitenkopf, die von sozialen Netzwerken ausgelesen werden können.

Über Open Graph Tags steuert ihr also, was in diesen kleinen Snippets in einem sozialen Netzwerk angezeigt werden soll. Diese könnte man auch manuell ins WordPress-Theme einbinden, mit Jetpack funktioniert das aber wie gesagt automatisch und auch zuverlässig. Im Quelltext eures Seitenkopfs schaut es dann (als Beispiel nehmen wir mal diesen Beitrag) so aus:


<!-- Jetpack Open Graph Tags -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Benachrichtigungsleisten: Inhalte, Events und mehr in WordPress einfach bewerben" />
<meta property="og:url" content="http://renehesse.de/benachrichtigungsleisten-wordpress/" />
<meta property="og:description" content="Benachrichtigungsleisten eignen sich in Blogs herrlich, um kurzfristig auf Inhalte, Events oder andere Aktionen aufmerksam zu machen. Bevor man solch eine Leiste einsetzt, sollte man sich allerding..." />
<meta property="og:site_name" content="ReneHesse.de" />
<meta property="og:image" content="http://i1.wp.com/renehesse.de/wp-content/uploads/2012/12/gc-message-bar.jpg?fit=400%2C400" />

Das Tolle ist nun, dass Twitter zwar komplett eigene Tags für die Twitter Cards definiert hat, allerdings auch mit Open Graph Tags klar kommt. Dies ist auch bei Google+ und Facebook der Fall, heißt für uns, einmal aktivieren und überall nutzbar machen. Tolle Sache schon mal. Über ein Test-Tool von Twitter könnt ihr prüfen ob die Tags richtig in eure Seite integriert sind bzw. wie denn eure Twitter Card am Ende ausschauen würde.

Erst die halbe Miete

Wäre ja zu schön um wahr zu sein, wenn das  nun so schnell erledigt wäre. Es ist nun nämlich bei Twitter etwas anders als bei den anderen sozialen Netzwerken. Habt ihr entsprechende Open Graph Tags manuell ins Thema gepackt oder wie erwähnt per Jetpack aktiviert, dann müsst ihr euren Blog noch bei Twitter manuell einreichen. Zu diesem Zweck gibt es diese Webseite. Dort loggt ihr euch mit eurem Twitter-Account ein, tragt ihr einfach die entsprechenden Daten inklusiver einer URL, die bereits die Open Graph Daten enthält ein und schickt das Ganze ab.

Was schreibe ich in das Formular? (Klicken zum Anzeigen)

twitter cards wordpress blog antrag

Jetzt heißt es warten. Bei mir hat es exakt zwei Tage gedauert und ich konnte erste Ergebnisse bestaunen, teilweise gibt aber Twitter sein Okay auch nach wenigen Stunden. Twitter ist es dabei egal, ob der Link durch einen URL-Verkürzer gejagt, oder direkt veröffentlicht wurde.

Vorher – Ohne Twitter Card

twitter cards wordpress blog 2

Nachher – Mit Twitter Card

twitter cards wordpress blog 3

Wer mehr will, also zum Beispiel auch Videos und extra Bilder in eine Twitter Card einbinden, der klickt sich bei Twitter in den API-Bereich zu den Twitter Cards. Hier kann dann natürlich etwas Vorwissen nicht schaden. Möglich ist vieles, ob alles lohnt bzw. einen Mehrwert für den Leser bietet ist dann wieder eine andere Frage.

Wie ihr seht sind die Twitter Cards gerade im Zusammenhang mit WordPress kein Hexenwerk und an sich schnell eingerichtet, es lohnt sich also mal einen Blick darauf zu werfen. Habt ihr weitere Fragen oder Anmerkungen, dann ab damit in die Kommentare!