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="https://flip.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.

Hinterlasse einen Kommentar
Aus Datenschutzgründen werden personenbezogene Daten erst nach Einwilligung durch das DISQUS-Kommentarsystem verarbeitet. Du kannst auch als Gast kommentieren und den Datenschutz-Modus aktivieren.
Du bist hier: FLIP.de / Coding & Publishing / Web / ...