Ob du ein Blogger, Social Media Marketer oder auch nur ein Kleinunternehmer bist, irgendwann wirst du wahrscheinlich über das Problem stolpern, dass Facebook nicht das richtige Bild von deiner WordPress-Website anzeigt. Manchmal erwischt Facebook ein altes Bild oder, noch schlimmer, gar kein Bild. Zum Glück kannst du diese Art von Problemen mit einem Tool namens Facebook Debugger leicht beheben. Sieh dir einige gängige Szenarien an, auf die du möglicherweise stoßen und wie du diese beheben kannst.

Wie Facebook Informationen abruft

Wenn du Dinge mit WordPress teilst, speichert Facebook deine Bilder auf ihren Servern und CDN (lies hier mehr darüber, was ein CDN ist und wie es funktioniert). Du kannst dir das genauso vorstellen, wie das Caching auf deiner Site funktioniert, manchmal musst du den Cache löschen, damit die Dinge wieder funktionieren. Das Gleiche gilt für Facebook. Wenn du auf deiner Website Aktualisierungen vornimmst, zeigt Facebook möglicherweise noch ein altes Bild an, wenn du es freigibst, da es keine neuen Informationen abruft, sondern die Informationen, die es bereits zwischengespeichert hat, abruft.

Gleiches gilt für Informationen über deinen Link und den Inhalt selbst. Sie holen das, was sie Open Graph Meta Tags nennen. Laut Facebook ermöglicht das Open Graph-Protokoll, dass jede Webseite zu einem reichhaltigen Objekt in einem sozialen Graphen wird. Im Grunde sind dies Tags (Code), die Facebook-Informationen darüber mitteilen, was du teilst.

Nicht sicher, ob du Open Graph Meta Tags auf deiner Website verwendest? Nun, wahrscheinlich tust du es, du weißt es vielleicht nicht. Wenn du populäre Plugins wie Yoast SEO oder Social Warfare verwendest, fügen diese tatsächlich diese Tags automatisch hinter die Kulissen ein.

Nehmen wir als Beispiel unseren Leitfaden zur Optimierung der Websitegeschwindigkeit Wenn wir uns den Quellcode dieses Posts ansehen, können wir die folgenden Daten bezüglich Open Graph sehen. Notiz: Open Graph verwendet verschiedene Attribute wie og:title und die, die uns in diesem Tutorial wirklich interessieren, nämlich og:title and the one we really care about for this tutorial, which is og:image. Dies ist der Code auf unserer Website, den Facebook überprüft, um zu ermitteln, welches Bild, welcher Titel und welche Beschreibung angezeigt werden.

<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 Managed WordPress Hosting" />
<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" />

Den Facebook Debugger nutzen

Wie bei jeder Plattform oder jedem Tool wird es Probleme oder Macken geben, mit denen du umgehen musst, insbesondere wenn du die Richtlinien für bewährte Vorgehensweisen nicht befolgst. Das Facebook Debugger-Tool wurde erstellt, um dir bei der Lösung von Problemen mit deinen Open Graph Meta-Tags zu helfen und das Caching zu beheben.

Du findest den Facebook Debugger auf der Facebook-Entwickler-Seite unter Tools & Support. Wenn du viel Inhalt auf Facebook teilst, ist dies ein guter Link fürs Lesezeichen für zukünftige Referenz.

Facebook Debugger Tool

Facebook Debugger Tool

Um einen Beitrag zu crawlen, gib einfach die URL ein und klicke auf „Debug“ („Testen“). Wir werden in unserem Beispiel einen Live-Fall verwenden. Wir haben vor kurzem das Bild auf unserem Website Speed Optimization Artikel aktualisiert. Wenn wir es in den Facebook Debugger eingeben, wird es zuerst die zwischengespeicherte Information hervorholen, die sie an ihrem Ende haben (wie unten zu sehen ist).

Das sehen die Leute tatsächlich, wenn sie unseren Beitrag teilen. In diesem Fall zieht es jedoch ein altes Bild hervor von vorher, bevor wir den Beitrag aktualisiert haben. Wir können auch sehen, dass og:image der alte Dateiname ist.

Altes Bild und URL wird in Facebook Debugger angezeigt

Altes Bild und URL wird in Facebook Debugger angezeigt

