Open Graph und Twitter Cards – Meta Daten für soziale Netze

•  14. April 2016
•  Andreas Öttl
•  0 Kommentare
• Trackback URL

Trackback URL

Möchte man seine Website- oder Bloginhalte über soziale Netzwerke pushen, steht jeder früher oder später vor der selben Frage:  wie lassen sich die Inhalte bestmöglich verbreiten? Im Prinzip ist es ja ganz einfach – schnell ´nen Post oder Tweet verfassen und die URL zum Inhalt reinkopieren. Oder direkt auf die Share- oder Tweet-Buttons klicken, die man extra für solche Zwecke integriert hat. Über diese teilt ja auch der geneigte Leser unsere Inhalte. Zwar sind die Inhalte so recht schnell geteilt, doch für eine optimale Darstellung sind bereits voher einige Schritte zu beachten!

Optimale Bildformate: Jedes Netzwerk hat seine eigenen Regeln

In vielen Fällen stellt man fest: das Aussehen des Posts könnte besser sein. Das Titelbild, das so hervorragend in das Design der Website passte, erscheint nicht automatisch bei Twitter oder wird in Facebook nicht optimal dargestellt. In vielen Fällen ist es zudem nicht sinnvoll, dass Titel und Description der Seite in der Darstellung des Posts verwendet werden. Gerade für kleine Displays mobiler Endgeräte sind diese oft zu lang und werden abgeschnitten. Also, woran liegt`s und was ist zu tun?

Jedes soziale Netzwerk benötigt für die optimale Darstellung bestimmte Bildgrößen bzw. entsprechende Seitenverhältnisse. Ohne Open Graph Elemente verwendet Facebook einfach das Bild des Beitrags und schneidet es auf das benötigte Format zurecht. 

Abbildung: Links in der Abbildung sieht man das Bild, wie es bei uns im Blog erscheint. Rechts sieht man das Aussehen des Post in der üblichen Kartenoptik, jedoch ohne Angabe von Open Graph Tags. In diesem Fall geht es noch, aber die optimale Lösung ist es nicht. Zwei Pfeile fehlen, Männchen und das Fragezeichen wurden abgeschnitten.

Abbildung eines Tweets: Ohne Open Graph Elemente bzw. Twitter-Cards führt die Eingabe einer URL nicht automatisch dazu, dass das Titelbild des Blogbeitrags eingefügt und die gewünschte Kartenoptik dargestellt wird.

Für Werbung auf Facebook  müssen Bilder bestimmte Kriterien erfüllen

Eine weitere Besonderheit sind die Werberichtlinien von Facebook: es können nur Beiträge beworben werden, wenn das Bild nicht mehr als 20% Text enthält. Ob ein Bild geeignet ist, kann hier geprüft werden: https://www.facebook.com/ads/tools/text_overlay

Abbildung: Das verwendete Bild enthält nicht mehr als 20 Prozent Textanteil

Um unsere Blogbeiträge bewerben zu können, haben wir bei contentXXL ein spezielles Visual entworfen, dass die entsprechenden Werberichtlinien erfüllt. Das sorgt zudem für einen hohen Wiedererkennungseffekt, da die Beiträge zu unserem Wissensportal ein einheitliches Aussehen erhalten.

Jetzt aber zum Einsatz der entsprechenden Meta-Angaben: Open Graph und Twitter-Cards

Gestaltung von Posts und Tweets optimieren

Einen Text zu verfassen und ein Bild hochzuladen führt leider nicht zu der gewünschten Kartenoptik. Die „Karten“ werden nur generiert, wenn eine URL geteilt wird. Um dabei Einfluss auf das Bild sowie die weiteren Elemente, insbesondere Titel und Beschreibung, nehmen zu können, sind zusätzliche Meta-Angaben im Quelltext erforderlich. Doch keine Angst: in der Regel muss man nicht direkt an den Code - die benötigten Informationen können einfach über das Backend des CMS eingegeben werden.

Abbildung: Meta-Angaben im Head-Bereich der Seite. Mit Open Graph bzw. Twitter:Cards können Meta-Informationen für Facebook und Twitter bereitgestellt werden. Die Eingabe erfolgt ganz einfach über das CMS.

Die gängigste und einfachste Form stellen die Open Graph Elemente dar. Für Twitter gibt es zusätzlich die Meta-Angaben „Twitter:Cards“. Diese ermöglichen unterschiedliche Darstellungsformen, z.B. mit großem oder kleinen Bild, sowie die Optimierung für bestimmte Inhaltstypen wie zum Beispiel Videos. Werden keine Twitter:Cards angegeben, greift Twitter soweit vorhanden auf Open Graph Elemente zurück.

Bei Open Graph Elementen handelt es sich um Angaben der Art <meta property=…> bei Twitter:Cards handelt es sich um Angaben der Art <meta name=…> Die Meta-Angaben für Facebook und Twitter werden wie gewohnt im Head-Bereich der Seite notiert. Normalerweise übernimmt das jedoch das CMS. Entsprechende Informationen können dort ohne Programmierkenntnisse eingegeben werden.

Mit der Angabe <meta name=“twitter:card“ ….> kann zudem zwischen verschiedenen Kartentypen unterschieden werden. Für redaktionelle Inhalte wie Artikel und Blogposts empfehlen sich die Typen

• Summary_large_image
• Summary

Diese unterscheiden sich lediglich hinsichtlich der Bildgröße. Die grundsätzlichen Elemente sind ansonsten identisch. Mit den zusätzlichen Twitter:Cards „Video“ und „App“ stehen zusätzliche Möglichkeiten für diese beiden Medientypen zur Verfügung. Nähere Infos dazu finden sich direkt bei Twitter: https://dev.twitter.com/cards/types

Abbildung: Das Aussehen von Tweets kann über Twitter:Cards gesteuert werden Hier die Kartentypen "summary_large_image" und "summary". In beiden Fällen sieht man Titel (Projektablauf bei der CMS-Auswahl), Description (Mit planvollem Vorgehen den richtigen Anbieter finden) und das referenzierte Bild, einmal groß, einmal in klein.

Abbildung: Mit der "Player-Card" können Videos direkt in die Timeline geteilt werden. Hierzu ist jedoch ein Whitelisting erforderlich. Twitter prüft die richtige Implementierung der Meta-Angaben und die Lauffähigkeit des Videos.

Fazit

Open Graph und Twitter-Cards sind Meta-Angaben, die im Headbereich der Seite notiert werden. Mit diesen Angaben können Informationen über den Inhalt gezielt für soziale Netzwerke aufbereitet und übermittelt werden. Mit den entsprechenden Angaben nimmt man zudem Einfluss auf das Aussehen geteilter Inhalte und kann so die Darstellung optimieren sowie einen einheitlichen Markenauftritt erreichen. Die speziellen Twitter-Cards werden nicht zwingend benötigt (Twitter versteht auch Open Graph), sie bieten jedoch weitere Darstellungsformen, auch für Medientypen wie Videos.

Titel, Description und das zu verwendende Bild können in der Regel einfach und ohne Programmierkenntnisse über das CMS angegeben werden.

Wie dies in contentXXL erfolgt, erfahren Sie in unserem Tipps und Tricks Beitrag

Abbildung: Eingabe der entsprechenden Angaben im contentXXL CMS. Über den Button "Social Media Meta-Tags" öffnet sich ein Bereich für die entsprechenden Angaben. Die Eingabefelder für Twitter variieren entsprechend der gewählten Card.