Imposer une image, un titre une description lors d’un partage sur Facebook

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-forcer-image-titre-description

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:title" content="Le titre de ma page web" />
<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 :

Comments
  1. Aisne économie
  2. LudiKadmin
  3. sylvain
  4. LudiKadmin
  5. Franchise
  6. Alain
  7. LudiKadmin
  8. BARBAULT christophe

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*