web-dev-qa-db-fra.com

Comment définir une image de site Web qui sera affichée en tant qu'aperçu sur Facebook?

Lorsque vous partagez un lien sur facebook, il trouvera automatiquement des images sur le site Web et en choisira une au hasard. Comment pouvez-vous influencer l'image de prévisualisation? Quand une personne partage le lien du site sur son facebook?

147
Mark

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

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

2. Dans 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 protocole graphique ouvert ici.

Après , utilisez le Facebook " Object Debugger " si l'image ne s'affiche pas correctement. Notez également que la première fois partagée, elle ne sera toujours pas affichée à moins que la hauteur et la largeur soient également spécifiées, voir Partager sur Facebook - La vignette ne s'affiche pas pour la première fois

228
Shef

Notez également que si vous avez wordpress, faites défiler l'écran jusqu'en bas de la page Web et sélectionnez "Image en vedette" (en bas à droite de l'écran).

4
davea0511

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

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

il suffit de remplacer/uploads/... avec l'adresse de l'image copiée. Cliquez sur Publier pour appliquer le changement.

Vous pouvez ignorer la partie de la réponse de Shef concernant l'espace de nom, car celle-ci est déjà définie par défaut dans Weebly.

1
krubo