Open Graph : soigner l'aperçu de vos liens partagés

Un client vous recommande dans un groupe WhatsApp et colle le lien de votre site. Dans la conversation apparaît une vignette grise, sans image, avec pour titre « Accueil » et un bout de mention légale en guise de texte. Le lien est le bon. La présentation, beaucoup moins.

Ce qui manque, ce sont les balises Open Graph.

D’où vient le protocole

Open Graph a été lancé par Facebook en 2010 pour que n’importe quelle page web puisse décrire sa propre présentation lorsqu’on la partage. Le protocole est documenté publiquement sur ogp.me, et il a été adopté bien au-delà de Facebook : LinkedIn, les messageries comme WhatsApp ou Signal, Slack, Discord et beaucoup d’autres le lisent.

Concrètement, ce sont des balises <meta> placées dans l’en-tête de la page, invisibles pour le visiteur.

Les quatre balises de base

Le protocole définit quatre propriétés requises pour chaque page :

<meta property="og:title" content="Rénovation de salle de bains à Pau">
<meta property="og:type" content="website">
<meta property="og:image" content="https://exemple.fr/images/salle-de-bains.jpg">
<meta property="og:url" content="https://exemple.fr/salle-de-bains/">

Le titre peut être un peu plus parlant que la balise title, puisqu’il n’a pas à porter le nom du site. Le type vaut website pour la plupart des pages et article pour un article de blog. L’image doit être une adresse complète, commençant par https. L’URL est l’adresse de référence de la page.

À ces quatre-là s’ajoutent deux propriétés facultatives presque toujours utiles : og:description, une phrase qui apparaît sous le titre, et og:site_name, le nom de votre site.

L’image, le point qui coince le plus souvent

C’est l’élément le plus visible de la vignette, et le plus souvent raté. Une image trop petite, au mauvais format ou trop lourde est ignorée, et la plateforme affiche un carré gris ou une image prise au hasard dans la page.

Les plateformes publient leurs propres recommandations de taille, qui changent avec le temps. Une image horizontale d’environ 1 200 pixels de large sur 630 de haut est acceptée par la plupart d’entre elles ; gardez le texte et le logo au centre, car certaines recadrent l’image en carré. Évitez de mettre l’essentiel du message dans l’image : sur un petit écran, il sera illisible.

Servez enfin cette image depuis votre propre site, à une adresse publique en https. Une image rangée derrière une connexion, ou sur un service qui refuse les robots, ne sera pas récupérée par la plateforme, et la vignette restera vide.

Sur WordPress, les extensions de référencement remplissent ces balises à partir de l’image mise en avant. Sur Wix ou Shopify, cherchez dans les réglages de la page un onglet « Réseaux sociaux » ou « Partage ».

Et la balise Twitter ?

X, l’ancien Twitter, utilise ses propres balises twitter:card, mais se rabat sur Open Graph quand elles manquent. Ajouter <meta name="twitter:card" content="summary_large_image"> suffit en général à obtenir une grande image.

Tester, puis vider le cache

Les plateformes gardent en mémoire l’aperçu d’un lien pendant un certain temps. Si vous corrigez vos balises après un premier partage, l’ancienne vignette peut continuer à s’afficher.

LinkedIn propose le Post Inspector : collez l’adresse, l’outil montre l’aperçu tel que LinkedIn le construit et va relire la page. Meta propose un outil de débogage du partage pour Facebook, qui affiche les balises lues, signale celles qui manquent et permet de demander une nouvelle lecture. Pour les messageries, le plus simple reste d’envoyer le lien à quelqu’un de confiance, ou à vous-même.

Le contrôle

Choisissez les trois pages que vous partagez le plus : l’accueil, votre page de prestation phare, votre dernier article. Pour chacune, copiez le code source dans notre lecteur de balises, qui indique combien des cinq propriétés principales sont présentes. Corrigez ce qui manque, puis passez chaque adresse dans le Post Inspector de LinkedIn. La page LinkedIn de votre entreprise affichera ensuite des liens propres quand vous les partagerez.