Wie kann ich ein Website-Bild festlegen, das als Vorschau auf Facebook angezeigt wird?

156

Wenn Sie einen Link auf Facebook teilen, werden automatisch Bilder auf der Website gefunden und zufällig als Vorschau ausgewählt. Wie können Sie das Vorschaubild beeinflussen? Wenn eine Person den Website-Link auf ihrem Facebook teilt?

image facebook preview Kennzeichen
quelle

Antworten:

234

1. Fügen Sie Ihrer HTML-Deklaration die Open Graph XML-Namespace-Erweiterung hinzu

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. <head></head>Verwenden Sie in Ihrem Verzeichnis das folgende Meta-Tag, um das Bild zu definieren, das Sie verwenden möchten

<meta property="og:image" content="fully_qualified_image_url_here" />

Lesen Sie hier mehr über das Open Graph-Protokoll .

Nach den oben tun, ist die Verwendung Facebook „Object Debugger“ , wenn das Bild nicht richtig angezeigt. Beachten Sie auch, dass das erste Mal, wenn es geteilt wird, immer noch nicht angezeigt wird, es sei denn, Höhe und Breite sind ebenfalls angegeben. Siehe Auf Facebook teilen - Miniaturbild wird nicht zum ersten Mal angezeigt

Shef
quelle
2
@ Martin Ich bin mir nicht bewusst. Vielleicht tun sie das, aber ich sehe es nicht in den Open Graph Protocol Docs erwähnt . Probieren Sie den Debugger aus , um festzustellen , ob die zwischengespeicherten Werte für Ihre Site angezeigt werden. Es scheint eine andere Frage auf SO mit dem Titel Facebook Open Graph zu geben, die den Cache im Zusammenhang mit diesem Problem nicht löscht .
Shef
7
Kommentar von @KDog: Haben Sie Probleme? Überprüfen Sie Ihre Codes im Facebook-Debug-Tool. Bild, Titel und Text des Facebook-Cache. Ich habe den Titel beim Hinzufügen von XML zu meiner Website geändert. Da ich versehentlich einige Validierungsfehler erstellt habe, hat sich an der Freigabe-Vorschau von Facebook nichts geändert. Facebook verwendete einen gültigen Cache, anstatt die ungültigen neuen Daten anzuzeigen. Ich konnte diese Fehler mithilfe von developer.facebook.com/tools/debug beheben . Danach werden mein neuer Titel und meine neuen Bilder sofort angezeigt.
Jeremy Thompson
3
@ScotterMonkey: Ja, das ist das erwartete Verhalten. Sie können FB mitteilen, welche Inhalte verwendet werden sollen. Übrigens können Sie mehrere Elemente <meta property="og:image" content="your_image_here" />zwischen den headElementen hinzufügen, damit Sie auswählen können, wann Sie auf FB posten.
Shef
2
Habe das Ding mit fb in der HTML-Deklaration verpasst. Rettete meinen Tag! (Auch wenn dies ein drei Jahre alter Beitrag ist). Vielen Dank!
bestprogrammerintheworld
17
Der Inhaltslink ist eine tatsächliche URL - kein relativer Link, den ich herausgefunden habe. dh http://mywebsite.com.au/Images/prettypic.pngnicht/Images/prettypic.png
JumpingJezza
4

Beachten Sie auch, dass Sie bei WordPress im Bearbeitungsmodus einfach zum Ende der Webseite scrollen und "Ausgewähltes Bild" (rechts unten auf dem Bildschirm) auswählen.

davea0511
quelle
1

Wenn Sie Weebly verwenden , zeigen Sie zunächst die veröffentlichte Site an und klicken Sie mit der rechten Maustaste auf das Bild, um die Bildadresse zu kopieren. Gehen Sie dann in Weebly zu Site bearbeiten, Seiten, klicken Sie auf die Seite, die Sie verwenden möchten, SEO-Einstellungen, und geben Sie unter Header-Code den Code aus Shefs Antwort ein:

<meta property="og:image" content="/uploads/..." />

Ersetzen Sie einfach / uploads / ... durch die kopierte Bildadresse. Klicken Sie auf Veröffentlichen, um die Änderung zu übernehmen.

Sie können den Teil von Shefs Antwort zum Namespace überspringen, da dieser in Weebly bereits standardmäßig festgelegt ist.

krubo
quelle