Warum wird kein Bild in Facebook angezeigt?

Facebook Vorschaubilder richtig auszeichnen

Immer wieder mal bemerkte ich, dass meine Vorschaubilder in Facebook nicht dargestellt wurden. Im Stream wurde nur eine leere weiße Fläche angezeigt und auch die Autoreninformation blieb aus. Die Lösung ist recht banal und ich war eigentlich selber schuld.

Wer regelmäßig auf Facebook Links teilt, wird sich sicherlich schon mal gefragt haben, warum bei manchen Webseiten ein Vorschaubild erstellt wird und bei anderen eben nicht. Bis vor kurzem sah ein geteilter Link von meinem Blog so aus:

So sollte mein Facebook-Vorschaubild im Facebook Stream aussehen

Eine großes Vorschaubild mit Beschreibung,  Angabe zur URL und dem Autor des Artikels.

Das Facebook Object Debugger Tool

Damit auch ein großes Vorschaubild von meinen Artikel im FB-Stream erscheint, muss ich meine Artikel mit den Open Graph Meta-Tags korrekt auszeichnen. Wenn diese Auszeichnungen nicht stimmen, wird es auch nichts mit den Vorschaubildern, geschweige den mit den Autoreninformationen unten. Merke Dir also, wenn Deine Artikel in Facebook nicht korrekt dargestellt werden, dann prüfe die URL Deines Artikel mit dem Facebbook Object Debugger Tool. Das ganze sieht dann in etwa so wie unten im Bild aus und Ihr bekommt sofort einen Hinweis, was mit Euren Posting genau nicht stimmt.

In meinem Fall monierte Facebook, dass ich das Meta Tag og:url zweimal verwendet habe. Dies kam durch eine Einstellung im Yoast SEO Plugin zustande, welche automatisch die Open Graph Meta Tags hinzufügte.

Ich habe jetzt diese Funktion deaktiviert und siehe da, es klappt auch wieder mit dem Facebook Stream. Über den Facebook Object Debugger könnt ihr FB auch dazu zwingen ein Vorschaubild neu zu laden, in dem ihr anstatt auf “Show existing scrape information” auf “Fetch new scrape information” klickt.

Alternative-Lösungen für das Anzeigen der Vorschaubilder

Einige Artikel zu diesem Thema propagieren einen URL-Shortener als Lösung für das Problem, z.B. Bit.ly. Das funktioniert zwar meistens, aber auch ich immer. Ich halte von solchen Lösungen nichts, schließlich stimmt etwas grundlegendes an der Auszeichnung der Open Graph Meta Daten nicht. Dann empfehlen doch tatsächlich einige Webseiten, doch einfach eine Bild in Facebook direkt hochzuladen und dann den Link in die Bildbeschreibung einzufügen. Das ist mir ehrlich gesagt zu umständlich und ich möchte nicht alle meine Bilder bei Facebook hochladen, zudem gibt es bei den Bilderpostings auch nicht alle Werbemöglichkeiten, wie bei einem Linkposting.

Grundlage für ein gutes Vorschaubild in Facebook zum Artikel bleibt die ordentliche Auszeichnung der Open Graph Meta Daten. Wie ihr diese korrekt auszeichnet könnt ihr hier nachlesen.

Die Open Graph Meta Daten fügt ihr im Head-Bereich der Html-Datei ein. Bei mir sieht es in Quelltext in etwa so aus:

<meta property=”og:site_name” content=””>  – Bestimmt den Seitennamen
<meta property=”og:title” content=””> – Bestimmt den Titel des Postings
<meta property=”og:description” content=””> – Bestimmt die Beschreibung
<meta property=”og:url” content=””/> – Definiert den Link zum Artikel
<meta property=”og:image” content=”” /> – Hier kommt der Link zum Anzeigebild rein

Wer WordPress nutzt kann aber auch gleich eines der vielen Open Graph Plugins herunterladen. Auch wenn das Yoast Plugin mir meine Vorschaubilder zerschossen hat, so hat es dennoch sehr viele nützliche Funktionen um Open Graph Metadaten im Artikel-Editor zu erzeugen.  Bei mir erzeugte lediglich mein Theme schon diese Daten von alleine, deswegen musste ich die Funktion im Yoast Seo Plugin deaktivieren.