Mit Hilfe von Open Graph (Meta-) Tags ist es möglich zu steuern, wie die Vorschau auf eine geteilte Website in verschiedenen Social-Media- Anwendungen dargestellt wird. Durch die aktive, redaktionelle Befüllung dieser Meta-Angaben soll ein inhaltlich wie auch visuell möglichst ansprechendes Ergebnis bereitgestellt werden, welches den Adressaten einlädt, dem geteilten Link zu folgen.

Bild vergrößern Beispielanwendungen von Open Graph Tags beim Teilen der URL https://bundesregierung.de mittels v.l.n.r.: Facebook, Twitter, Telegram Messenger, SMS (Android)

Technische Implementierung und Bereitstellung

Die Open Graph Tags sollten im HTML-Code jeder Webseite hinterlegt sein. Sie folgen den Spezifikationen des Open Graph Protocol und sind einzusehen unter https://ogp.me/. Sofern keine Open Graph Meta-Tags im Quellcode der zu teilenden Seite hinterlegt sein sollten, werden die Inhalte der Vorschau von der jeweiligen Social-Media-Anwendung frei zusammengestellt. Häufig führt dies zu unpassenden Ergebnissen. Es sollten daher mindestens folgende Tags technisch implementiert werden:

og:type

• in den meisten Fällen vom Typ "website"
• steuert u.a. das Layout der Vorschau-Ansicht
• redaktionelle Bearbeitung/Anbindung an CMS-UI nicht zwingend notwendig

og:title

• Titel, der den geteilten Inhalt bestmöglich beschreibt
• häufig der Page-Title (siehe HTML Title-Tag)
• seperate, redaktionelle Bearbeitung, daher meist nicht nötig

og:description

• Kurzbeschreibung der geteilten Inhalte in maximal zwei Sätzen
• häufig einhergehend mit der HTML-Meta-Description

og:url

• URL der geteilten Seite
• keine redaktionelle Bearbeitung/Anbindung an CMS-UI nötig

og:image

• Vorschaubild, welches den Inhalt der geteilten Seite möglichst attraktiv symbolisiert
• Sollte der Inhalt der geteilten Seite keine Bilder beinhalten, kann hier ein allgemeiner Platzhalter eingesetzt werden. Empfehlenswert ist hierfür die Bildwortmarke des Absenders.
• Das Bild sollte exakt 1200 x 630 Pixel (Seitenverhältnis 1,9:1) oder 1200 x 1200 Pixel (quadratisch) aufweisen und im jpg-Format bereitgestellt werden.
• redaktionelle Bearbeitung/Anbindung an CMS-UI sinnvoll

Bild vergrößern Open Graph Tags und deren Einsatz im Layout; hier am Beispiel Facebook