Bestimmt wollte jeder von euch eure Webseite bei Facebook posten und dabei merkt man, dass das ja gar nicht so toll wie bei den anderen aussieht. Genau dafür hat Facebook die Open Graph Tags (OG Tags) eingeführt. Ich zeige euch, wie ihr sie verwendet.
Zu erst einmal: Was sind überhaupt diese Open Graph Tags?
Die OG Tags sind spezielle Meta Tags für Facebook. Sie gehören nicht zum offiziellen W3C Standard. Die Browser haben damit aber keine Probleme. Mithilfe dieser Meta Tags kann bestimmt werden, was Facebook anzeigt, sobald ihr einen Link posten wollt.
Welche OG Tags gibt es und wie werden sie verwendet?
Das ganze können wir uns als Beispiel mal bei der New York Times anschauen.
<meta property="og:url" content="http://www.nytimes.com" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Breaking News, World News & Multimedia" /> <meta property="og:description" content="The New York Times: Find breaking news, multimedia, reviews & opinion on Washington, business, sports, movies, travel, books, jobs, education, real estate, cars & more at nytimes.com." /> <meta property="og:image" content="http://static01.nyt.com/images/icons/t_logo_291_black.png" />
Wie man jetzt schon erkennen kann sind die Namen der Tags eigentlich schon selbst sprechend genug. Trotzdem gehe ich kurz auf die wichtigsten ein.
og:url
Der og:url Meta Tag wird dazu verwendet um die URL der Webseite anzugeben. Selbst wen der eigentliche Link auf Facebook anders aussieht werden immer die Daten aus der hinterlegten URL benutzt, so braucht ihr auf Unterseiten die Tags nicht speziell anpassen.
og:type
Mithilfe des Types könnt ihr angeben um was für eine Webseite bzw. Unterseite es sich haltet. Möchtet die Tags für einen Artikel anpassen, so könnt ihr das angeben und Facebook weiß das es sich um einen Artikel und nicht um eine normale Webseite handelt. Die komplette Liste könnt ihr euch hier anschauen.
og:title
Der Titel verhält sich genau so wie der normale title Meta Tag. Damit bestimmt ihr den Titel, wenn ihr den Tag aber weglässt nimmt Facebook einfach den Wert aus dem normalen title Tag.
og:description
Hier verhält sich das ganze genau so wie mit dem og:title.
og:image
Hier definiert ihr welches Bild beim Post angezeigt werden soll. Wie ihr das am besten macht erfahrt ihr hier.
Facebook hat für die Open Graph Tags eine ausführliche Dokumentation geschrieben, hier findet ihr auch alle weiteren Tags um eure Seite noch spezifischer anzupassen.