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.

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!

12 Kommentare
  1. Michael Kupfer

    Danke für den Tipp, gleich mal aktiviert

  2. René

    Mh, schaut bei mir so aus nach dem Login.

  3. tobi

    Tolle Anleitung. Selbst mal getestet.
    Funktioniert einwandfrei.

  4. Jens Matheuszik

    Danke für die gute und auch für nicht Techniker verständliche Anleitung. Gerade mal kurz getestet – bei mir klappt das leider mit den Bildern in der Preview nicht, ich muss mir das nachher mal noch genauer anschauen, woran es liegt. Aber das wird hoffentlich schon klappen. 🙂

    1. René

      Du hast das “WordPress Facebook Open Graph protocol plugin” aktiv, ich würde dir auf lange Sicht empfehlen auf Jetpack umzusatteln, das setzt die Tags automatisch und kann zudem auch zu facebook etc. sharen. Einen Test wäre es wert.

      1. Jens Matheuszik

        Habe jetzt mal Open graph deaktiviert und Jetpack aktiviert. Zwar ohne explizites sharen (das machen andere Dienste), aber das geht wohl dennoch. Danke!

  5. Michael Kupfer

    Hm, bin seit kurzem freigeschaltet, aber irgendwie klappt es nicht wie gewünscht. Es wird nicht der Text vom Beitrag genommen sondern der Text der Seite, wie sie heißt….

    1. René

      Das liegt daran, dass deine property=”og:description” content=”…” den Seitentitel beinhaltet und nicht das Excerpt

      1. Michael Kupfer

        Du kannst mir nicht verraten, wie und wo ich das ändern kann?

        1. René

          Das macht Jetpack alles automatisch eigentlich, also leider nein. Wenn du das über Jetpack laufen lässt, sollte das klappen. Wenn da ein anderes Plugin Open Graph Tags reinhaut, gibt es Probleme.

          1. Michael Kupfer

            Danke, dann werde ich da mal forschen, welches mir da in die Quere kommt

  6. GordonEcco

    Vielen Dank. Ich hab das ganze jetzt für einen Artikel getestet und es hat geklappt. Muss ich das jetzt für jeden Artikel wiederholen oder erkennt Twitter jetzt das Schema und zieht die Daten automatisch für jeden Artikel?

Schreibe einen Kommentar    

Deine E-Mail-Adresse wird nicht veröffentlicht. Durch das Absenden eines Kommentars stimmst du der Speicherung deiner Angaben gemäß der Datenschutzerklärung zu.

Du bist hier: FLIP.de / Coding & Publishing / Web / ...