Quelle frustration lorsque vous venez de finaliser votre site sur lequel vous avez travaillé pendant des semaines, et qu'au moment de partager le lien sur les réseaux sociaux, rien ne s'affiche à part le titre du site, sans image, sans description...

C'est moche...

Mais comment faire pour rendre ça plus attractif, donner confiance aux gens et les inciter à partager ?

C'est ce que nous allons découvrir avec les balises OpenGraph !

Le principe

Lorsque  vous ajoutez un lien dans un post sur les réseaux sociaux, la plateforme en question va chercher dans son cache si il existe des informations sur ce lien.

Si ce lien n'a jamais été partagé, la plateforme va envoyer un robot parcourir le site en question afin de récupérer les informations manquantes et ainsi construire un joli "riche".

C'est dans les métadonnées de la page que tout va se jouer, carar ce serait  trop fastidieux pour le robot d'essayer de trouver dans le contenu de la page les éléments qui la décrive le mieux.

Son job à lui, c'est d'être fainéant et de récupérer seulement ce qu'on lui met à disposition, grâce à une convention appelée OpenGraph.

Qu'est-ce qu'OpenGraph

OpenGraph est un ensemble de balises de métadonnées utilisées pour augmenter la quantité d'informations connues à propos d'une page web, venant notamment agrémenter les balises <title> et <meta name="description"> contenus dans la spécification HTML.

Les principales balises

Il existes des dizaines de balises OpenGraph, mais si vous souhaitez simplement améliorer le rendu de vos liens sur les réseaux sociaux, il vous suffit d'ajouter les 4 balises ci-dessous :

<meta property="og:url" content="https://example.com"/>
<meta property="og:title" content="My example website"/>
<meta property="og:description" content="This is where [...]"/>
<meta property="og:image" content="https://example.com/static/img/cover.jpg"/>

Vous trouverez toute la documentation des balises disponibles sur : https://ogp.me/

Twitter

À noter que pour que le partage sur Twitter fonctionne de manière optimale, il existe des balises supplémentaires :

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@NicolasBrondin"/>
<meta name="twitter:creator" content="@NicolasBrondin"/>

La balise twitter:card étant la plus importante car elle indique sous quelle forme de carte le lien doit être publié.

Plus d'infos ici : https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards

Les pièges à éviter

• Si vous rencontrez des problèmes dans le rendu de vos liens, notamment sur LinkedIn, vérifiez bien que vos open-graph sont définies avec l'attribut "property" et non pas "name" comme la plupart des balises méta !
• Pensez à vérifier les tailles des images conseillées sur vos réseaux sociaux cibles, sous peine que cette dernière ne s'affiche pas
• L'url de l'image doit être une url absolue.

Tester vos urls

Si vous avez encore des problèmes avec l'affichage des métadonnées sur les réseaux sociaux, chaque plateforme propose un outil pour aider à la résolution des problèmes, ainsi que l'invalidation du cache pour l'url en question :

• Facebook : https://developers.facebook.com/tools/debug/
• Twitter : https://cards-dev.twitter.com/validator
• LinkedIn : https://www.linkedin.com/post-inspector/

En bonus

Si vous publiez vos sites sous Wordpress, je vous recommande le plugin Yoast SEO qui vous permettra de configurer facilement vos balises open-graph directement sur chaque page !

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi formateur/coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !

Photo by Austin Distel on Unsplash