Twitter Cards für euer WordPress-Blog aktivieren

Marcel Am 30.03.2013 veröffentlicht Lesezeit etwa 3:10 Minuten

Bildschirmfoto 2013-03-30 um 10.34.26

Seit geraumer Zeit schon besitzt Twitter ein Feature, welches auf den Namen Twitter Cards hört. Damit lässt sich zu jedem geteilten Link auch eine kleine Vorschau bestehend aus Überschrift, kurzer Einleitung und einem Bild anzeigen – kennt man ja von Facebook und Google+, welche das ganze inzwischen vollautomatisch anzeigen. Leider aktiviert Twitter die Cards nicht für jede Seite automatisch, wer also gerne einen solchen Auszug via Twitter verbreiten möchte, der muss diese erst etwas anpassen und dann bei Twitter anmelden.

Vorweg direkt einmal eine kleine Info: Twitter hat für die Twitter Cards eigene Tags definiert, welche ihr natürlich ebenso in eure Webseite oder eurem WordPress-Theme einbinden könnt. Dafür benötigt ihr allerdings einen guten Schuss Vorwissen, da ihr den Tags natürlich auch den entsprechenden Content liefern müsst. Auf die händische Methode möchte ich hier jedoch nicht eingehen, denn gerade für WordPress-Nutzer gibt es hier einfachere Wege.

Weg A geht den offiziellen Weg von Twitter, denn die WordPress-Erweiterung Twitter Cards fügt jedem eurer Artikel die entsprechenden, definierten Tags hinzu, inklusive allen benötigten Daten und Artikelbildern. Einfach das Plugin installieren und feddich ist der Braten.

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://tchgdns.de/roads-of-rome-2-fuer-iphone-und-ipad-derzeit-kostenlos-erhaeltlich/">
<meta name="twitter:title" content="Roads of Rome 2 für iPhone und iPad derzeit kostenlos erhältlich">
<meta name="twitter:description" content="Kleiner Spieletipp für alle iOS'ler, denn über die Osterfeiertage bieten die Jungs und Mädels Realore ihr "Roads of Rome 2" gratis im App Store an. "Roads of Rome" ist ein klassisches Aufbau-Strategiespiel...">
<meta name="twitter:image" content="https://tchgdns.de/wp-content/uploads/mzl.qbpqzjyd.320x480-75.jpg">

Weg B nutzt die bekannten Open Graph Tags, welche auch von Facebook und Google+ unterstützt und ausgelesen werden – danke für die Nettigkeit, Twitter. Auch diese lassen sich natürlich von Hand ins Theme einbinden, einfacher geht aber auch das natürlich mit einem Plugin. Wer das JetPack-Plugin installiert hat, der braucht nur das Modul „Publizieren“ zu aktivieren. Ob die das automatische Teilen nun nutzt oder nicht nutzt, Jetpack packt nun in jeden eurer Artikel besagte Open Graph Tags, sieht in etwa wie folgt aus:

<meta property="og:type" content="article" />
<meta property="og:title" content="Roads of Rome 2 für iPhone und iPad derzeit kostenlos erhältlich › Blog to go · Marcels Blog" />
<meta property="og:url" content="https://tchgdns.de/roads-of-rome-2-fuer-iphone-und-ipad-derzeit-kostenlos-erhaeltlich/" />
<meta property="og:description" content="Kleiner Spieletipp für alle iOS'ler, denn über die Osterfeiertage bieten die Jungs und Mädels Realore ihr "Roads of Rome 2"; gratis im App ..." />
<meta property="og:site_name" content="Blog to go · Marcels Blog" />
<meta property="og:image" content="https://tchgdns.de/wp-content/uploads/mzl.qbpqzjyd.320x480-75.jpg" />

Ihr habt die Tags soweit nun in eurem Quellcode beziehungsweise habt die Plugins aktiviert? Dann könnt ihr über ein kleines Webtool von Twitter direkt prüfen, ob soweit auch alles richtig ist, sollte dann wie folgt aussehen:

Bildschirmfoto 2013-03-30 um 10.27.42

Sollte hier nun alles anständig angezeigt werden, so könnt ihr euch an den nächsten Schritt machen – denn wie bereits angesprochen lädt Twitter die Vorschau nicht bei allen Seiten, sondern macht eine Anmeldung erforderlich. Dazu nutzt ihr dieses Formular von Twitter und füllt es mit euren Daten aus. In etwa so:

Bildschirmfoto 2013-03-30 um 10.30.09

Das sind die wichtigsten Felder, in Kurzform von oben nach unten: Eure Domain, eine kurze Beschreibung, euer Twittername (Pflicht) und eben eine Beispiel-URL für eure Zusammenfassungen. Das ganze schickt ihr nun ab und wartet dann ein paar Tage – bei mir hat es etwa elf Stunden gedauert, bei manchen dauerte es auch schonmal zwei, drei Tage, habt also Geduld. Sobald eure Seite freigeschaltet ist, werdet ihr von Twitter per Mail informiert.

Bildschirmfoto 2013-03-30 um 10.34.26

Das Ganze ist natürlich nur eine kurze Einleitung in die Twitter Cards: solltet ihr neben der Zusammenfassung auch nur Bilder oder Videos in einer Card anzeigen, so solltet ihr etwas Vorwissen mitbringen, denn gerade für die Video Card benötigt Twitter etwas mehr Definitionen. Wer mag, der schaut sich dazu gerne einmal die API-Dokumentation an und auch David Walsh hat dazu etwas geschrieben. Aber ich denke mal, den meisten wird die einfache Integration für eine Zusammenfassung ausreichend…

Artikel teilen

Kaufempfehlung*

  • Huawei P10 Smartphone (12,95 cm (5,1 Zoll) Touch-Display, 64 GB Interner Speicher, Android 7.0) Mystic Silver
  • Neu ab EUR 509,00, gebraucht schon ab EUR 399,99
  • Auf Amazon kaufen*