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 :

Author: Franck Pertegas

Share This Post On

8 Comments

  1. 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.

    Post a Reply
  2. 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 ?

    Post a Reply
  3. 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.

    Post a Reply
  4. 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

    Post a Reply
  5. Bonjour,
    J’ai bien compris pour la vignette et le descrtiption, mais pas très bien pour les deux autres lignes.
    Que doit-on y mettre précisément?
    Merci.

    Post a Reply
  6. @Franchise : oui c’est vrai, mais ça permet d’avoir un contenu par défaut 😉

    @Alain : pour l’url, il suffit d’y indiquer l’url exacte de la page (sans #hashtag par exemple)
    pour l’image, il lien vers l’image à envoyer sur le partage facebook (en respectant les dimensions)

    Post a Reply
  7. Bonjour,
    Moi je voudrais juste que lorsque je partage un article de mon blog, l’image du partage soit la même que l’image de l’article du blog et soit plus en adéquation plutôt qu’une vignette de la même image.
    Pour résumé, systématisé, par 1 script, la chose ?
    Si quelqu’un peut m’aider
    CDT
    @+

    Post a Reply

Trackbacks/Pingbacks

  1. PHP – Enchainer les méthodes d’une classe | LudiBlog - [...] Imposer une image, un titre une description lors d’un partage sur Facebook [...]
  2. Pratique – Qui je suis qui ne me suit plus sur twitter ? | LudiBlog - [...] Imposer une image, un titre une description lors d’un partage sur Facebook [...]
  3. 13 techniques pour obtenir 500 partages sociaux - […] Pour savoir comment choisir vous même le titre, la description et l’image d’un partage social, il faut utiliser l’openGraph…

Submit a Comment

Votre adresse e-mail ne sera pas publiée.