So erscheinen Deine WordPress-Beiträge bei Facebook perfekt mit Bild

So erscheinen Deine WordPress-Beiträge bei Facebook perfekt mit Bild

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.
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).
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.
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.
Mit dem Plugin kannst Du die Optionen auch individuell je Beitrag ändern.

Optimale Bildgröße fürs Artikelbild

Damit ein Artikelbild aus WordPress 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 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“.
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.

Mit Bildern mehr Aufmerksamkeit für Dein WordPress auf 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.
Wenn alles glatt läuft, sieht ein geteilter Beitrag bei Facebook so aus.

Hier geht’s zu den WordPress-Paketen!

Schlagworte: ,

Teilen

  1. Jochen Bake sagte am

    Hallo,
    ich hatte auch das Problem. Vermutlich lag es bei mir an einer Änderung meiner WordPress Medien Dateien. Das Facebook Debug Tool half mir dabei nur bedingt. Nachdem ich zwei verschiedene Lösungen anwenden musste, wurden die Vorschaubilder wieder angezeigt. Vielleicht hilft deinen Lesern meine kleine Anleitung. Ich bin einfach mal so frei und kopiere meinen Link in den Kommentar.

    https://jochenbake.de/facebook-vorschaubild-wird-nicht-angezeigt/

    Gruß
    Jochen

    Antworten
  2. Franz Neumeier sagte am

    Hallo Bernd,

    die beschriebenen Plugins bzw. die dadurch erzeugten Open-Graph-Tags dienen lediglich dazu, die nötigen Meta-Informationen ins HTML-Dokument zu schreiben, damit Facebook, Twitter & Co. diese Informationen abrufen können.

    Wenn Deine Leser aktiv Deine Beiträge z.B. über einen Button bei FB, Twitter etc. teilen sollen, musst Du entsprechende Buttons am Ende des Beitrags (oder anderswo) einfügen. Das ist datenschutzrechtlich v.a. bei Facebook nicht ganz unproblematisch. Das Plugin “Shariff Wrapper” (https://de.wordpress.org/plugins/shariff/) ist eine datenschutzrechtlich weitgehend saubere Lösung (siehe Erklärungen dort).

    Herzliche Grüße,
    Franz

    Antworten
  3. Bernd sagte am

    Ich hatte nach dem ersten Post einige Schwierigkeiten. Ich hatte auch ein paar mal de- und Neuinstalliert, bei mir war einfach die oberste Zeile zum teilen verschwunden. Erst als ich in der App ausgewählt habe das bei der Deinstallation keine Daten behalten werden sollte und dann de- und wieder neu installiert habe läuft es wieder einwandfrei und ich kann auf FB teilen.
    Was ich aber nicht kann, bzw. es wird auch nicht erklärt wie es gemacht wird ist Teilen als Tweet bei Twitter. Twitter ID habe ich eingetragen, aber wo kann dich auswählen bzw. wo ist der Button für Twitter???

    Antworten
  4. Franz Neumeier sagte am

    Die korrekte Anzeige des Beitrags inkl. Artikelbild beim Teilen auf Facebook beeinträchtigen solche Warnungen meiner Erfahrung nach nicht.

    Um ehrlich zu sein: Für mich ist nicht nachvollziehbar, was bei Facebook da passiert. Das Problem ist, dass Facebook als og:type nicht – wie im HTML korrekt angegeben – “article” annimmt, sondern diesen Wert auf “website” setzt. Folgerichtigt ist natürlich dann die Angabe der “article:”-Tags unzulässig, weil die für diesen og:type nicht vorgesehen sind.

    Solange die Posts inkl. Bild beim Teilen in Facebook korrekt angezeigt werden, können Sie die Warnungen daher, denke ich, erst einmal ignorieren. Dennoch sollten Sie versuchen, der Sache auf den Grund zu gehen, denn Fehler/Warnungen sind natürlich latente Risiken für die Zukunft. Ich würde empfehlen, das erst einmal eine Weile zu beobachten, denn wenn es ein Fehler seitens Facebooks ist, sollte sich das Problem in einiger Zeit von alleine lösen. In Ihrem HTML-Code kann ich jedenfalls keinen Fehler erkennen, der das Problem auslöst.

    Antworten
  5. dav sagte am

    Habe die Konfiguration entsprechend vorgenommen, bekomme aber trotzdem diese Fehler Meldung: Warnhinweise, die behoben werden sollten
    Angabe überschüssiger Eigenschaften
    Die folgenden Eigenschaften wurden auf der Webseite angegeben. Sie werden aber NICHT für die angegebene og:type-Eigenschaft unterstützt: article:published_time, article:modified_time, article:section, article:publisher

    Antworten

Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.

Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.

 

Diese Webseite verwendet Cookies, um die Nutzung der Seite zu verbessern, den Erfolg von Werbemaßnahmen zu messen und interessengerechte Werbung anzuzeigen. Durch die Nutzung dieser Seite erklären Sie sich damit einverstanden. Informationen