Mit Open Graph und Twitter Cards lassen sich geteilte Inhalte einer Webseite in den Sozialen Medien optimieren und attraktiver gestalten. – Meta Daten für soziale Netze.
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=…>.
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="Wie verwende ich Open Graph und Twitter Cards?">
og:description
Dieser Tag enthält die Beschreibung der Webseite. Die maximale Zeichenlänge liegt hier bei 297 Zeichen.
<meta property="og:description" content="Mit Open Graph und Twitter Cards lassen sich geteilte Inhalte einer Webseite in den Sozialen Medien optimieren und attraktiver gestalten. – Meta Daten für soziale Netze.">
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://juergen-schadek.de/assets/juergen-schadek_de/blog/open_graph-beispiel.png">
og:url
Der Link zur Webseite. Er können hier auch trackbare Links angegeben werden.
<meta property="og:url" content="https://juergen-schadek.de/blog/open-graph-und-twitter-cards">
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="website">
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="Jürgen Schadek">
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
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="Wie verwende ich Open Graph und Twitter Cards?">
twitter:description
Dieser Tag enthält die Beschreibung der Webseite.
<meta name="twitter:description" content="Mit Open Graph und Twitter Cards lassen sich geteilte Inhalte einer Webseite in den Sozialen Medien optimieren und attraktiver gestalten. – Meta Daten für soziale Netze.">
twitter:image
Neben dem Titel ist das Bild der prominenteste Teil der Vorschau.
<meta name="twitter:image" content="https://juergen-schadek.de/assets/juergen-schadek_de/blog/open_graph-beispiel.png">
twitter:site
Das zu der Webseite gehörende Twitter-Profil.
<meta name="twitter:site" content="@Juergen_Schadek">
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="Mit Open Graph und Twitter Cards lassen sich geteilte Inhalte einer Webseite in den Sozialen Medien optimieren und attraktiver gestalten. – Meta Daten für soziale Netze.">
<meta name="author" content="Jürgen Schadek">
<meta property="og:title" content="Wie verwende ich Open Graph und Twitter Cards?">
<meta property="og:description" content="Mit Open Graph und Twitter Cards lassen sich geteilte Inhalte einer Webseite in den Sozialen Medien optimieren und attraktiver gestalten. – Meta Daten für soziale Netze.">
<meta property="og:image" content="https://juergen-schadek.de/assets/juergen-schadek_de/blog/open_graph-beispiel.png">
<meta property="og:url" content="https://juergen-schadek.de/blog/open-graph-und-twitter-cards">
<meta property="og:type" content="website">
<meta property="og:locale" content="de_DE">
<meta property="og:site_name" content="Jürgen Schadek">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Wie verwende ich Open Graph und Twitter Cards?">
<meta name="twitter:description" content="Mit Open Graph und Twitter Cards lassen sich geteilte Inhalte einer Webseite in den Sozialen Medien optimieren und attraktiver gestalten. – Meta Daten für soziale Netze.">
<meta name="twitter:image" content="https://juergen-schadek.de/assets/juergen-schadek_de/blog/open_graph-beispiel.png">
<meta name="twitter:site" content="@Juergen_Schadek">
<title>Wie verwende ich Open Graph und Twitter Cards? | Jürgen Schadek</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.