Atout Informatic


Facebook et l'Open Graph


Pour les développeurs qui partagent leurs pages sur Facebook :
Vous voulez partager des pages de votre site sur Facebook, mais aucune image ou vignette n'est affichée !
Du coup, votre post a beaucoup moins d'impact !
Pourquoi ?
C'est un problème d'Open Graph...

Mais qu'est-ce que l'Open Graph
Le protocole Open Graph est un ensemble de balises qui permet à un webmaster de donner aux principaux réseaux sociaux (Facebook, Google +, Twitter entre autres) des informations sur ses pages, informations qui vont permettre un meilleur affichage sur les réseaux sociaux.
A l'origine, le protocole Open Graph a été crée par Facebook.

Les balises de l'Open Graph (OG) à placer dans le head de votre page.
La balise meta og:title --- Titre de votre page.
La balise meta og:type --- Type de la page. Pour voir la liste des types possibles, consultez le site de l'Open Graph.
La balise meta og:image --- URL de l'image qui représente votre page.
La balise meta og:url --- URL de votre page.
La balise meta og:description --- Description de votre page (pas plus de 300 caractères).
La balise meta og:video --- URL de votre éventuelle vidéo..
La balise meta og:locale --- Langue de votre page.
La balise meta og:site_name --- Nom de votre site.


Une astuce pratique :
Personnellement, sur mes sites, pour un affichage de vignettes (ou images) dans Facebook, je n'ai pas repris toutes les balises OG (j'avais beaucoup trop de pages à corriger), je me suis donc contentée d'ajouter les balises Images dans le head de mes pages :

<meta property="og:image" content=" http://www..... url de l'image.....jpg/ />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="670" />
<meta property="og:image:height" content="365" />

Attrention, si on omet la largeur et la hauteur de l'image, ça ne fonctionne pas !

Encore un petit truc pratique
Si vous aviez déjà proposé votre page sur Facebook, avant d'avoir ajouté les balises OG, la page restera telle que vous l'aviez proposée la première fois !
Le cache de Facebook ne se rafraîchira pas.
Pour forcer le debuggage, soumettez l'URL de la page concernée ici :
https://developers.facebook.com/tools/debug/


Et enfin :
Pour des pages en PHP, vous pouvez compléter cette information, en consultant cet intéressant article :
http://www.reussir-mon-ecommerce.fr/2015/03/31/comment-partager-correctement-les-pages-de-votre-site-sur-facebook/

Ecrit le 4 avril 2015

Haut de page