Also was können wir tun? Es gibt zwei Dinge, die getan werden müssen. Führe die untenstehenden Schritte aus.

Schritt 1 – Lösche den WordPress Cache für diese URL

Das erste, was wir tun müssen, um sicherzustellen, dass Facebook die neuesten Informationen ergreift, ist, den Cache auf unserer WordPress-Seite selbst zu löschen. Das stimmt, technisch gesehen gibt es zwei Schichten von Caching, die hier involviert sein könnten. Wenn das alte Bild noch auf deiner Seite zwischengespeichert wird, wird der Facebook Debugger nicht in der Lage sein, dein Problem zu beheben, da es die zwischengespeicherten Informationen einfach wieder holt.

Was das WordPress-Caching betrifft, so sind wir in Ordnung (und können mit Schritt 2 fortfahren), da bei Kassta auf Server-Level-Caching der Cache für diese Seite oder jeden Post automatisch gelöscht wird, wenn ein Post aktualisiert wird. Lies mehr darüber, wie Kinsta Caching funktioniert. Wenn du eine andere Caching-Lösung oder ein Drittanbieter-Plug-in verwendest, solltest du in deren Dokumentation nachsehen, um sicherzustellen, dass du weißt, wie du deinen Cache für eine URL löschen. Hier sind ein paar Links zu einigen der beliebtesten Caching-Lösungen:

Wenn alles andere fehlschlägt, kannst du den Cache auf deiner gesamten WordPress-Website löschen (siehe unten). Aus Leistungsgründen wird dies jedoch normalerweise nicht empfohlen, da deine Seite den Cache neu aufbauen muss, was in der Zwischenzeit zu einer Verschlechterung der Ladezeiten führt.

Lösche WordPress Cache

Lösche WordPress Cache

Und wenn du weiterhin Probleme hast, könnte dein Bild auch auf deiner CDN gespeichert werden. In diesem Fall musst du möglicherweise deinen CDN-Cache löschen.

Schritt 2 – Scrape Again in Facebook Debugger

Jetzt, da der Cache für den fraglichen Post oder die fragliche Seite gelöscht wurde, müssen wir ihn im Facebook-Debugger-Tool erneut scrapen (abkratzen). Also geben wir die URL ein und klicken auf „Scrape Again“.

Scrape Again in Facebook Debugger Tools

Scrape Again in Facebook Debugger Tools

Du könntest eine Warnung erhalten. Nach unserer Erfahrung sind diese nicht immer die genauesten. Zum Beispiel sehen wir eine Warnung, die besagt, dass unser Image die maximale Größe von 8 MB überschritten hat oder der Server zu langsam reagiert hat. Zunächst einmal ist unser Bild bei weitem nicht so groß, tatsächlich sind es nur 160,63 KB. Zweitens ist unser Server blitzschnell und die gesamte Seite lädt in weniger als 1 Sekunde.

Facebook Warnung

Facebook Warnung

Hier drücken wir einfach zum zweiten Mal den „Scrape Again“-Button. Ja, es könnte seltsam klingen. Aber oft musst du zweimal scrapen (kratzen). Es dauert nur ein paar Sekunden. Und bumm! Da sind wir. Wir können unten sehen, dass es jetzt unser neues gestaltetes Bild zieht und wenn wir uns das og:image Attribut ansehen, ist es tatsächlich der neue Dateiname.

Neues Bild im Facebook Debugger-Tool

Neues Bild im Facebook Debugger-Tool

Es ist wichtig zu beachten, dass dadurch das Bild für bereits geteilte Facebook-Posts nicht aktualisiert wird. Dies betrifft nur Beiträge, an denen du oder andere Personen im Nachhinein teilnehmen.

Zusätzliche Facebook Debugger Tipps

Du kannst das Facebook Debugger-Tool verwenden, um nicht nur alte Bilder zu aktualisieren, sondern auch den Inhalt (Text), den du auf deinem Facebook-Posts siehst. Der Titel und die Beschreibung sind beide Open Graph Meta Tags. Also, wenn du etwas umschreiben musst, aktualisiere es in WordPress, und folge genau den gleichen Schritten oben.

Haben Sie mit Ausfallzeiten und WordPress-Problemen zu kämpfen? Kinsta ist die Hosting-Lösung, die Ihnen Zeit spart! Sieh dir unsere Features an

