Beim Teilen Deiner Blog-Beiträge zeigt Facebook das Beitragsbild nicht an? Mit ein paar einfachen Änderungen in WordPress nutzt Du sogenannte Open-Graph-Tags, um Deine Postings optimal bei Facebook & Co. zu präsentieren.
Wenn Du Facebook und anderen Social-Media-Diensten mitteilst, welches Bild sie als Aufmacherbild verwenden sollen, sehen Deine Beiträge dort perfekt aus. Das Gleiche gilt für die Überschrift und die angezeigte Kurzbeschreibung.
Open-Graph-Tags
Mit einem vordefinierten Satz an Meta-Tags für den HTML-Code Deiner Blogbeiträge übermittelst Du die entsprechenden Daten an Facebook & Co. Diese Tags benutzen den „Open Graph“-Standard und enthalten alle Informationen zum jeweiligen Blogbeitrag, die Social-Media-Plattformen benötigen.
Meta-Tags im HTML-Code liefern Social-Media-Diensten die nötigen Infos.
Natürlich musst Du diese Meta-Tags nicht von Hand in Deine WordPress-Beiträge einbauen. Das wäre in WordPress auch nicht sinnvoll möglich. Ein Plugin erledigt das bequem und automatisch für Dich. Wir stellen Dir vor, welche Möglichkeiten Du dabei hast.
Andere Open-Graph-Funktionen deaktivieren
Vorab: Prüfe zunächst im Quellcode einer beliebigen Beitragsseite Deines Blogs, ob sich dort schon Open-Graph-Tags befinden. Das kann beispielsweise der Fall sein, wenn Dein Theme solche Tags dort einfügt oder Du ein SEO-Plugin benutzt.
Den Quelltext einer Seite siehst Du im Browser, wenn Du die Tastenkombination Strg – u drückst. Mit Strg – f aktiviert Du dann die Suchfunktion und suchst nach „og:title“. Findest Du nichts, sind keine entsprechenden Open-Graph-Tags vorhanden.
Falls Du jedoch Open-Graph-Tags findest, prüfe zunächst, ob Facebook & Co. beim Teilen der Beiträge Überschrift, Teaser-Text und Bild korrekt anzeigen. Dazu kopierst Du die URL einer Beitragsseite Deines Blog in die Statuszeile von Facebook („Was machst Du gerade, …?“) und wartest einen Moment, um zu sehen, welche Daten Facebook von Deinem Blog holt und anzeigt. Achte aber darauf, dass es sich um die URL eines Beitrags handelt, bei dem auch tatsächlich ein Artikelbild definiert ist.
Jetzt gibt es zwei Varianten:
a) Ist alles in Ordnung, musst Du nicht weiterlesen, denn dann gibt es keinen Handlungsbedarf.
Stellt Facebook das Artikelbild bereits dar, gibt es keinen Handlungsbedarf (links). Fehlt das Bild, solltest Du etwas unternehmen (rechts).
b) Ist die Anzeige in Facebook nicht zufriedenstellend, deaktivierst Du die entsprechende Funktion in Deinem SEO-Plugin. Alternativ suchst Du in Deinem Theme und in den Einstellungen anderer installierter Plugins nach einer entsprechenden Option und deaktivierst diese dort. Denn sonst werden die Meta-Tags doppelt generiert und damit kommt insbesondere Facebook nicht sonderlich gut zurecht – abgesehen davon, dass es natürlich überflüssig ist, den HTML-Code aufbläht und damit die Ladezeit der Beiträge verlängert.
Im nächsten Schritt installierst Du ein Open-Graph-Plugin und konfigurierst es nach individuellen Anforderungen.
WordPress-Plugins “Complete Open Graph” und „Facebook Open Graph”
Es gibt viele Plugins, die Open-Graph-Tags in Deine Blog-Postings integrieren. Auch SEO-Plugins haben oft eine solche Funktion. Sehr unkompliziert und zielgerichtet ist das Plugin „Complete Open Graph“, das sich ausschließlich auf diese Aufgabe konzentriert.
Ein sehr viel umfassenderes Plugin ist „Facebook Open Graph, Google+ and Twitter Card Tags“. Es bietet zahlreiche, individuelle Konfigurationsmöglichkeiten. Die meisten Anwender brauchen all diese Optionen aber gar nicht. Das Plugin ist komplizierter und verbraucht mehr Ressourcen auf Deinem Webserver.
Deshalb gilt: Wer sein Blog einfach nur schnell für Social-Media-Sharing optimieren will, sollte zunächst „Complete Open Graph“ ausprobieren. Wer damit auf Probleme bei der Anzeige der Bilder in Facebook stößt oder mehr Flexibilität bei den Einstellungen sucht, nutzt stattdessen „Facebook Open Graph, Google+ and Twitter Card Tags”.
In diesem Workshop arbeiten wir zunächst mit „Complete Open Graph“ und geben abschließend ein paar Tipps zur Konfiguration von „Facebook Open Graph, Google+ and Twitter Card Tags”.
Complete Open Graph: Standard für Artikelbild definieren
Installiere und aktiviere also zunächst das Plugin „Complete Open Graph“.
Die Einstellung zu dem Plugin findest Du unter Einstellungen – Open Graph. Relevant ist hier nur die Option Default Image. Hier solltest Du nämlich ein Bild auswählen, das in Facebook immer dann angezeigt wird, wenn ein Beitrag kein eigenes Artikelbild hat.
Klicke auf Choose File, wähle in Deiner WordPress-Mediathek das gewünschte Bild aus (oder lade ein neues hoch) und klicke auf Set as Open Graph Image. Abschließend wählst Du ganz unten noch Änderungen übernehmen aus. Als Bild eignet sich hier beispielsweise ein für Dein Blog-Thema typisches Motiv, in das Du eventuell noch Dein Logo integrierst. Denn auch wenn dieses Bild dann inhaltlich vielleicht nicht ganz zum Thema des Beitrags passt: Geteilte Beiträge fallen in Facebook mit Bild einfach viel stärker auf als ohne.
Standard-Bild, falls ein Beitrag kein eigenes Artikelbild hat.
Optionen in einzelnen Beiträgen anpassen
Mit dem Complete Open Graph Plugin siehst Du unter jedem Beitrag zusätzliche Eingabefelder. Dort kannst Du – musst Du aber nicht – Texte eingeben und ein anderes Bild definieren, die beim Teilen auf der jeweiligen Social-Media-Plattform angezeigt werden sollen. Lässt Du die Felder leer, nimmt das Plugin automatisch die von WordPress definierten Texte und das Artikelbild. Du erzeugst auf diese Weise oft mehr Aufmerksamkeit für Deine Beiträge, indem Du Titel und Beschreibung werblicher als in Deinem Blog-Beitrag formulierst.
Mit dem Plugin kannst Du die Optionen auch individuell je Beitrag ändern.
Optimale Bildgröße fürs Artikelbild
Damit ein Artikelbild bei Facebook überhaupt angezeigt wird, muss es eine Mindestgröße von 200 mal 200 Pixeln haben. Empfehlenswert sind allerdings deutlich größere Bilder. Häufig wird dabei von Facebook-Experten der Wert 1200 mal 630 Pixel genannt. Aber auch beispielsweise mit 800 mal 600 Pixeln funktioniert es erfahrungsgemäß problemlos.
Du musst also nicht gleich Deine gesamten Bildergrößen in WordPress ändern, damit die Bilder korrekt in Facebook angezeigt werden. Es kann aber sinnvoll sein, das Artikelbild in der höheren Auflösung hochzuladen, selbst wenn das eigene Blog-Theme nur kleinere Bilder verwendet. Die Umrechnung nimmt WordPress ohnehin automatisch vor, liefert an Facebook aber die von Dir hochgeladene Originalgröße aus.
Fehlersuche: Facebook Sharing Debugger
Mit Facebook zu arbeiten, ist nicht selten mit Frust verbunden, weil Dinge nicht so laufen, wie sie sollten oder wie man sich das vorstellt. In diesem Fall ein besonders häufiges Problem: Manchmal kommt es vor, dass obwohl das Plugin installiert ist und alle Einstellungen korrekt und die Open-Graph-Meta-Tags im HTML-Code enthalten sind, das Artikelbild beim Teilen eines Beitrags nicht oder nur sporadisch angezeigt wird.
In dem Fall ist der Facebook Sharing Debugger ein sehr hilfreiches Tool. Damit kannst Du einerseits erzwingen, dass Facebook die Meta-Daten zu einem Deiner Beiträge erneut abruft – beispielsweise, wenn Du etwas an den Einstellungen geändert hast. Du kannst damit vor allem aber auch herausfinden, woher ein Problem kommt, wenn es einfach mal nicht klappen will.
Facebook Share Debugger – leider nur auf Englisch.
Facebook ruft nämlich die Daten zu einem Blog-Beitrag nur einmal ab und speichert diese Informationen dann in einem internen Cache. Auch wenn Du an Deinem Beitrag beispielsweise das Artikelbild änderst, wird Facebook daher weiterhin das frühere Bild anzeigen.
Um die bei Facebook intern gespeicherten Daten zu ändern, gibst Du auf https://developers.facebook.com/tools/debug/ einfach die URL des entsprechenden Beitrags ein, klickst auf Fehlerbehebung und anschließend auf den Button Erneut scrapen.
Ignorieren kannst Du an dieser Stelle übrigens die Fehlermeldung „Share App ID Missing“. Das ist eher etwas für Profis und beeinträchtigt das korrekte Anzeigen eines geteilten Beitrags nicht. Wenn Du Dich dennoch damit auseinandersetzen willst: Hier gibt’s die Anleitung (auf Englisch), woher Du die verlangte App-ID bekommst: https://developers.facebook.com/docs/apps/register
Denke immer dran: Facebook verhält sich oft launisch und Dinge funktionieren einfach nicht, ohne dass Du selbst einen Fehler gemacht hast. In solchen Fällen hilft oft, einfach eine halbe Stunde zu warten und es dann noch einmal neu zu probieren.
Facebook Open Graph, Google+ and Twitter Card Tags
In manchen Fällen stellt Facebook bei der Nutzung des Plugins „Complete Open Graph“ auf stur und zeigt einfach keine Artikelbilder an, obwohl alle Einstellungen korrekt sind. In diesem Fall lohnt sich ein Blick auf das Plugin „Facebook Open Graph, Google+ and Twitter Card Tags“. Es ist dem anderen Plugin recht ähnlich, bietet jedoch viel mehr Konfigurationsmöglichkeiten und ist deshalb etwas komplexer.
Komplexer, aber detailreich konfigurierbar: „Facebook Open Graph, Google+ and Twitter Card Tags“.
Alle Optionen können wir hier nicht ausführlich darstellen. Wichtig sind vor allem zwei Einstellungen, die Du alle unter Einstellungen – Facebook Open Graph, Google+ and Twitter Card Tags findest:
General – Image Settings – Default Image: Das kennst Du schon von dem Plugin „Complete Open Graph“. Hier lädst Du ein entsprechendes Standardbild hoch.
Open Graph – Facebook Open Graph Tags: Setze ein Häkchen bei der Option Include Image Dimensions, wenn Facebook Probleme bei der Darstellung des Artikelbildes macht.
Weitere drei Einstellungen solltest Du der Vollständigkeit halber ebenfalls vornehmen:
Open Graph – Facebook Open Graph Tags: Falls Du bei Facebook eine Seite (ehemals „Fanpage“) hast und nicht nur in Deinem normalen Profil postest, trage unter Website’s Facebook Page die URL Deiner Facebook-Seite ein.
Cards – Twitter Card Tags: Trage unter Website’s Twitter Username Deinen Twitter-User-Namen ein, falls Du Twitter nutzt.
G+ Schema: Trage unter Website’s Google+ Page die URL Deiner Google-Plus-Seite ein, falls Du Google Plus nutzt.
Vergiss nicht, jeweils ganz unten auf der Seite auf Änderungen übernehmen zu klicken.
Mehr Aufmerksamkeit durch Bilder bei Facebook
Im Idealfall kostet es Dich nur wenige Minuten, Dein WordPress-Blog so zu optimieren, damit Facebook – und nebenbei auch Google Plus, Twitter & Co. – Deine Beiträge beim Teilen perfekt und mit Bild anzeigt. Vergleiche einmal die Zugriffszahlen bei Facebook auf Beiträge mit und ohne Bild. Du wirst feststellen, dass die Beiträge mit Bild deutlich mehr Aufmerksamkeit erzielen.
Wenn alles glatt läuft, sieht ein geteilter Beitrag bei Facebook so aus.
Wie sind Deine Erfahrungen mit dem Zusammenspiel von WordPress und Facebook? Gibt’s Probleme oder klappt alles einwandfrei? Lass es uns wissen.