Image de site Web par défaut pour le partage social
Est - il possible de définir une image par défaut qui apparaît lorsque je partage mon site Web sur Facebook? J'ai remarqué que Facebook récupère généralement la première image du site à utiliser comme vignette.
5 réponses
Vous devez définir la balise meta image facebook:
<meta property="og:image" content="http://example.com/logo.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
Pour plus d'informations, consultez la docs
<meta property="og:image" content="http://example.com/lamb-full.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">
La Taille de L'Image doit être d'au moins 200px X 200px
Les serveurs de Facebook vont "gratter" votre site web à la recherche d'une image à utiliser lorsque les gens le partagent. Si vous voulez spécifier l'image à utiliser, mettez ceci dans la section <head></head> de votre site web:
<meta property="og:image" content="http://url-to-your-image.png">
Facebook peut avoir mis en cache une copie de l'image aléatoire précédente. Pour que facebook récupère à nouveau:
Définir une og:image dans le <head> de votre document HTML comme ceci:
<meta property="og:image" content="http://example.com/ogp.jpg" />
Cela fait partie du protocole Open Graph, respecté par au moins les sites de médias sociaux suivants:
- Facebook (voir https://developers.facebook.com/docs/sharing/webmasters/#images)
- Twitter (voir https://dev.twitter.com/cards/getting-started#opengraph)
- LinkedIn (voir https://developer.linkedin.com/docs/share-on-linkedin)
- Google + (Voir https://developers.google.com/ + / web / extrait de code/)
- Pinterest (voir https://developers.pinterest.com/docs/rich-pins/reference/)
(... et probablement beaucoup plus.)
En plus de définir la balise ci-dessus, vous pouvez également vouloir:
- effacez la version mise en cache de l'image de votre page par la plateforme de médias sociaux (par exemple en utilisant outils de développement de la plate-forme), de sorte que vous pouvez voir le changement reflété immédiatement. Par exemple, vous pouvez le faire pour Facebook, à https://developers.facebook.com/tools/debug/
- ajoutez des "propriétés structurées" supplémentaires pour spécifier des choses comme la largeur ou la hauteur de l'image, en utilisant la syntaxe décrite à http://ogp.me/#structured . Ceci est décrit comme une "meilleure pratique" par Facebook à https://developers.facebook.com/docs/sharing/best-practices#images.
C'est ma solution, ça marche bien:
<head>
<!--FACEBOOK-->
<meta property="og:image" content="https://www.website.com/logo.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.website.com/"/>
<meta property="og:title" content="Website title" />
<meta property="og:description" content="Website description." />
<head>
Vous pouvez faire des tests avec Facebook Debug site .