Open Graph: OG für einfaches Teilen von Inhalten auf Facebook

Das Open Graph Protokoll, welches von Facebook eingeführt wurde, sorgt für einfaches Teilen deiner Inhalte. So kannst du Facebook beim Teilen alle wichtigen Seiteninhalte mitteilen.
Etwas ähnliches gibt es auch als Twitter Card, welches ich als extra Artikel noch behandeln möchte. Hier soll es nun um Facebook gehen und das OG Protokoll genauer beschreiben.

So funktioniert es:

Verschiedene Meta-Angaben werden im Seitenkopf (HTML HEAD) gesetzt. Das OG Protokoll erlaubt es, relevante Seiteninhalte für das teilen in Facebook zu definieren. Unter Anderem Bilder, Seitentitel, URL, Content-Language uem. Genaueres kannst du auf der Seite von ogp.me nachschlagen.

Inhalte bei Facebook einfach teilen: Open Graph Protokoll OG

Inhalte bei Facebook einfach teilen: Open Graph Protokoll OG

Im Screenshot ein geteiler Inhalt dieser Seite, das Bild fehlt, da der Artikel kein Bild hatte. Bilder werden, insofern angegeben, mit im Snipped angezeigt.

So sieht das Quellcode-Beispiel aus:
<meta property="og:title" content="Open Graph: OG für einfaches Teilen von Inhalten auf Facebook" />


Wie du im Code erkennen kannst, wird eine Meta-Angabe mit der property="og:..." genutzt. Unter content="..." wird dann er Inhalt für die OG-Variable zugewiesen.

Folgende wichtige Open Graph Protokoll-Angaben gibt es


og:title
Der Seitentitel. Füt diesen Artikel wäre der Content: Open Graph: OG für einfaches Teilen von Inhalten auf Facebook

og:description
Textauszug bzw. Kurzbeschreibung. Diese wird als Snipped/als geteilten Auszug in Facebook angezeigt. Siehe Screenshot oben.

og:url
Die URL-Adresse des Inhaltes. Du könntest auch ein Shortlink nutzen, jedoch wird dies im Auszug auch angezeigt, was unschön aussehen kann.

og:type
Der Typ des Inhaltes. Wenn du diesen Artikel bei Facebook teilst, wird Facebook der Typ "article" übermittelt.
Mögliche Angaben:
  • article
  • video.movie
  • music.song
  • website

Diese Angaben sind auch kombinierbar. Hier ein paar Beispiele:
article:published_time = Datetime im Format YYYY-MM-DD optional mit Stunde und Minute

article:author = Autor des Artikels


Eine Meta Angabe könnte dann so aussehen:
<meta property="og:type" content="article" /><meta property="og:article:author" content="Marcus" />


Alle Angaben findest du hier: ogp.me

Quellcode zum einfachen einbinden in deine Webseite

Zum Schluss ein Beispiel, wie bei Webmaster-Glossar.de die einfache Artikel-Metas aussehen.
Natürlich musst du mit PHP oder wie auch immer, den Inhalt für Content selbst noch einfügen, damit es funktioniert.

<html><head><meta property="og:title" content="" /><meta property="og:description" content="" /><meta property="og:url" content="" /><meta property="og:type" content="article" /><meta property="og:site_name" content="" /><meta property="og:image" content="" /><meta property="og:locale" content="de_DE" />...</head><body>...</body></html>


Es würde mich freuen, wenn du diesen Artikel teilst!
Demnächst folgt noch das Twitter-Protokoll zum einfachen teilen auf Twitter!