Partage sur Facebook: optimisez vos pages…

Il arrive souvent (ou du moins on aimerait que cela soit le cas) que des utilisateurs partagent une page de vos sites en copiant l’adresse dans Facebook. FB va alors ajouter un aperçu automatique (que l’utilisateur peut retirer).

Dans cet aperçu, nous trouverons le titre, le résumé et une vignette, censés inciter les amis à aller voir.

La question: comment personnaliser ces informations?

Comme souvent, une recherche sur Internet et une lecture de la doc permettent d’avoir la réponse (même si les recherches sont parfois confuses et la doc pas à jour). Comme souvent, je résume ici les infos pour les retrouver facilement (et y ajoute mon grain de sel).

Mise en place des metas

La première information va se situer dans les balises meta de votre page. Sous la forme de 3 lignes:

<meta property="og:title" content="titre" />
<meta property="og:description" content="description" />
<meta property="og:image" content="url de la vignette" />

Pour les deux premières, en cas d’absence, il reprendra les balises <title> et <meta description> si celles-ci sont présentes (et elles doivent l’être…)

Pour l’image, a vous de le préciser, sinon il proposera les X premières images qui semblent correspondre. Autant dire que cela peut donner des surprises.

Là, soit vous utilisez une image pour chaque article (l’image à la une d’un article si vous utilisez WordPress par exemple), soit vous utilisez une image standard pour l’ensemble du site. Un logo par exemple.

Pour les dimensions de la vignette, elle doit être de 50 pixels minimum, et ne pas dépasser 130×110. FB impose que le ration largeur/hauteur ne dépasse pas 3 (donc une image horizontale). Voir le détail sur la documentation Facebook Share (et voir ci dessous, la doc ne semble pas à jour).

On peut y ajouter d’autres valeurs pour simplifier encore le travail:

<meta property="og:url" content="url de la page" />

Vérification et corrections

Pour savoir quelles informations Facebook reprend de votre lien, vérifier que tout va bien, que la vignette est bonne, que les textes sont optimisés, FB nous propose un outil intéressant, le debugger.

Vous saurez ainsi ce qui cloche sur une page précise, et les actions à entreprendre… Accessoirement, cela vous permettra de mettre à jour la vignette en cas de changement (mais la chose ne semble pas immédiate).

D’ailleurs, cet outil nous informe que FB s’attend à ce que l’image vignette fasse au moins 200 pixels dans les deux dimensions (cela a du changer)…

La taille la plus adaptée semble être 200×200…

Chose importante: si votre site est beaucoup partagé, il semblerait que Facebook sollicite beaucoup celui-ci pour générer les vignettes (j’ai eu un fort ralentissement d’un site une fois, me forçant à retirer le partage). Mon conseil: utilisez un logo pour chaque site (et pas pour chaque page), et stockez ce logo sur un site différent (free, flickr…) pour répartir le trafic…

A noter aussi que si le lien est déjà partagé, liké ou autre, les informations ne peuvent pas forcément être changée. Il est donc important de mettre en place tout ceci le plus tôt possible…