Die bereitgestellten ‚og: image‘ Eigenschaften sind noch nicht verfügbar

Auch, wenn wir die obigen Warnungen ignoriert haben, bedeutet das nicht, dass sie nicht immer nützlich sind. In der Tat gibt es empfohlene Größen, wenn es um Bilder geht, die du verwenden solltest. Sonst können schlimme Dinge passieren. Zum Beispiel ein Bild, das überhaupt nicht angezeigt wird (siehe unten in dieser Warnung).

Die bereitgestellten ‚og: image‘ Eigenschaften sind noch nicht verfügbar, weil neue Bilder asynchron verarbeitet werden. Um sicherzustellen, dass die Freigabe neuer URLs ein Bild enthält, gib die Abmessungen mit den Tags „og: image: width“ und „og: image: height“ an.

Facebook Debugger - Bild zu klein

Facebook Debugger – Bild zu klein

Das obige Problem trat auf, weil unser Bild zu klein war. Die Mindestbildgröße, die Facebook benötigt, beträgt 200 x 200 Pixel. Je größer, desto besser, wenn es um Facebook-Bilder geht. Wir haben einen Post mit allen empfohlenen Bildgrößen für Social Media zusammengestellt. 1.200 x 630 Pixel scheint für die meisten Menschen am besten zu funktionieren. Es ist OK, auch größer zu werden, tatsächlich war unser Bild auf unserem Post im ersten Beispiel 1460 x 730. Denke daran, dass Facebook etwas größer zuschneiden wird, und daher ist die Beibehaltung des Seitenverhältnisses eines der wichtigsten Teile.

Wenn du ein Plugin wie Yoast SEO verwendest, kann es auch empfohlen werden, das Bild manuell einzustellen. Vielleicht haben deine gestalteten Bilder auf deinem WordPress-Theme ein anderes Seitenverhältnis oder eine andere Größe. Oder vielleicht benutzt du nicht einmal gestaltete Bilder!

In diesem Fall kannst du mit dem Yoast SEO-Plugin manuell ein Bild mit einer anderen Größe hochladen, nur für Facebook, das diese Open Graph Meta Tags auffüllt. Du kannst den Titel und die Beschreibung bei Bedarf auch manuell festlegen.

Yoast SEO Facebook Social Box

Yoast SEO Facebook Social Box

Die folgenden erforderlichen Eigenschaften fehlen: fb: app_id

Möglicherweise siehst du auch die folgende Warnung über eine fehlende Facebook App ID. Es ist wichtig zu beachten, dass dies die Möglichkeit, Beiträge auf Facebook in irgendeiner Weise zu teilen, nicht beeinträchtigt. Oft kann dies einfach ignoriert werden. Es beschränkt jedoch deine Fähigkeit, Facebook Insights -Daten zu verwenden.

Die folgenden erforderlichen Eigenschaften fehlen: fb: app_id

Die folgenden erforderlichen Eigenschaften fehlen: fb: app_id

Die folgenden erforderlichen Eigenschaften fehlen: fb: app_id

Wenn du die zusätzlichen Insights-Daten benötigst, musst du deine Facebook-App-ID zu deiner Website hinzufügen. Hier sind Anweisungen, wie du es in WordPress mit dem Yoast SEO Plugin hinzufügst.

  1. Erstelle deine Facebook App: https://developers.facebook.com/docs/apps/register (das ist völlig kostenlos)
  2. Kopiere deine Facebook App ID aus dem App-Dashboard.
  3. Klicke in deinem WordPress Dashboard auf „SEO“ auf der linken Seite.
  4. Unter dem Reiter „Facebook“ kannst du deine Facebook App ID eingeben.
Facebook-App-ID hinzufügen

Facebook-App-ID hinzufügen

Stelle sicher, dass du den Cache deiner Seite löschst, bevor du das Facebook Debugger-Tool erneut testest.

Zusammenfassung

Hoffentlich verstehst du ein wenig mehr über das Facebook Debugger -Tool und wie du es verwenden kannst, um Bilder auf deiner WordPress-Website zu beheben und zu reparieren. Denke daran, alle Ebenen des Caching zu löschen und dann wegzuscrapen (weguzukratzen). Deine neuen Bilder sollten dann für alle auf Facebook korrekt angezeigt werden.

16
Mal geteilt