Facebook kann ein großartiger Ort sein, um Beiträge zu teilen und Werbung für deine Inhalte zu machen. Du wirst jedoch feststellen, dass einige deiner geteilten Links nicht die richtigen Bilder enthalten. Manchmal zieht Facebook ein altes Bild oder, noch schlimmer, überhaupt kein Bild!
Zum Glück kannst du solche Probleme mit dem Sharing Debugger leicht beheben. Damit kannst du gezielt nach Darstellungsfehlern oder Problemen mit deinen Meta-Tags suchen. Mit dieser Software kannst du Facebook in die Lage versetzen, deine Beiträge mit den richtigen Bildern zu bewerben.
In diesem Beitrag erklären wir dir, was der Facebook Debugger ist und wie du ihn nutzen kannst, um deine WordPress-Bilder zu verbessern. Los geht’s!
Wie der Facebook Crawler funktioniert
Bevor du den Sharing Debugger verwendest, musst du verstehen, wie Facebook deine Inhalte crawlt. Immer wenn jemand einen Social Share Button benutzt oder einen Link zu deiner Seite kopiert und einfügt, crawlt Facebook den HTML-Code deiner Website. Auf der Grundlage dieser Informationen werden ein Vorschaubild, ein Titel und eine Beschreibung erstellt.
Hier sind einige allgemeine Anforderungen, die deine Seite erfüllen sollte, damit dieser Prozess reibungslos abläuft:
- Gzip– und Deflate-Kodierung in deinem Server
- Auflistung der Open-Graph-Eigenschaften innerhalb der 1 MB deines HTML
- Begrenze die Ladezeit einer Seite auf wenige Sekunden
- Füge die User-Agent-Strings oder IP-Adressen des Crawlers zur Erlaubnisliste deiner Website hinzu
- Stelle sicher, dass deine Datenschutzrichtlinien crawlbar sind
Nachdem du nun etwas mehr über den Facebook-Crawler und seine Funktionsweise erfahren hast, wollen wir uns mit einigen Problemen beschäftigen, die beim Teilen von Inhalten auf dieser Plattform auftreten können.
Wie Facebook Informationen abruft
Wenn du Inhalte mit Facebook teilst, werden deine Bilder auf seinen Servern und im Content Delivery Network (CDN) zwischengespeichert. Wenn du deine Seite aktualisierst, kann es sein, dass Facebook immer noch ein altes Bild anzeigt, wenn du es teilen willst. Das liegt daran, dass Facebook keine neuen Informationen abruft, sondern die bereits im Zwischenspeicher befindlichen Informationen bereitstellt.
Das Gleiche gilt für Informationen über deinen Link und den Inhalt selbst. Sie rufen die sogenannten „Open Graph Meta Tags“ ab. Nach Angaben von Facebook verwandelt das Open Graph-Protokoll eine Webseite in ein reichhaltiges Objekt in einem sozialen Graphen. Dabei handelt es sich im Wesentlichen um Tags (Code), die Facebook Informationen darüber liefern, was du teilst.
Auch wenn du die Open Graph Meta Tags nicht kennst, verwendest du sie wahrscheinlich schon. Wenn du beliebte Plugins wie Yoast SEO oder Social Warfare installiert hast, fügen diese im Hintergrund automatisch Meta Tags für dich hinzu.
Nehmen wir unseren Leitfaden zur Optimierung der Website-Geschwindigkeit als Beispiel. Wenn wir uns den Quellcode dieses Beitrags ansehen, können wir die folgenden Daten zu Open Graph sehen. Hinweis: Open Graph verwendet verschiedene Attribute, wie og:title und das, was uns in diesem Tutorial wirklich interessiert, nämlich og:image.
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="A Beginner's Guide to Website Speed Optimization (WordPress-Friendly)" />
<meta property="og:description" content="In-depth website speed optimization guide that shows you how important it is to have a snappy website. DIY instructions and tricks to improve load times." />
<meta property="og:url" content="https://kinsta.com/learn/page-speed/" />
<meta property="og:site_name" content="Kinsta®" />
<meta property="article:publisher" content="https://www.facebook.com/kinstahosting" />
<meta property="article:author" content="https://www.facebook.com/mark.gavalda" />
<meta property="article:tag" content="webdev" />
<meta property="article:tag" content="webperf" />
<meta property="fb:app_id" content="148976462317083" />
<meta property="og:image" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />
<meta property="og:image:secure_url" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />Dies ist der Code auf unserer Seite, den Facebook auswertet, um zu bestimmen, welches Bild, welcher Titel und welche Beschreibung angezeigt werden sollen. Sobald diese Daten im Cache gespeichert sind, musst du das Sharing Debugger Tool verwenden, um die Details deines Beitrags zu aktualisieren.
Wie du den Sharing Debugger von Facebook verwendest, um WordPress-Bilder zu reparieren
Jede Plattform oder jedes Tool hat Probleme oder Macken, die du umgehen musst. Der Facebook Sharing Debugger wurde entwickelt, um Probleme mit deinen Open Graph Meta Tags zu lösen und das Caching zu verbessern.
Du findest den Sharing Debugger auf der Seite Meta for Developers unter Tools. Um einen Beitrag zu crawlen, gib einfach die URL ein und klicke auf Debuggen:
Bei Kinsta haben wir vor kurzem das Bild in unserem Artikel zur Optimierung der Website-Geschwindigkeit aktualisiert. Wenn wir es in den Facebook Debugger eingeben, werden zuerst die Informationen aus dem Cache geholt, die sie auf ihrer Seite haben:
In diesem Fall zieht Facebook ein altes Bild aus der Zeit, bevor wir den Beitrag aktualisiert haben. Wir können auch sehen, dass og:image ein alter Dateiname ist. Das ist es, was die Leute sehen, wenn sie unseren Beitrag teilen.
Schritt 1: Lösche den WordPress-Cache für diese URL
Um sicherzustellen, dass Facebook die neuesten Informationen über deinen Beitrag erhält, musst du den Cache in WordPress löschen. Wenn das alte Bild noch im Cache deiner Website liegt, kann der Sharing Debugger das Problem nicht lösen, da er die Informationen aus dem Cache einfach erneut abruft.
Beim Kinsta-Caching auf Server-Ebene wird der Cache für diese Seite oder diesen Beitrag automatisch geleert, sobald ein Beitrag aktualisiert wird. Wenn du eine andere Caching-Lösung oder ein Plugin eines Drittanbieters verwendest, solltest du in deren Dokumentation nachsehen, um sicherzustellen, dass du weißt, wie du deinen Cache löschen kannst.
Wenn alles andere fehlschlägt, kannst du auch den Cache deiner gesamten WordPress-Website löschen. Bedenke jedoch, dass deine Website den Cache neu aufbauen muss, was die Geschwindigkeit deiner Website beeinträchtigen kann.
Wenn du entscheidest, dass dies notwendig ist, öffne MyKinsta, navigiere zu deiner WordPress-Website und klicke auf Extras. Hier klickst du auf Cache leeren:
Wenn du immer noch Probleme hast, könnte dein Bild auch in deinem CDN zwischengespeichert sein. In diesem Fall musst du eventuell den Cache deines CDN löschen.
Schritt 2: Scrape erneut im Sharing Debugger
Nachdem der Cache für den fraglichen Beitrag oder die fragliche Seite gelöscht wurde, müssen wir ihn im Facebook Debugger Tool erneut scrapen. Dazu klickst du auf die Schaltfläche Scrape Again.
Es kann sein, dass du auf Warnungen stößt, die nicht immer die genauesten sind. Wir sehen zum Beispiel eine Warnung, dass unser Bild die maximale Größe von 8 MB überschritten hat und der Server zu langsam war, um zu reagieren. In Wirklichkeit ist unser Bild nur 160,63 KB groß und die Seite wird in weniger als 1 Sekunde geladen.
Wir drücken also ein zweites Mal auf die Schaltfläche Scrape Again. Ja, das mag seltsam klingen. Aber es kann vorkommen, dass du zweimal scrapen musst. Danach siehst du, dass das neue Featured Image mit dem neuen Dateinamen als Attribut og:image gezogen wird:
Es ist wichtig zu beachten, dass das Bild für bereits geteilte Facebook-Beiträge nicht aktualisiert wird. Dies wirkt sich nur auf Beiträge aus, die du oder andere Personen nachträglich teilen.
Zusätzliche Facebook Debugger-Tipps
Mit dem Sharing Debugger kannst du nicht nur alte Bilder aktualisieren, sondern auch den Inhalt (Text), den du in deinen Facebook-Beiträgen siehst. Der Titel und die Beschreibung sind beides Open Graph Meta Tags. Wenn du also etwas umformulieren musst, aktualisiere es in WordPress und befolge genau die oben genannten Schritte.
Behebe die Bildwarnung „Eigenschaften sind noch nicht verfügbar“
Nur weil wir die Warnungen oben ignoriert haben, heißt das nicht, dass sie nicht immer nützlich sind. Tatsächlich gibt es empfohlene Größen für Bilder, die du verwenden solltest. Andernfalls kann es sein, dass dein Bild gar nicht angezeigt wird (wie in dieser Warnung unten zu sehen):
Die angegebenen „og:image“-Eigenschaften sind noch nicht verfügbar, da neue Bilder asynchron verarbeitet werden. Um sicherzustellen, dass neue URLs ein Bild enthalten, gib die Abmessungen mit den Tags „og:image:width“ und „og:image:height“ an.
Diese Warnung trat auf, weil unser Bild zu klein war. Die von Facebook geforderte Mindestgröße eines Bildes beträgt 200 x 200 Pixel. Je größer, desto besser, wenn es um Facebook-Bilder geht.
In der Regel sind 1.200 x 630 Pixel für die meisten Menschen am besten geeignet. Du kannst ein Bild auch größer machen, aber Facebook wird es dann zuschneiden. Wenn du die Größe deines Bildes festlegst, solltest du dieses Seitenverhältnis im Hinterkopf behalten.
Wenn du ein Plugin wie Yoast SEO verwendest, empfiehlt es sich außerdem, das Bild manuell einzustellen. Deine Featured Images in deinem WordPress-Theme haben vielleicht ein anderes Seitenverhältnis oder eine andere Größe. Vielleicht verwendest du auch gar keine Featured Images!
In diesem Fall kannst du mit dem Yoast SEO Plugin manuell ein Bild in einer anderen Größe für Facebook hochladen. Dazu musst du einfach die Yoast SEO Social Settings für einen Beitrag aufrufen und ein neues Facebook-Bild hinzufügen:
Sobald du ein Bild in der richtigen Größe hochlädst, wird es die Open Graph Meta Tags ausfüllen, nach denen Facebook sucht. Außerdem kannst du den Titel und die Beschreibung bei Bedarf weiterhin manuell festlegen.
Füge die Eigenschaft fb:app_id hinzu
Möglicherweise siehst du auch eine Warnung über eine fehlende Facebook App ID. Es ist wichtig zu wissen, dass dies die Möglichkeit, Beiträge auf Facebook zu teilen, in keiner Weise beeinträchtigt. In vielen Fällen kann dies einfach ignoriert werden, aber es schränkt deine Möglichkeiten ein, Facebook Insights-Daten zu nutzen:
Wenn du diese zusätzlichen Insights-Daten haben möchtest, musst du deine Facebook App ID zu deiner Website hinzufügen. Erstelle zunächst deine Facebook-App. Dann kopierst du deine Facebook App ID aus dem App-Dashboard.
Sobald du eine Live-Facebook-App eingerichtet hast, kannst du einen Meta-Tag für sie zu deiner Website hinzufügen. Obwohl Yoast SEO diesen Prozess früher unterstützte, hat es diese Funktion vor kurzem entfernt. Als Alternative kannst du das kostenlose Plugin Meta Tag Manager installieren:
Um dieses Tool zu nutzen, gehe zu Einstellungen > Meta Tag Manager. Als Nächstes stellst du den Tag-Typ auf „property“ und den Property-Wert auf „fb:app_id“:
Für das Inhaltsattribut fügst du deine Facebook App ID ein. Sobald du auf Änderungen speichern klickst und deinen Cache löschst, werden diese Informationen zu den Meta-Tags deiner Website hinzugefügt. Jetzt kannst du die URL erneut scrapen, um zu sehen, ob das Problem behoben wurde!
Zusammenfassung
Ich hoffe, du hast jetzt ein wenig mehr über den Facebook Sharing Debugger erfahren und weißt, wie du ihn zur Fehlersuche und -behebung bei Bildern auf deiner WordPress-Seite einsetzen kannst. Auf diese Weise werden alle deine geteilten Links die richtigen Bilder, Titel und Beschreibungen enthalten.
Wenn du ein falsches Bild im Sharing Debugger entdeckst, lösche alle Caching-Ebenen auf deiner Website und scrape erneut. Deine neuen Bilder sollten dann für alle, die sie auf Facebook teilen, korrekt angezeigt werden.
Oft kannst du Probleme mit deinen Facebook-Links vermeiden, indem du regelmäßig den Cache deiner Website löschst. Mit einem Kinsta-Hostingpaket wird dein Seitencache automatisch geleert, sobald du den Inhalt aktualisierst!
