Comment puis-je définir une image de site Web qui s'affichera en aperçu sur Facebook?

156

Lorsque vous partagez un lien sur Facebook, il trouvera automatiquement des images sur le site Web et en choisira une au hasard comme aperçu. Comment pouvez-vous influencer l'image d'aperçu? Quand une personne partage le lien du site Web sur son facebook?

image facebook preview marque
la source

Réponses:

234

1. Incluez l'extension d'espace de noms XML Open Graph dans votre déclaration HTML

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

2. À l'intérieur de votre, <head></head>utilisez la balise Meta suivante pour définir l'image que vous souhaitez utiliser

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

En savoir plus sur le protocole Open Graph ici.

Après avoir fait ce qui précède, utilisez le "débogueur d'objets" de Facebook si l'image ne s'affiche pas correctement. Notez également que lors du premier partage, il n'apparaîtra toujours pas à moins que la hauteur et la largeur ne soient également spécifiées, voir Partager sur Facebook - La vignette ne s'affiche pas pour la première fois

Shef
la source
2
@Martin je ne suis pas au courant. Peut-être qu'ils le font, mais je ne le vois pas mentionné dans la documentation sur le protocole Open Graph . Essayez le débogueur pour voir si les valeurs mises en cache sont affichées pour votre site. Il semble y avoir une autre question sur SO intitulée Facebook Open Graph ne vide pas le cache liée à ce problème.
Shef
7
Commentaire de @KDog: Vous avez des problèmes? Vérifiez vos codes sur l'outil de débogage Facebook. Image, titre et corps du texte du cache Facebook. J'ai changé le titre en ajoutant xml à mon site Web et parce que j'ai accidentellement créé quelques erreurs de validation, rien n'a changé dans l'aperçu de partage de Facebook. Facebook a utilisé un cache valide au lieu d'afficher les nouvelles données invalides. J'ai pu résoudre ces erreurs à l'aide de développeurs.facebook.com/ tools/ debug . Après cela, mon nouveau titre et mes images s'affichent tout de suite.
Jeremy Thompson
3
@ScotterMonkey: Oui, c'est le comportement attendu. Vous pouvez indiquer à FB quel contenu utiliser. BTW, vous pouvez ajouter plusieurs éléments <meta property="og:image" content="your_image_here" />entre les headéléments afin de pouvoir choisir le moment où vous publiez sur FB.
Shef
2
J'ai manqué cette chose avec fb dans la déclaration html. J'ai sauvé ma journée! (même s'il s'agit d'un poste vieux de trois ans). Merci beaucoup!
bestprogrammerintheworld
17
le lien de contenu est une URL réelle - pas un lien relatif que j'ai découvert. ie http://mywebsite.com.au/Images/prettypic.png, pas/Images/prettypic.png
JumpingJezza
4

Notez également que si vous avez wordpress, faites simplement défiler vers le bas de la page Web lorsque vous êtes en mode édition, et sélectionnez "Image vedette" (en bas à droite de l'écran).

davea0511
la source
1

Si vous utilisez Weebly , commencez par afficher le site publié et cliquez avec le bouton droit sur l'image pour copier l'adresse de l'image. Ensuite, dans Weebly, allez dans Modifier le site, Pages, cliquez sur la page que vous souhaitez utiliser, Paramètres de référencement, sous Code d'en-tête, entrez le code de la réponse de Shef:

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

juste en remplaçant / uploads / ... par l'adresse de l'image copiée. Cliquez sur Publier pour appliquer la modification.

Vous pouvez ignorer la partie de la réponse de Shef sur l'espace de noms, car elle est déjà définie par défaut dans Weebly.

Krubo
la source