Comment forcer la vignette utilisée par Facebook lors d’un partage ?

La vignette affichée par Facebook lors du partage d’un lien est ce qui attire l’oeil de ses amis et connaissances. On peut raisonnablement supposer que Facebook analyse le code source de la page partagée et qu’il propose les images qu’il rencontre sur celle-ci à l’utilisateur qui choisira la vignette. Voici l’astuce permettant de forcer cette vignette, !

Modifier l’entête de sa page (balise HEAD)

Pour forcer Facebook à utiliser la vignette de son choix, il suffit d’inclure ce code dans l’entête de son site (entre la balises HEAD) :

<html>
<head>
// ...

<link href="http://www.votresiteweb.com/lavignettefacebook.png" rel="image_src"  />

// ...
</head>
<body>
</body>
</html>

Tout est dans le rel="image_src" ! 😉

A noter que Facebook recommande que votre image fasse 200px de largeur. Si la taille de votre image est trop petite, Facebook l’ignorera. Je vous conseille d’opter pour une image d’au moins 180 pixels de largeur.

Un article intéressant sur le sujet : 5 astuces pour optimiser votre page Facebook

  • Christophe

    Bonjour,
    Depuis quelques temps je rencontre des problèmes avec la vignette lors du partage sur Facebook voici que il m’affiche (Voir pièce jointe)

    Bien que mon image dans l’article est supérieure a 200×200 pixels.
    Savez-vous si le problème viens de WordPress ou du script installer ?

    J’ai été eu le même script pour le partage et tout aller très bien, mais depuis quelques temps sa ne s’affiche plus ou que 1 fois sur 2 par exemple.

    Merci de votre réponse !

  • bonjour,
    aux utilisateurs de WordPress, prendre le plugin WordPress SEO by Yoast, l’un des meilleurs plugins SEO pour beaucoup d’utilisateurs de WP.
    L’avantage, avoir un sitemap.xml et installer les balises open graph, bien configuré dans la réseaux sociaux »

  • Paul Bouvier

    Bonjour,
    J’ai testé toutes les techniques possibles afin de forcer le partage d’image sur mon site.

    Dans mon Header.php

    Dans mon Index.php

    Ps : C’est un site sous WordPress
    Merci d’avance

    • Nicolas Hachet

      Bonjour,

      votre image fait quelle taille ? Elle doit être supérieure à 200px x 200 px.

      • Paul Bouvier

        Elle fait exactement 200px sur 200. Je teste avec une de 201px sur 201

        • M.Defachelle

          Bonjour,

          je dispose d’une page web incluant plusieurs images au format 100x100pixels.
          J’ai beau avoir mon logo, que je souhaite mettre en avant d’une taille de 200x200pixels, ce sont à chaque fois les petites images qui sont proposés comme vignettes.

          Voici tout ce que j’ai tenté sans succès :

          Une idée ?

          Cordialement

      • Paul Bouvier

        205x205px , çà ne marche pas…

  • ipszy

    Bien que mon code se trouve entre mes balises head de ma page index.php dans mon template et que le lien de mon image soit correct la vignette ne s’affiche pas sur cette image 🙁

    Comment faire ?

  • Shirane

    Merci pour tout. Je lui envoie toutes vos informations.

  • Shirane

    Merci encore pour toutes vos explications que je transmets , si vous êtes d’accord, à mon westmaster.

  • Shirane

    bonjour,

    Pourriez-vous m’expliquer davantage.

    Pour forcer Facebook à utiliser la vignette de son choix, il suffit d’inclure ce code dans l’entête de son site (entre la balises HEAD) :
    où je trouve les balises head ?
    Merci pour votre réponse.

  • Shirane

    Bonjour,

    Je n’ai pas très bien compris « modifier l’entête de sa page » et où je dois inclure le code :
    http://www.votresiteweb.com/lavignettefacebook.png
    Merci de m’expliquer davantage.

    • Nicolas Hachet

      Bonjour,

      le code suivant doit être placé entre les balises <head></head> de votre page HTML :


      <head>
      // ...

      // ...
      </head>

      • Shirane

        Merci de la rapidité de votre réponse mais où se trouve la page HTML et les balises.

        • Nicolas Hachet

          La page HTML est sur votre serveur Web. Si vous n’avez pas accès à votre serveur (exemple blog sur plateforme type skyblog, over-blog, etc.), vous ne pouvez pas utiliser cette technique.

  • SodaCitron

    Merci pour l’information des 200px. C’est exactement ce qui me bloquait et qui a résolu mon problème.

  • Il est vrai qu’il est assez agaçant d’avoir des images aléatoires qui parfois ne correspondent pas au contenu. Heureusement avec WordPress et les miniatures d’articles cela fonctionne mieux, mais ce n’est pas toujours le cas pour les sites perso. Merci pour l’info.

  • David

    Pour info il existe le protocole très complet « Open Graph » qui est standardisé et donc valide pour la plupart des réseaux sociaux, dont facebook.

    http://ogp.me/

    • Merci pour le lien, le concept est très intéressant.

      Pour info, il s’agit d’une technologie conçue par Facebook pour ajouter une valeur sémantique aux informations du Web.