Open Graph

Implementierung der „Open Graph“ Meta-Tags.

Das „Open Graph“ Protokoll ermöglicht die strukturierte Übergabe von Inhalten ihrer Website an Soziale Netzwerke. Ich verwende diese Tags um Bilder und Texte dieser Website (die Sie eben betrachten) über eine kanonische URL in Facebook zu teilen oder den Messenger zu versenden.

Warum „Open Graph“?

Mit Hilfe der „Open Graph“ Meta-Tags können Sie das Augenmerk der Facebook- oder Messenger-Nutzer noch mehr auf ihr Angebot lenken. Mehr Traffic und bessere Conversions für ihre Website oder ihren Shop sind möglich.

Wie funktioniert das?

Open Graph ermöglicht die Integration und Interaktion von Webseiten in/mit Facebook mit Hilfe von Apps und Meta Tags. Auf Webseiten lassen sich durch Social Plugins beispielsweise Like-Buttons oder Facebook-Kommentarfelder einbinden. Websitebesucher können so durch das einfache Teilen von Produkten und Dienstleistungen ihr Angebot über ihr Facebook-Profil verbreiten. Angebote können kommentiert werden, Inhalte mit wenigen Klicks geteilt und beworben werden.

Sie können beispielsweise den og:image Tag verwenden, um festzulegen, welches Bild Facebook verwenden soll, wenn eine Ihrer Seiten geteilt wird. Durch die Angabe von Open Graph-Informationen muss Facebook dann nicht raten, welche Informationen beim Teilen Ihrer Seiten verwendet werden sollen.

Die „Open Graph“ Meta-Tags müssen innerhalb des HTML <head> ... </head> Elements (Kopf) platziert werden.

Codebeispiel für „Open Graph“ Meta Tags

<meta property="og:title" content="Peter Sponar" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://sponar.com/images/logo-sponar.jpg" />
<meta property="og:url" content="https://sponar.com" />
<meta property="og:site_name" content="sponar.IT-consulting" />
<meta property="og:description" content="Erstaunliches zwischen Mensch und Computer" />

Seit dem 3. Februar 2020 können keine URIs mehr angegeben werden, die eine anderen Domain als die kanonische URL aufweisen – es sei denn, diese Domain hat ihre Domain im Webmaster-Tool von Facebook ausdrücklich auf eine Whitelist gesetzt.

Der „Open Graph“-Meta-Tag og:image

Mit dem Tag og:image können Sie die URL des Bildes angeben, das angezeigt werden soll, wenn jemand den Inhalt auf Facebook teilt.

  • Die Bilder müssen mindestens 200 x 200 Pixel groß sein.

  • Die Größe der Bilddatei darf 8 MB nicht überschreiten.

  • Die beste Anzeige auf Geräten mit hoher Auflösung erhalten Sie bei Bildern mit einer Größe von mindestens 1200 x 630 Pixeln.

  • Für die Anzeige von Link-Seitenbeiträgen mit größeren Bildern sollten Bilder mit mindestens 600x315 Pixel Größe verwendet werden.

Beispiel für eine auf Facebook geteilte URL

Open Graph Beispiel: Geteilte URL in Facebook

Eine ausführliche Beschreibung finden Sie bei facebook for developers .

Tipp:
Setzen Sie auf ihrer Website matomo als Analystetool ein, so schließen Sie den Facebook Trackingparameter „fbclid“ aus. Mit dieser Facebook Click ID (fbclid) weist Facebook jedem Nutzer eine eindeutige ID in der Ziel-Url von Links in Werbeanzeigen, organischen Posts oder in privaten Nachrichten zu. Solche Variablen nutzt Facebook für zusätzliche Auswertungen und das „Tracken“ der Benutzer, vorbei an der DSGVO. Das kann zu großen Problemen bei den Webanalyse-Berichten der eigenen Site führen. Siehe: How do I exclude URL query parameters from the URLs tracked, and from Pages reports? . Sinngemäß können Sie dieses Vorgehen auch für Google Analytics anwenden.

Facebook Sharing Debugger

Mit dem Facebook Sharing Debugger können Sie sich ansehen, wie Facebook Ihre Seiten-Inhalte in Beiträgen anzeigt, wenn Links von Ihren Seiten auf Facebook geteilt werden. Anschließend können Sie eventuelle Probleme mit ihren Open Graph-Tags beheben. Für die Nutzung des Facebook Sharing Debugger ist ein Facebook Konto erforderlich.

Facebook Application ID

Gleich vorweg: Die Bezeichnung Application oder App ID ist in diesem Zusammenhang etwas irreführend. Auch ohne einer Facebook App kommen Sie zu ihrer Application ID.

Wenn Sie sich registrieren, generiert Facebook eine eindeutige App-ID für Ihre App. Diese werden Sie häufig verwenden, da sie bei allen Aufrufen der Facebook APIs angegeben werden muss. Alle Facebook SDKs bieten ihnen eine Möglichkeit, diese einfach einzustellen, so dass sie automatisch bei allen API-Aufrufen angegeben wird.

Hier die erforderlichen Schritte für Nutzer des „Phoca Open Graph Plugin“ für Joomla (Ein Facebook Konto ist erforderlich):

  • 1.
    Erstellen Sie kostenlos ihre Facebook App ID: Facebook for Developers
  • 2.
    Kopieren Sie ihre Facebook App ID aus dem App-Dashboard
  • 3.
    In den »Common Options« des Phoca Open Graph Content Plugin tragen Sie nun die »Application ID« ein
  • 4.
    Die Änderungen im Plugin Speichern
  • 5.
    Joomla und ggf. andere Caches der Site löschen
  • 6.
    Erneut den Facebook Sharing Debugger anwerfen und die Ergebnisse überprüfen

Datenschutz

Mit „Open Graph“ Meta-Tags werden Facebook lediglich Informationen von dieser Website angeboten. Diesbezüglich sind keine weiteren Angaben auf der anbietenden Website erforderlich.

Technische Umsetzung

Auf dieser Website wurde das Phoca Open Graph Plugin für die Umsetzung implementiert. Es wird auf Basis einer GNU General Public License, version 3 von phoca.cz angeboten. Als »Render Type« in den »Common Options« habe ich „Property“ gewählt.
Phoca Open Graph Plugin
Phoca Open Graph ist für Joomla verfügbar
Achtung!
Dieser Beitrag ersetzt keine Rechtsberatung! Für die Vollständigkeit, Aktualität und Richtigkeit der hier bereitgestellten Inhalte wird keine Haftung übernommen.