Oft verlocken gepostete Links in den sozialen Netzwerken wenig dazu, sie anzuklicken. Denn während Du die Google-Suchergebnisse über die Meta-Description gestalten kannst, reicht dies für Facebook und Co. nicht aus: Artikelbilder werden zurechtgeschnitten und wenig verlockende Titel angezeigt. An dieser Stelle kommen die Open Graph Tags ins Spiel.

Was ist Open Graph?

Hinter dem Namen Open Graph verbergen sich Meta-Angaben, die Du in Dein Blog einfügen kannst. Diese übermitteln Informationen an soziale Netzwerke, die beeinflussen, wie geteilte Links dargestellt werden.

Postest Du einen Link zu einer Seite ohne Open Graph Tags, verwenden die sozialen Netzwerke für die Anzeige meist irgendein Bild Deines Blogs und den Meta-Title der verlinkten Seite. Mit den Tags kannst Du hingegen genau angeben, welches Bild und welcher Titel angezeigt werden sollen.

Open Graph ermöglicht dir also, die Anzeige der geteilten Links deutlich attraktiver für andere Nutzer zu gestalten, wodurch die Interaktionsrate steigt. Twitter verwendet eine eigene Variante dieser Angaben, die Twitter Cards, kann aber auch die Open Graph Tags auslesen.

Wichtige Tags

Damit ein Link so dargestellt wird, wie Du es möchtest, sind einige Open Graph Tags zwingend nötig. Dies sind:

  • og:title – dieser Tag gibt den Titel Deines verlinkten Artikels an. Der Titel sollte nicht länger als 60 Worte sein.
  • og:type – dies ist der Medientyp Deines Inhalts, z. B. article oder movie
  • og:image – mit diesem Tag definierst Du die URL des Bildes, das angezeigt werden soll
  • og:url – dieser Tag gibt die kanonische URL Deiner Seite an

Darüber hinaus gibt es eine Vielzahl weiterer Tags, die Du optional hinzufügen kannst. Dazu gehören z. B. og:description, mit dem Du eine kurze Beschreibung des Inhaltes hinzufügst. Den og:image Tag kannst Du um Angaben zu den Maßen des Bildes erweitern, in denen es angezeigt werden soll.

Die Open Graph Tags müssen im HTML der jeweiligen Seite im Head-Bereich ausgegeben werden. Und zwar immer in der Schreibweise:

<meta property="Hier steht der Open Graph Tag" content="Hier steht der Wert für den Tag" />

Dies sieht für diesen Artikel z.B. so aus:

<head>
[...]
<meta property="og:type" content="article" />
<meta property="og:title" content="Open Graph – Dein Blog im Social Web" />
<meta property="og:description" content="Mit Hilfe von Open Graph kannst du bestimmen wie Deine Shares in Sozialen Netzwerken aussehen. Wir zeigen wie es geht und worauf du achten musst." />
<meta property="og:url" content="https://wphelp.de/open-graph" />
<meta property="og:image" content="https://wphelp.de/wp-content/uploads/2017/08/open-graph-opengraph.png" />
[...]
</head>

Besser mit Plugin

Open Graph Tags lassen sich in WordPress sehr viel leichter mithilfe von Plugins nutzen. Geeignete Plugins sind z. B. Yoast SEO, das Dir außerdem noch mit der Suchmaschinenoptimierung und Metabeschreibung Deiner Artikel hilft. Ebenfalls sehr gut verwendbar ist Facebook Open Graph, Google+ and Twitter Card Tags oder das OG Plugin. Um sicherzustellen, dass es später keine Fehler gibt, kannst Du Links im Facebook Debugger testen. Allerdings erst, wenn die Seite veröffentlicht wurde.

Die Herausforderung der Bildformate

Die verschiedenen Netzwerke haben sehr teilweise sehr unterschiedliche Forderungen an die Bildformate. Zusätzlich ändern sich diese Formate regelmäßig. Unpassende Bilder werden in der Linkvorschau zurechtgeschnitten, was nicht immer gut aussieht.

Mit dem og:image Tag ist es möglich, für verschiedene Netzwerke verschiede Grafikformate anzugeben. Meist ist jedoch ein Bild im 2:1 Format als universelle Lösung vollkommen ausreichend. Wir selbst nutzen beispielsweise eine Auflösung von 1024 × 512 Pixel für unsere eigenen Open Graph Bilder.

Fazit

Wer Open Graph Tags nicht nutzt, verschenkt leicht Potential. Damit der hochwertige Inhalt Deines Blogs auch in den sozialen Netzwerken zur Geltung kommt und nicht einfach übergangen wird, solltest Du aktiv dafür sorgen, dass er bestmöglich dargestellt wird.