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 - mit Joomla erstellten - Website ü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" />
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.
Eine ausführliche Beschreibung finden Sie bei Facebook for developers .
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):
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.
