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" />

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 Joomla-Website wurde das Phoca Open Graph Plugin für die Umsetzung (teilweise) 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.
🔴 sponar.IT-consulting
Abonniere den kostenlosen und werbefreien Newsletter mit Neuigkeiten von sponar.IT-consulting.
Mit dem Ausfüllen der Formularfelder und dem Klick auf „Anfordern“, stimme ich der Datenschutzerklärung zum Newsletter
Datenschutzerklärung zu meinen Newslettern

Du erhältst den/die von dir ausgewählten Newsletter kostenlos an die von dir angegebene E-Mail Adresse.

Warum soll ich meinen Namen angeben?

Deine im Feld „Name“ eingegebenen Zeichen werden im Newsletter für die Anrede verwendet. Wenn du keinen Namen angibst wird dieser aus der E-Mail Adresse automatisch generiert.

Mit welchen Inhalten kann ich rechnen?

sponar.IT-consulting: Du wirst in erster Linie über neue Beiträge aus dem IT-Bereich dieser Website informiert. Auch aktuelle und weiterführende IT-Themen, Projektarbeiten oder anstehende Veranstaltungen können Bestandteil sein.
Eisenbahnromantiker: Ich informiere dich über neue Blogbeiträge in der Rubrik des Eisenbahnromantikers. Auch Themen rund um die Eisenbahn oder anstehende Veranstaltungen können Bestandteil sein.

Die Newsletter beinhalten keine Werbung.

Datenverarbeitung

Die Abwicklung des elektronischen Versands und die dafür erforderliche Datenspeicherung erfolgt am selben Server auf dem diese Website gehostet ist. Dies hat den Vorteil, dass bei diesem Verfahren keine Daten an Dritte (z.B.: Server in den USA) übermittelt werden, sondern ausschließlich auf Servern des Website‑Inhabers in Österreich verbleiben.

Wie häufig werden die Newsletter versendet?

Die Newsletter werden ungefähr einmal pro Quartal versendet. Die genaue Frequenz hängt auch von den Themen und aktuellen Ereignissen ab.

Double-Opt-In und Opt-Out

Du erhältst eine sog. Double-Opt-In-E-Mail, in der du um Bestätigung deiner Anmeldung gebeten wirst. Du kannst die Newsletter jederzeit abbestellen (sog. Opt-Out). Einen Abmeldelink findest du in jedem Newsletter.

Statistiken und Erfolgsmessung

Um die Newsletter für dich zu optimieren sowie Mißbrauch durch Dritte entgegenzuwirken willigst du mit dem Klick auf „Anfordern“ auch in die Auswertung ein, mit der gemessen wird, wie häufig die Newsletter geöffnet werden und auf welche Links die Leser klicken.

Datenschutzhinweise

Weitere Informationen zum Versandverfahren, den Statistiken sowie deine Widerrufsmöglichkeiten erhältst du unter dem Menüpunkt »Datenschutz« auf dieser Website.

 zu.

Newsletter anfordern