Open Graph : socialisez votre site !
Avez-vous déjà partagé un lien vers un site web sur Facebook sans qu'aucun aperçu de la page ne soit généré ? Si le HTML de la page avait contenu les bonnes balises Open Graph, cela ne serait jamais arrivé ! Le protocole Open Graph permet en effet aux webmasters de maîtriser l'affichage des aperçus de leurs sites web quand ceux-ci sont partagés sur les réseaux sociaux, en particulier Facebook.
Introduit en 2010 par Facebook afin de permettre aux webmasters et marketers d'enrichir la manière dont leurs sites apparaissaient sur Facebook, le protocole Open Graph s'est peu à peu imposé au point d'être désormais pris en compte par d'autres plateformes et réseaux sociaux populaires comme LinkedIn, Pinterest, Reddit... A l'heure où les réseaux sociaux représentent l'une des principales sources de trafic sur le web, il s'agit d'un outil indispensable pour maîtriser sa communication digitale !
Pourquoi les balises Open Graph sont-elles si importantes ?
Selon un étude récente de Shareholic, environ 26% du trafic web mondial provient des réseaux sociaux. Une source importante à ne pas négliger, donc !
Que vous soyez webmaster ou marketer, ou même tout simplement blogger, les balises Open Graph vont vous permettre de maîtriser au mieux l'affichage de vos contenus quand ces derniers seront partagés sur les réseaux sociaux. Ainsi, vous pourrez améliorer considérablement votre CTR (click-through rate) et augmenter le trafic vers votre site. Une bonne pratique SEO à ne surtout pas ignorer, donc.
Pour le marketer, cela veut dire plus de leads, et de meilleure qualité. Pour le blogger, cela peut permettre d'accroître sensiblement son lectorat. Et pour le webmaster ? Connaître et implémenter correctement le protocole Open Graph lui permettra de montrer qu'il comprend au mieux les attentes de ses clients.
Comment installer les balises Open Graph sur votre site ?
Ajouter des balises Open Graph à son site web, c'est simple. Tout se joue dans le <head> de votre site. Il existe plusieurs balises de type <meta> qui correspondent aux différentes informations que vous voulez mettre en avant quand votre site est partagé sur les réseaux sociaux. Peu importe l'ordre d'apparition de ces dernières dans le code source de votre page, du moment qu'elles sont toutes présentes !
On trouve de nombreuses balises différentes, qui ne seront pas toutes abordées dans cet article. Voici cependant les 5 balises essentielles à intégrer :
- La balise og:title
- La balise og:type
- La balise og:image
- La balise og:description
- La balise og:url
La balise og:title
C'est la balise la plus importante : il s'agit du titre qui s'affichera quand on partagera votre site. Il est important qu'il soit court, clair, précis et surtout accrocheur ! Il est conseillé de rester en-dessous de 65 caractères (Facebook autorise jusqu'à 90 caractères). Au-delà, des réseaux sociaux comme Facebook couperont votre titre.
Elle prend la forme suivante :
<meta property=”og:title” content=”Le titre de votre page/article ici” />
La balise og:type
Elle permet d'indiquer à Facebook et aux autres réseaux sociaux reconnaissant le protocole Open Graph quel type de contenu vous partagez : un site web, une vidéo, une image... Selon le type de contenu, vous aurez accès à d'autres balises Open Graph plus avancées, et donc à des aperçus plus adaptés à votre contenu.
Voici sa forme :
<meta property=”og:type” content=”type” />
Plusieurs valeurs peuvent être assignées à cette balise : website pour une page web, article pour un article, blog pour un blog... La documentation de Facebook sur le sujet est très complète, et je vous conseille de vous y référer si jamais vous avez une utilisation avancée des Open Graph (ici)
La balise og:image
Comme le dit l'adage, "Une image vaut mille mots". Cette balise est ESSENTIELLE ! Elle permet d'indiquer aux réseaux sociaux quelle image afficher quand votre site web est partagé sur les réseaux sociaux. Prenez soin de bien sélectionner une image qui donne envie d'accéder sur votre contenu, en y incluant par exemple un CTA (call-to-action).
Important : tous les réseaux sociaux n'ont pas les mêmes exigences en termes de format d'image, et il convient donc de bien penser aux réseaux sociaux que vous ciblez quand vous décidez d'une image à intégrer :
- Facebook requiert des images de minimum 600 x 315 pixels, et d'une taille maximale de 8mb.
- LinkedIn préconise des images de 1200 x 630 pixels au minimum, et d'une taille maximale de 5mb, avec un ratio de 1.91/1
De manière générale, les formats JPEG, PNG, SVG et même GIF sont acceptés.
La balise og:image prend la forme suivante :
<meta property=”og:image” content=”URL de votre image” />
Enfin, il est possible d'ajouter plusieurs balises og:image dans une même page, ce qui aura pour effet, sur Facebook notamment, de permettre aux utilisateurs de choisir quelle image afficher au moment où ils partageront votre page.
La balise og:description
Comme son nom l'indique, cette balise vous permet de préciser la description de votre site. Il est conseillé de rester concis et précis, en moins de 200 caractères.
Elle prend la forme suivante :
<meta property=”og:description” content=”Votre description (200 caractères max.)” />
La balise og:url
Vous pouvez faire en sorte que l'aperçu généré au moment du partage de votre site renvoie vers une page spécifique de votre site, quelque soit la page partagée. Pour cela, utilisez la balise og:url en renseignant l'URL exacte de cette page. Il s'agit d'une balise très utile, par exemple, quand on veut faire en sorte que les visiteurs arrivent sur une page spécifique du site quand ils proviennent des réseaux sociaux.
Voici sa forme :
<meta property=”og:url” content=”Votre URL” />
Les autres balises Open Graph
Au-delà de ces 5 balises Open Graph qui sont les plus couramment utilisées, il existe de nombreuses autres balises, plus pointues et spécifiques. Citons par exemple la balise og:video, qui permet de partager une vidéo dans l'aperçu, ou encore og:locale, qui précise la langue du site. Facebook en propose une liste complète ici. Dans un prochain article, je vous apprendrai comment utiliser ces balises "avancées".
Vérifier que vous avez bien paramétré vos balises
Une fois que vous avez paramétré les balises Open Graph dans le <head> de votre site, il vous faut vous assurer qu'elles fonctionnent bien. Pour cela, la majorité des réseaux sociaux proposent des outils permettant de vérifier le résultat en toute sérénité, le plus utile étant celui de Facebook, qui propose un debugger qui permet de vérifier le rendu des balises sur Facebook et donne des conseils en cas d'erreur. LinkedIn dispose aussi de LinkedIn Post Inspector, que vous pourrez trouver ici.
Le cas Twitter
Officiellement, Twitter affirme supporter le protocole Open Graph. Dans les faits, c'est bien plus compliqué, et il arrive fréquemment que Twitter ne reconnaisse pas les balises Open Graph d'un site ou d'un article. La solution à ce problème ? Utiliser les Twittter Cards, protocole ressemblant comme deux gouttes d'eau à Open Graph, mais spécifique à Twitter.
Cela fera l'objet d'un très prochain article !
[Edit] : L'article sur les Twitter Cards est en ligne. Découvrez comment configurer vos balises Twitter Cards sans attendre !
Commentaires