Image illustrant Facebook OpenGraph : Partager plusieurs images (dans l'ordre)

Facebook OpenGraph : Partager plusieurs images (dans l’ordre)

Pour mon site internet et portfolio de webdesigner j’ai mis en place la possibilité de partager le contenu d’une page sur Facebook.

Par défaut, Facebook se charge de parcourir votre page et de détecter les tags img présents pour vous proposer ces images au moment du partage.

Oui mais...

On serait tenté de laisser ce comportement par défaut mais en y regardant de plus près, et surtout lorsque la qualité du rendu de vos images a de l’importance, Facebook ne fait pas bien les choses et vous coupe les images d’une manière bien inesthétique. Prenez par exemple cette photo de fleur complètement coupée :

Qui en réalité ressemble à ceci :

JPEG - 34.3 ko
© Julien Moureau

Bienvenue dans l’OpenGraph

L’OpenGraph est un protocole proposé par Facebook afin de mieux renseigner une page internet et son contenu (notamment) lors du partage de ladite page sur Facebook.

Ce protocole nous permet de renseigner une foule de paramètres au moyens de meta tags préfixés par og:.

Proposer plusieurs images

Le meta tag og:image nous permet de renseigner l’image que nous vouons partager lors de la publication de l’url. Celle-ci supplantera les images automatiquement récupérées dans la page par Facebook lors de son scraping.

Minimum 200 pixels de large !

En-dessous de cette taille Facebook considèrera votre image comme étant trop petite ou pas assez "importante" que pour être partagée et retournera vers une solution de scraping.

Si j’en définis plusieurs, quel sera l’ordre d’affichage

Vous pouvez proposer autant de tags og:image que vous le désirez mais laquelle va être affichée (et partagée) par défaut ?
Réponse : La plus importante en résolution sera affichée par défaut. La moins importante en dernier.

Comment tester avant de mettre en production ?

Les développeurs chez Facebook sont assez sympas que pour vous proposer un outil de test de vos urls : renseignez-y celle que vous voulez tester et vous récupérerez beaucoup d’informations utiles.

Que faire si mon image ne change pas lors du partage ?

Pas de panique, Facebook utilise un système de cache pour vos vignettes et lui demander de le vider est aussi simple que de rajouter un paramètre fbrefresh=valeur_aleatoire dans leur débogueur d’url.
Par exemple si je voulais rafraîchir le logo de mon site sur la page d’accueil j’utiliserais cette url dans le champ : http://jefaisvotresite.com/?fbrefresh=videz_votre_cache_gentils_robots

A vos partages, prêt, go !