Open Graph & Twitter Cards

Teilen von Webseiten-Inhalten auf Sozialen Medien

Facebook Profile - Social Media

Was sind eigentlich Open Graph Tags & Twitter Cards?

Werden Inhalte einer Webseite in den Sozialen Medien geteilt, wird automatisch eine Vorschau der geteilten Webseite erstellt und in dem Post angezeigt. Diese Vorschau enthält in der Regel den Titel, einen Textausschnitt und eine Grafik von der verlinkten Seite.

Um diese Vorschau zu optimieren, kann man Tags in den Quellcode der Webseite einbauen. Diese Attribute für das attraktive Aussehen der Vorschau werden Open Graph bzw. Twitter Cards genannt. 

Das Open Graph Protocol wurde ursprünglich von Facebook entwickelt, wird aber inzwischen auch von Twitter und anderen Netzwerken unterstützt. 

Mit Twitter Cards lassen sich verschiedene Karten-Varianten bauen, die dann mit dem eigentlichen Post zusammen als erweiterter Tweet angezeigt werden.

Welche Open Graph Tags gibt es?

Die Open Graph Tags werden im HTML-Head definiert und mit dem meta-Tag gesetzt.

Bei Open Graph Elementen handelt es sich um Angaben der Art „<meta property=…>“. 

Open Graph - Beispiel

og:title

Dies ist der eigentliche der Titel der Webseite. Er wird neben dem Bild am prominentesten angezeigt. Die maximale Zeichenlänge beträgt 95 Zeichen. Ohne Zeilenumbruch sind es 50 Zeichen.

<meta property="og:title" content="neues Projekt: DatenGenossen | DatenGenossen">

og:description

Dieser Tag enthält die Beschreibung der Webseite. Die maximale Zeichenlänge liegt hier bei 297 Zeichen.

<meta property="og:description" content="Worum geht es in diesem WebLog? Wer schreibt diesen WebLog? All das erfahrt ihr hier...">

og:image

Neben dem Titel ist das Bild der prominenteste Teil der Vorschau. Es sollte mindestens 1200 x 630 Pixel haben, da es im Newsfeed sehr groß angezeigt wird und so auch auf hochauflösenden Geräten gut dargestellt werden kann.

<meta property="og:image" content="https://datengenossen.net/assets/images/datengenossen---hero.jpg">

og:url

Der Link zur Webseite. Er können hier auch trackbare Links angegeben werden.

<meta property="og:url" content="https://datengenossen.net/blog/datengenossen-weblog-rund-um-das-internet-und-die-it-welt">

og:type

In den meisten Fällen kannst Du für og:type die Ausprägungen “website”, “blog” oder “article” verwenden. Solltest Du jedoch mit weiteren Medien wie Musik, Videos, Büchern oder Ähnlichem arbeiten, lohnt sich das genauere Betrachten der og:type Eigenschaften auf jeden Fall.

<meta property="og:type" content="article">

og:locale

Die Region und Sprache der Webseite.

<meta property="og:locale" content="de_DE">

og:site_name

Der Name der Webseite.

<meta property="og:site_name" content="DatenGenossen">

Debugger für Open Graph Tags

Sehr praktisch für die Optimierung Deiner Open Graph Tags ist der Facebook Object Debugger. Dieser zeigt Dir an, welche Informationen Facebook zu einer URL gespeichert hat beziehungsweise wie die URL im Stream angezeigt wird. Um den Debugger zu verwenden, benötigst Du ein gültiges Facebook-Konto.

Welche Twitter Card Tags gibt es?

Für Twitter gibt es zusätzliche Meta-Angaben, die „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 Twitter:Cards handelt es sich um Angaben der Art „<meta name=…>“. 

Twitter Card - Beispiel

twitter:card

Es kann zwischen verschiedenen Kartentypen gewählt werden. Für redaktionelle Inhalte wie Artikel oder Blog-Einträge empfehlen sich die Typen „summary_large_image“ oder „summary“. Diese unterscheiden sich lediglich hinsichtlich der Bildgröße.

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

<meta name="twitter:card" content="summary_large_image">

twitter:title

Dies ist der eigentliche der Titel der Webseite. Er wird neben dem Bild am prominentesten angezeigt.

<meta name="twitter:title" content="neues Projekt: DatenGenossen | DatenGenossen">

twitter:description

Dieser Tag enthält die Beschreibung der Webseite.

<meta name="twitter:description" content="Worum geht es in diesem WebLog? Wer schreibt diesen WebLog? All das erfahrt ihr hier…">

twitter:image

Neben dem Titel ist das Bild der prominenteste Teil der Vorschau.

<meta name="twitter:image" content="https://datengenossen.net/assets/images/datengenossen---hero.jpg">

twitter:site

Das zu der Webseite gehörende Twitter-Profil.

<meta name="twitter:site" content="@DatenGenossen">

Validator für Twitter Cards

Um die Vorschau für Deine Twitter-Shares zu testen, kannst du den Twitter Card Validator verwenden.

Beispiel

<!DOCTYPE html>
<html lang="de">
  <head>
    ...
    <meta name="description" content="Worum geht es in diesem WebLog? Wer schreibt diesen WebLog? All das erfahrt ihr hier...">
    <meta name="author" content="Jürgen Schadek - DatenGenossen">

    <meta property="og:title" content="neues Projekt: DatenGenossen | DatenGenossen">
    <meta property="og:description" content="Worum geht es in diesem WebLog? Wer schreibt diesen WebLog? All das erfahrt ihr hier...">
    <meta property="og:image" content="https://datengenossen.net/assets/images/datengenossen---hero.jpg">
    <meta property="og:url" content="https://datengenossen.net/blog/datengenossen-weblog-rund-um-das-internet-und-die-it-welt">
    <meta property="og:type" content="article">
    <meta property="og:locale" content="de_DE">
    <meta property="og:site_name" content="DatenGenossen">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="neues Projekt: DatenGenossen | DatenGenossen">
    <meta name="twitter:description" content="Worum geht es in diesem WebLog? Wer schreibt diesen WebLog? All das erfahrt ihr hier...">
    <meta name="twitter:image" content="https://datengenossen.net/assets/images/datengenossen---hero.jpg">
    <meta name="twitter:site" content="@DatenGenossen">

    <title>neues Projekt: DatenGenossen | DatenGenossen</title>
    ...
  </head>
...
</html>

Fazit

Mit Open Graph Tags lassen sich geteilte Inhalte in den Sozialen Medien sehr einfach optimieren und attraktiver gestalten. 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.