5202

ein Blog über technische Fragen zu Blogger

Facebook Open-Graph-Tags für Blogger

von

Teilt ihr auf Facebook einen Blogger Post und möchtet für diesen Post eine Vorschau mit Bild erzeugen ... habt ihr unter Umständen ein Problem.

Facebook sucht das Bild für die Vorschau nämlich nicht zwingend im Post selber, sondern nimmt, wenn es nicht anders definiert ist, das erste Bild nach dem html-Element. Dieses erste Bild kann das Post-Bild sein, aber auch ein Image-Gadget, wenn dieses Gadget technisch gesehen 'vor' dem Post liegt.

Um Facebook zu sagen, 'das ist ein Post, nimm daraus das Bild für die Vorschau' müsst ihr euren Post in eine für FB lesbare Form semantisch klassifizieren und zwar mit dem Microformat-Protokoll Open-Graph. Was furchtbar technisch klingt, ist letztlich sehr einfach - schauen wir uns das ganze im Detail an!

Open-Graph

Im Web sind Microformate dazu gedacht, Suchmaschinen die Bedeutung[Semantik] einer Website zugänglich zu machen. Es gibt dazu je nach Thema und Zweck der Seite verschieden Protokolle - Blogger verwendet etwa schema.org.

Open-Graph ist nun ein Protokoll von FB speziell für die Abbildung von sozialen Beziehung. Genau genommen ist Open-Graph der Dreh.- und Angelpunkt jeder Aktion auf FB - ohne Open-Graph gäbe es kein FB.

Das Open-Graph Protokoll entspricht dabei einem Namensraum, mit dem FB die Layout-Elemente eurer Posts eindeutig identifizieren kann. Ein Namensraum ist wie die Vorwahl bei einer Telefonnummer: Um euch anzurufen, muss der Anrufer nicht nur eure Telefonnummer, sondern auch eure Vorwahl kennen.

Die Erweiterung

Um das Open-Graph Protokoll anzuwenden, erweitert ihr den XML Namensraum des Wurzelelements und und fügt verschiedene Meta-Tags hinzu.

Heads up! Probiert das zuerst in einem Test-Blog aus. Macht vor jeder Änderung eine Sicherung eures Blogs!

XML Namensraum

Das Wurzelelement findet ihr ganz am Anfang eurer Vorlage. Es sieht in der Regel so aus:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Dieses Element ändert ihr nun so:

<html b:version='2' class='v2' xmlns:og='http://ogp.me/ns#'>

Zusätzlich könntet ihr noch eure natürlich Sprache angeben - hier in dem Fall für Deutsch. Das hat Vorteile etwa bei der Silbentrennung oder für Screenreader:

<html b:version='2' class='v2' xml:lang='de' xmlns:og='http://ogp.me/ns#'>

Für Deutschweizer lautet der Tag übrigens xml:lang='de-ch'!

Heads up! Schreibt den Tag genauso - der Blogger-Editor erweitert das Wurzelelement dann automatisch. Die OG Hilfe [und verschiedene Seiten im Internet] sagen dazu etwas falsches anderes!

Meta-Tags

Nach der Erweiterung des Namensraums müsst ihr mindestens diese Meta-Tags einbauen. Ihr sucht dazu diesen Tag:

<title><data:blog.pageTitle/></title>

Direkt _darunter_ setzt ihr dieses Snippet:

<!-- open-graph meta start -->
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<!-- open-graph meta end -->

Fertig! Ihr könnt die Erweiterung und die Meta-Tags nun mit dem Facebook Debugger testen. Das Tool wird vermutlich reklamieren, dass ihr ein Vorschaubild von 200x200px braucht und nicht von 72x72px wie bei Blogger. Eine wirkliche Lösung gibt es dafür bis jetzt nicht.

Fehler

Meldet euch, falls es andere Fehlermeldungen gibt. Ich habe keinen FB-Account und kann es leider nicht selber testen. Falls Fehler auftreten, schaue ich es mir aber auf jeden Fall an.