24.20 Image que Facebook choisit pour accompagner les liens vers une page de notre site (Open Graph)

Avez-vous déjà partagé sur Facebook un lien vers une page Web ? Si oui, vous avez certainement remarqué que d'un site à l'autre, et même d'une page à l'autre sur un même site, les images accompagnant le lien ne sont pas toujours générées de la même façon.

Dans le plus simple des cas, Facebook affiche simplement un extrait de la page Web :

Il arrive également qu'une petite image soit affichée à gauche de l'extrait :

D'autres fois, Facebook affiche une image pleine largeur au-dessus de l'extrait. Beaucoup plus accrocheur :

Comment Facebook détermine-t-il l'image qui doit accompagner un lien ? À l'aide des balises Open Graph. Donc, si vous êtes le développeur ou l'administrateur d'un site Web, vous pouvez utiliser les balises Open Graph pour contrôler l'apparence des liens que les gens publient vers vos pages.

Balise og:image

L'image que Facebook affichera sera spécifiée à l'aide de la balise méta og:image.

Ex : 

Pour que Facebook utilise l'image spécifiée à cet endroit, il faut respecter les conditions suivantes :

• L'image doit avoir au minimum 200 x 200 pixels
• La taille préférable est de 1200 x 630 pixels
• Une image de moins de 600 x 315 pixels s'affichera tout de même mais elle sera affichée à gauche de l'extrait plutôt que de prendre tout l'espace disponible en-dessous.

Il arrive que lors de la publication d'un lien sur Facebook, aucune image ne soit affichée malgré la présence des balises Open Graph. La raison : Facebook doit avoir mis l'image en cache afin de connaître ses dimensions.

Pour contrer ce problème, il est possible de préciser la taille de l'image à l'aide de balises Open Graph. Ceci permettra à Facebook d'afficher l'image même si elle n'a pas été auparavant mise en cache.

Ex : 

Autres balises Open Graph intéressantes

Le protocole Open Graph met à votre disposition d'autres balises intéressantes pour mieux définir la façon dont Facebook affichera l'information sur un lien. Si votre page ne contient pas ces balises, Facebook recherchera dans le code de la page l'information qu'il croit être la bonne information à afficher. Il utilisera pour cela la technique du « scraping », c'est-à-dire qu'il se servira d'un algorithme pour récupérer les informations directement dans le code HTML de votre page. Bien que ceci fonctionne généralement assez bien, il peut arriver que les résultats ne correspondent pas à vos attentes. 

Donc, si vous désirez contrôler les informations que Facebook affiche au sujet de votre page, vous devez les préciser à l'aide des balises Open Graph suivantes :

Quelques précisions sur ces balises :

• Le titre Open Graph est différent du titre d'entête de la page (balise <title>). En effet, puisqu'il n'est pas utilisé pour le référencement mais bien comme titre d'une publication, on le voudra concis. Les bonnes pratiques veulent qu'on évite d'y inclure le nom d'une entreprise et qu'on se limite à annoncer clairement le contenu de la page. On évitera donc une formule du genre « Mon entreprise | Comment réussir son jardin » pour lui préférer « Comment réussir son jardin ».
• Le type doit annoncer ce qu'on retrouve sur la page. Les choix possibles sont : website, article, video, book, music et profile.
• La description sera utilisée comme extrait de la page. Si vous ne la fournissez pas, Facebook utilisera les premiers paragraphes du texte de la page. 

Notez qu'il existe de nombreuses autres balises Open Graph. Consultez le site officiel pour les connaître.

Mécanisme de cache de Facebook et débogueur Facebook

Sachez que Facebook utilise un mécanisme de cache interne. Si vous modifiez une image que Facebook a déjà mise en cache, il vous faudra attendre que Facebook mette à jour son cache avant de voir les modifications, ce qui prend généralement de 24 à 48 heures.

Comme il s'agit du cache de Facebook et non de celui de votre propre navigateur, le rafraîchissement de la page n'aura aucun effet. Quelques solutions s'offrent toutefois à vous :

• Si vous avez modifié l'image utilisée dans la balise og:image (ex : vous avez rogné une partie de l'image), prenez soin de changer son nom physiquement dans le fichier modifié et d'utiliser ce nouveau nom dans la balise Open Graph. De cette façon, Facebook considérera que l'image est complètement nouvelle.
• Dans certains cas, Facebook vous offre la possibilité de rafraîchir les informations relatives à un lien que vous avez publié en vous offrant le menu « Refresh share attachment ».

  

• Il est possible de forcer le rafraîchissement du cache à l'aide du débogueur Facebook : https://developers.facebook.com/tools/debug/. Vous entrez l'URL de la page désirée dans cet outil et il vous montrera toute l'information qu'il a trouvée sur la page et ce, même si elle ne contient aucune balise Open Graph. Ceci rafraîchira au passage les informations mises en cache.

Notez que l'utilisation systématique du débogueur Facebook comporte plusieurs avantages. D'abord, il permet de vous assurer que les informations que Facebook a récoltées sur votre page sont bien celles que vous désirez. L'outils vous notera au passage les erreurs à corriger dans vos balises Open Graph. De plus, le problème d'image qui n'apparait lorsque Facebook ne l'a pas encore mise en cache sera automatiquement réglé.

Pour plus d'information

« The Open Graph protocol ». Open Graph Protocol. http://ogp.me/

« Debugger ». Facebook Developers. https://developers.facebook.com/tools/debug/

« Sharing Best Practices for Websites & Mobile Apps - Image Sizes ». Facebook Developers.  https://developers.facebook.com/docs/sharing/best-practices#images

« Facebook Open Graph Meta Tags Tutorial ». QNimate. http://qnimate.com/open-graph-protocol-in-facebook/