Unterstützung des Open Graph-Protokolls
von Tilo Schröder | Kategorie Allgemein | 0 Kommentare
Mit Version 1.02 dieses Themes wird das Open Graph Protokoll integriert. Damit können Inhalte auf Websites klassifiziert und semantisch ausgezeichnet werden. Anwendungen z.B. in Sozialen Netzwerken greifen auf diese Informationen zu und werten sie aus.
Dabei ist der Einsatz des Open Graph Protokolls nicht nur für diejenigen interessant, die die Share-Button (z.B. Facebook Like-Button) in ihr Theme integriert haben, sondern verbessert insgesamt die Verbreitung von Artikeln (Share) in Sozialen Netzwerken.
In diesem Artikel wird die Funktionsweise des Open Graph Protokolls vorgestellt und ein Überblick gegeben, an welcher Stelle im Theme welche Meta-Tags integriert sind.
Allgemein
Der Einsatz des Open Graph Protokolls eignet sich nicht nur für Webseiten, die die Share-Button der Sozialen Netzwerke integriert haben. Da Inhalte, z.B. ein Artikel auf einer Website, immer häufiger von den Usern geteilt und in Sozialen Netwerken gepostet werden, ist der Einsatz des Open Graph Protokolls auch für herkömmliche Websites geeignet.
Im nachfolgenden Beispiel wird einmal das Verhalten ohne den Einsatz und einmal mit dem Einsatz des Open Graph Protokolls am Beispiel von Facebook demonstriert. Standardmässig greift Facebook beim Posten eines Artikels auf die Meta-Tags im HTML-Kopfbereich der Seite zu. So wird z.B. der title-Tag und die Description ausgewertet.
Im ersten Beispiel wurde ein Artikel von Endstation Rechts ohne Open Graph-Angaben über den Like-Button empfohlen. Wie dabei auf dem Bild zu erkennen ist, wird als Artikel-Bild nicht das eigentliche Bild des Artikels angezeigt, sondern ein zufällig ausgewähltes (in diesem Fall das Icon zum Google+ Account) aus der gesamten Webseite.
Das zweite Beispiel zeigt einen Artikel von Endstation Rechts. Bayern. In diesem Beispiel wurde auf Facebook das im Artikel verwendete Bild genutzt und angezeigt.
Standard Meta-Tags
Folgende vier Meta-Tags sind vom Open Graph Protokoll vorgeschrieben:
<head>
<title>...</title>
<meta property="og:type" content="..." />
<meta property="og:title" content="..." />
<meta property="og:url" content="..." />
<meta property="og:image" content="..." />
...
</head>
Erläuterung
- og:type
Object-Typ (z.B. Artikel, Video) - og:title
Der Titel des Objektes (z.B. der Titel des Artikels) - og:url
Die URL (Permalink) zum Objekt (z.B. URL zum Artikel) - og:image
Bild-URL (z.B. URL zum Artikel-Bild oder Logo)
Verwendete Meta-Tags
Folgende Meta-Tags werden in diesem Theme automatisch bei einem Artikel im Header verwendet:
<head>
<title>...</title>
<meta property="og:type" content="article" />
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:url" content="..." />
<meta property="og:image" content="..." />
<meta property="og:locale" content="de_DE" />
...
</head>
Erläuterung
- og:type
Der Artikel wird als explizit als Artikel ausgezeichnet - og:title
Der Titel des Artikels - og:description
Auszug aus dem Artikel - og:url
Die URL (Permalink) zum Artikel - og:image
Bild-URL (URL zum Artikel-Bild oder Logo) - og:locale
Sprachangabe (in diesem Fall deutsch)
Überprüfung und Debugging
Mit dem Debugging-Tool von Facebook kann man testen, welche Angaben einer Website von Facebook ausgewertet werden:
https://developers.facebook.com/tools/debug
Neueste Kommentare