Partage sur Facebook: optimisez vos pages…

Attention:  cet article date du 16 juillet 2012
Ce qu'il contient est peut être encore valable...
... ou complètement obsolète!

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…

2 réponses pour “Partage sur Facebook: optimisez vos pages…”

  1. GoOz a dit:

    Les informations peuvent être changées hein :)
    C’est juste que FB a un cache d’une semaine (en gros) là-dessus qu’on ne peut pas forcer, sauf si tu connais un mec chez FB :p Par contre, évidemment, ça ne changera pas les infos déjà postées.

    Par contre, y a que moi qui trouve ça stupide l’Open Graph ?
    Question data, genre on n’avait pas déjà assez de normes. Entre RDFa, Microformats et enfin, encore mieux, Microdata, on avait de quoi faire mais non, Môssieur Facebook préfère en rajouter une… -_-

    Pour le coup je préfère l’approche de Google qui, sur G+, préfère le MicroData, puis en fallback l’OpenGraph et en dernier recours les balises meta standards.

    voilà voilà

  2. Merci pour ces informations qui sont bien utiles quand on veut maîtriser la distribution des images.

    A priori il y a un mode debug sur FB qui permet de vérifier ensuite si la balise a bien été réalisée.

    Je retiens la préférence pour des images de 200px, inutile de faire plus grand si cela prend de la ressource serveur.

Laisser une réponse