Artikelbilder vs. Facebook


Wer kennt es nicht? Man hat eine schöne, tolle, informative Seite gefunden oder sogar selbst kreiert – und teilt sie bei Facebook…

Was kann man beim Teilen machen – außer einen eigenen Einleitungstext zu schreiben? Maximal eine von mehreren Miniaturansichen auswählen, ggf. auch das Bild ganz entfernen – oder neuerdings auch ein neues hochladen – je nachdem, wer wo welche Seite teilt. Mit einem beherzten Klick in den “gegrabbten” Beschreibungstext kann man – ob nun eigene Seite oder nicht – den Text verändern… Aber darum geht es hier nicht – hier geht es heute um die Anzeige des gewünschten Thumbnails.

Gut – wenn es eine fremde Seite ist, kann man nicht viel machen. Ist es aber eine eigene Seite, kommt man schnell auf die Idee, das eine oder andere Bild als Artikelbild zu hinterlegen (so wie z.B. bei einem WordPress-Blog), damit genau DIESES bei Facebook erscheint… Denn die Realität sieht so aus: 99 mal ist das Bild, welches man möchte, auswählbar – doch einmal passiert es: Es ist einfach nicht dabei! Es ist nicht auswählbar! Und dann entsteht besagter Wunsch, es so festzulegen – schon falls ein Dritter unsere Seite teilen will. Denn der lädt ganz bestimmt nicht unser richtiges Bild hoch, zumal er es ja gar nicht hat, wenn er es nicht gerade vorher auf unserer Seite “geklaut” hat…

Die Frage ist natürlich, wie man das nun realisiert. Wer schon einmal im Seitenheader mit

<link rel=”image_src”            href=”{$_PicUrl}” />
<meta name=”medium”        content=”image” />

“rumgespielt” hat, wird gemerkt haben, daß das bei Facebook, wenn überhaupt, nur bedingt etwas bringt. Die Lösung lautet:

<meta property=”og:image”          content=”{$_PicUrl}” />

Zusammen mit den anderen relevanten Tags, mit denen man definieren kann, wie Ziel-Url, Beschreibung usw. lauten sollen, ergibt sich folgender Block für die OpenGraph-Verarbeitung durch Facebook:

<meta property=”og:type”              content=”{$_Type}” />
<meta property=”og:title”               content=”{$_Title}” />
<meta property=”og:url”                  content=”{$_Url}” />
<meta property=”og:site_name”    content=”{$_Name}” />
<meta property=”og:description”   content=”{$_Desc}” />
<meta property=”og:image”           content=”{$_PicUrl}” />

Dabei ist darauf zu achten (so zumindest meine Erfahrung), daß ein kompletter Url (“http://….”) angegeben wird, nicht nur ein Bildpfad. Außerdem muß das Bild mindestens 200px breit sein und ebenfalls mindestens 200px hoch.

So – nun haben wir alles schön so geändert, wie es hier steht. Natürlich, nachdem o.g. Problem auftrat. Und auf der Suche nach Abhilfe förderte “Freund Google” diese Seite hier zu Tage. Aber wie zum Geier überreden wir jetzt Facebook, auch die geänderten Daten anzuzeigen? Denn egal, wie oft wir auch die Seite mit [STRG] + [F5] neuladen, den Seitenlink erneut zum Teilen eingeben, beten oder Beschwörungstänze aufführen – der Facebook-Cache will von alldem nichts wissen. Er bleibt bei den ermittelten Inhalten aus unserem ersten Teilungsversuch.

Da kommt nun der Facebook-Debugger ins Spiel:

Nach dem Aufruf der Tool-Seite ist der Url der zu teilenden und mittlerweile geänderten bzw. aktualisierten Seite ins Feld einzugeben. Danach muß man nur noch auf “Fehlerbehebung” klicken, und das Tool zeigt an, welche Daten nun ermittelt / erkannt wurden. Die alten, gecachten Informationen werden in Facebooks “Gedächtnis” überschrieben bzw. geupdatet. Danach kann der Link ganz normal auf Facebook geteilt werden, und es werden die aktuellen Daten und somit auch das richtige Bild gezeigt.

PS: Bei WordPress kann man sicherlich die Infos noch ein wenig tunen – aber das Artikelbild wird von Facebook in der Regel zuverlässig erkannt, wenn die Abmessungen jeweils mindestens 200 Pixel betragen…

PPS: Da diese OG-Metatags alles andere als valide sind, macht es natürlich Sinn, diese bei der Generierung der Seite auch nur dann auszuliefern, wenn der Facebook-Grabber die Seite aufruft. Eine mögliche Lösung wäre:

<?php
$facebook = false;
if (isset($_SERVER['HTTP_USER_AGENT']) &&           stripos($_SERVER['HTTP_USER_AGENT'], ‘facebookexternalhit’) !== FALSE) { $facebook = true;}
if ($facebook) :?>
TAGS
<?php endif; ?>

Für die adäquate Google-Anweisung müßte man mal einen Blick in die Serverlogs tätigen.

PPPS: Damit statt der aktuellen (Projekt-Unter)Seite nur die Startseite/Indexseite geteilt wird, müßte man die Werte in den Tags entsprechend anpassen bzw. mit einer Standarddefinition versehen. Und wenn man nicht möchte, daß irgendwelche Bilder (auch nicht als Miniatur) geteilt werden, könnte man ja für og:image ein transparentes gif/png hinterlegen – sollte eigenlich klappen…

Interessante Links:
- Google Plus und Facebook das richtige Thumbnail zu euren Artikeln verpassen
- HiDPI: Hochauflösende Bilder in WordPress ohne Plugins ausliefern
- WP Open Graph Meta

Die Kommentarfunktion ist geschlossen.