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/
Ecrit le 4 avril 2015
Haut de page
|