Open Graph Protokoll erweitert eine Webseite, mit dieser Erweiterung kann die Webseite in sozialen Kanälen besser dargestellt werden. Das Protokoll sagt dem Netzwerk, z.B. Facebook oder Twitter, welches Bild und welcher Text die Webseite wiederspiegelt.
Open Graph definieren
Die Open Graph Eigenschaften werden im HTML Head definiert und werden mit dem meta Tag gesetzt. Es gibt 4 pflicht Angaben, ohne diese 4 Eigenschaften ist die Open Graph Angabe unvollständig.
Beispiel: https://boolie.org/arbeitsumgebung-einrichten/
<meta property="og:title" content="Arbeitsumgebung einrichten » Boolie.org" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://boolie.org/arbeitsumgebung-einrichten/" />
<meta property="og:image" content="https://boolie.org/wp-content/uploads/2017/12/arbeitsumgebung_teaser-compressor.jpg" />title: der Titel der Seite (frei wählbar)
type: Art des Inhalts (article, book, profile, website, music.song, music.album, music.playlist, music.radio_station, video.movie, video.episode, video.tv_show, video.other)
url: valide URL zur Seite
image: valide URL zum Bild
Des weiteren muss im html Tag das Open Graph Prefix definiert werden.
<html prefix="og: http://ogp.me/ns#">Mit diesen 5 Änderungen / Erweiterungen machst du deine Webseite Social Media tauglich.
optionale Eigenschaften
Hier die von mir gesetzten Open Graph Attribute auf https://boolie.org/arbeitsumgebung-einrichten/.
<meta property="og:locale" content="de_DE" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Arbeitsumgebung einrichten » Boolie.org" />
<meta property="og:description" content="Ich gebe dir hier meine Arbeitsumgebung als Muster, es kann jederzeit angepasst und deinen Wünschen erweitert werden. Es soll dir als Beispiel für die Grundausrüstung dienen." />
<meta property="og:url" content="https://boolie.org/arbeitsumgebung-einrichten/" />
<meta property="og:site_name" content="Boolie.org" />
<meta property="og:updated_time" content="2017-12-03T19:16:44+00:00" />
<meta property="og:image" content="https://boolie.org/wp-content/uploads/2017/12/arbeitsumgebung_teaser-compressor.jpg" />
<meta property="og:image:secure_url" content="https://boolie.org/wp-content/uploads/2017/12/arbeitsumgebung_teaser-compressor.jpg" />
<meta property="og:image:width" content="1000" />
<meta property="og:image:height" content="500" />Eine detaillierte Eigenschaften-Beschreibung findest du unter http://ogp.me/#optional.
