Open Graph und Twitter:Cards – wie Sie entsprechende Meta Angaben in contentXXL verwalten

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

Trackback URL

Open Graph und Twitter-Cards sind Meta-Angaben, die im Headbereich der Seite notiert werden. Mit diesen Angaben können Informationen über eine Website respektive über einen Inhalt speziell für soziale Netzwerke übermittelt werden. Mit den entsprechenden Angaben nimmt man zudem Einfluss auf das Aussehen geteilter Inhalte und kann so die Darstellung in sozialeen Netzen optimieren sowie einen einheitlichen Markenauftritt erreichen. Was Sie genau mit diesen Elementen machen können, erfahren Sie in unserem Blogbeitrag „Open Graph und Twitter Cards – Meta Daten für soziale Netze“.

Nutzung in contentXXL

Das contentXXL CMS bietet Ihnen die Möglichkeit die hierzu benötigten Informationen bequem über das CMS-Backend ohne Arbeiten am Quellcode einzugeben. Die Meta-Angaben können sowohl auf Seitenebene wie auch auf der Ebene einzelner Objekte definiert werden.

Die Möglichkeit entsprechende Angaben auf Objektebene – also für einzelne Artikel – vornehmen zu können, ist insbesondere bei der Darstellung von Artikel in der Listenansicht relevant. Hierbei werden mehrere Artikel auf einer einzigen Seite platziert.

Eine Seite in contentXXL enthält dann eine Übersicht mit Teasern einzelner Artikel. Bei Klick auf einen Artikel wird die Seite lediglich in einem neuen „View“ geöffnet und enthält nun die Detailansicht des Inhalts. Die Seite bleibt aus Sicht des CMS die gleiche. Meta-Angaben und Named URL werden für die Detail-Ansicht dann - insofern sie vom Redakteur definiert wurden - aus dem Artikelobjekt geliefert. Die Vergabe der genannten Meta-Angaben auf Objektebene stellt sicher, dass jeder einzelne Artikel eingene Meta-Informationen erhalten kann.

Vergabe auf Seitenebene

Auf Seitenebene werden die Open Graph Angaben – wie alle anderen Meta-Angaben auch – im Bereich SEO vergeben. Alle Meta-Angaben der Typen

• name
• http-equiv
• property

können hier flexibel hinzugefügt werden. Dies gilt auch für die Open Graph Elemente und verschiedenste Twitter:Cards.

Abbildung: Meta-Angaben unterschiedlichster Art können flexibel erzeugt werden. Auch für Open  Graph und Twitter:Cards.
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=…>

Folgende Angaben sollten mindestens gemacht werden:

Die Meta-Information „Twitter:card“ kann folgende Werte annehmen:

• summary_large_image
• summary
• player
• app

Für Artikel und Blogbeiträge eignen sich „summary“ und „summary_large_image“, die sich lediglich durch die Größe und Seitenverhältnis des Bildes unterscheiden. Nähere Infos zu den Kartentypen und den dazugehörigen Name-Wert-Paare erhalten Sie auch direkt bei Twitter: https://dev.twitter.com/cards/types

Vergabe auf Objektebene

Auch auf Objektebene werden die Angaben (wie auch für die anderen Meta-Daten) im Bereich SEO vergeben. Durch Klick auf die Checkbox „Social Media Meta-Tags“ öffnet sich die entsprechende Eingabemaske.

Die Eingabefelder für Twitter:Cards variieren in Abhängigkeit vom gewünschten Kartentyp. Je nach Auswahl passen sich die Eingabefelder dynamisch an.

Abbildung: Vergabe von Social Media Meta-Tags. Eingabefelder für Twitter variieren in Abhängigkeit von der gewüschten Card

Erklärung der wichtigsten Eingabefelder

Facebook Image

Bestimmen Sie ein vom eigentlichen Titelbild abweichendes Bild speziell für Facebook z.B. wenn Sie oder ein Nutzer den Beitrag teilt. Geben Sie hierzu die URL zum gewünschten Bild an. Die optimale Größe beträgt 1200*628 Pixel. 

Facebook Description

Wenn Sie für Facebook nicht die Meta-Description der Seite verwenden möchten, können Sie hier eine eigene Beschreibung eingeben. Beachten Sie, dass auf Smarphones lange Description u.U. abgeschnitten werden.

Facebook Title

Wenn Sie für Facebook nicht den Title der Seite verwenden möchten, können Sie hier einen abeweichenden Titel eingeben.

Twitter:Card

Twitter-Cards sind spezielle Meta-Elemente. Wird Ihre URL in einem Tweet erwähnt, bestimmen Twitter Cards die Darstellung des Tweets und ermöglichen das Hinzufügen von Medien wie Bild und Video. Für Artikel empfehlen sich Summary oder Summary_Large_Image. Darüber hinaus gibt es eigene Cards zum Teilen von Videos und von Apps.

Twitter:Site

Beschreibt den Twitter-User-Namen (immer mit führendem @ angeben), z.B. @contentXXL

Twitter:Image

Bestimmen Sie das im Tweet integrierte Bild z.B. wenn Sie oder ein Nutzer URL eingeben. Geben Sie hierzu die URL zum gewünschten Bild an. Die optimale Größe beträgt mindesten 280*150px für Summary_Large_Image beziehungsweise 120*120 für Summary 

Twitter:Description

Wenn Sie nicht die Meta-Description der Seite verwenden möchten, können Sie hier eine eigene Beschreibung eingeben. Beachten Sie, dass auf Smarphones lange Description u.U. abgeschnitten werden.

Twitter:Title

Wenn Sie nicht den Title der Seite verwenden möchten, können Sie hier einen abeweichenden Titel eingeben.

Weitere Möglichkeiten für Twitter:Cards

Je nach gewählter Kartenart kommen bei Twitter zusätzliche Eingabefelder in Betracht. Die folgende Abbildung zeigt die Eingabemöglichkeiten für den Kartentyp "Player" im contentXXL CMS. Um diesen nutzen zu können, muss die Funktion für die betreffende Seite freigeschalten werden. Der Antrag wird über den Card-Validator von Twitter eingereicht. Twitter prüft die Funktionsfähigkeit des Videos und insbesondere die richtige Angabe der Meta-Daten. Sind alle Voraussetzungen erfüllt, erhält Ihre Seite von Twitter ein "Whitelisting" für das Teilen von Videos mittels Player-Card. Mehr Infos zu Kartentypen und den Card-Validator finden Sie hier:

https://dev.twitter.com/cards/types
https://cards-dev.twitter.com/validator

Automatische Ausgabe der Meta-Daten im Quelltext

Die gemachten Angaben werden automatisch im Quelltext eingefügt. Sind Angaben auf Objektebene vorhanden haben diese Vorrang vor den Angaben der Seitenebene.

Die Meta-Angaben haben Einfluss darauf, wie Ihre Inhalte nach dem Teilen in sozialen Netzen (Twitter:Cards natürlich nur bei Twitter) dargestellt werden.

Abbildung: Das Aussehen von Tweets kann über Twitter:Cards gesteuert werden.
(oben Kartentypen: Summar_large_image und Summary