On trouve sur de web de nombreuses sources sur le sujet, à savoir : “comment forcer et imposer une image (vignette), et/ou un titre, et/ou une description sur le réseau social Facebook, lorsque l’on partage une page de l’une de nos réalisations de site internet ?” Malgré les nombreux articles traitant du sujet sur internet, on me pose encore ce type de question, je vais donc à mon tour proposer des solutions afin que vous puissiez améliorer la présentation de vos pages web lorsque celles-ci sont partagées sur Facebook.
Facebook, lors du partage de votre page, va aller chercher les informations directement dans le contenu de votre page et ainsi récupérer “titre”, “description” et s’il trouve une une ou plusieurs images de tailles raisonnables, ira les récupérer pour afficher tout cela sur la zone de partage Facebook.
Cependant, il peut arriver que vous souhaitez imposer une vignette, un titre et une description différente pour s’adapter à la zone de partage de Facebook.
Pour se faire, la meilleure solution consiste à utiliser “Open Graph protocol“, en intégrant à vos pages web quelques balises “meta” qui seront insérées entre les balises “head” de votre site, et qui permettront d’imposer vos éléments aux sites internet qui utilisent ce protocole, dont le célèbre Facebook.
Il suffit de remplir l’attribut property de vos balises meta avec les bons éléments, par exemple :
<meta property="og:description" content="La description de ma page web" />
<meta property="og:url" content="http://www.mon_site.com/url/vers/ma/page" />
<meta property="og:image" content="http://www.mon_site.com/images/vignette_pour_facebook.jpg" />
Vous l’aurez compris “og:title“, permettra d’identifier le titre de votre page web comme étant le texte contenu dans l’attribut “content” de la balise.
“og:description“, permettra d’identifier la description de votre page web comme étant le texte contenu dans l’attribut “content” de la balise.
“og:url“, permettra d’identifier l’url de votre page web comme étant l’url contenue dans l’attribut “content” de la balise.
“og:image“, permettra d’identifier l’image (vignette) de votre page web à choisir comme étant l’image de l’url contenu dans l’attribut “content” de la balise. (une largeur de 200px étant idéale)
A savoir que facebook enregistre directement votre page dans un système de cache lors d’un premier partage. Il peut donc arriver que vous ne voyiez pas de différence entre 2 modifications.
En espérant vous avoir aidé 
Plus d’informations sur The Open Graph protocol : ogp.me/
Articles qui peuvent vous intéresser :
- PHP – Créez votre avatar depuis votre webcam avec UserBooth
- CAjouter facilement un éditeur de texte (style TinyMCE) à vos pages wordpress
- WordPress 3.4 Green est disponible
- Pratique – Qui je suis qui ne me suis plus sur Twitter ?
- Référencement – 10 annuaires de sites web
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Merci pour l’explication de ce protocole, c’est bien mieux de pouvoir gérer l’association de la vignette dans les réseaux sociaux.
Content que ça puisse servir
[...] Imposer une image, un titre une description lors d’un partage sur Facebook [...]
Très bon cette petite astuce, merci ! Est-ce possible d’imposer une image plus grande, et réduire la taille du texte pour plus de réactions ?
Bonsoir Sylvain,
Je ne veux pas dire de bêtises, mais il me semble que l’on n’a pas la main sur ces éléments. Cependant, je vois qu’il est possible d’indiquer des dimensions pour les images (cf. http://ogp.me/#structured) mais je ne sais pas ce que cela peut rendre concernant Facebook.
Je ferai des tests.
Merci pour l’astuce concernant l’image. Pour ce qui est du titre et de la description, un simple double-clic suffit pour les rendre éditable