Open Graph, soigner l’aperçu de vos liens partagés

On commence par le mécanisme, parce qu’il explique tous les ratés qui suivent.

Quand vous collez une adresse dans un message ou une publication, la plateforme ne devine rien du tout. Elle envoie un robot sur votre page, lit l’en-tête du document, y cherche des instructions, et fabrique l’aperçu avec ce qu’elle trouve. Si elle ne trouve rien, elle prend ce qui traîne.

Ces instructions s’appellent le protocole Open Graph. Facebook l’a créé en 2010 pour standardiser ces aperçus, et presque toutes les plateformes l’ont adopté depuis, y compris celles qui n’ont rien à voir avec Facebook. LinkedIn, WhatsApp, Slack, Discord, les messageries de téléphone, toutes lisent les mêmes balises.

Retenez ça, ça change tout. C’est vous qui décidez de ce qui s’affiche, pas la plateforme. Si votre lien ressort moche, c’est que votre page s’est tue, et le robot s’est débrouillé avec les moyens du bord, en général la première image venue et le titre de l’onglet.

Une conséquence pratique. Ces réglages se posent page par page. Votre page d’accueil et un article de votre blog ne doivent pas afficher la même chose.

Elles vivent dans l’en-tête de la page, la zone que le visiteur ne voit jamais. 4 suffisent pour que l’aperçu fonctionne. On ne va pas y passer 3 plombes.

• Le titre. Celui qui s’affichera en gras dans l’aperçu. Il n’est pas obligé d’être identique au titre de votre page, et c’est même souvent mieux qu’il soit plus court et plus direct.
• Le type. Ce que représente la page. website pour une page ordinaire, article pour un billet de blog. Cela paraît anecdotique, mais certaines plateformes s’en servent pour choisir la mise en forme.
• L’image. L’adresse complète du visuel à afficher. C’est le point qui rate le plus souvent, et il a droit à l’étape suivante.
• L’adresse de la page. L’adresse officielle, celle que la plateforme doit retenir même si le lien collé comportait des paramètres de suivi.

Ajoutez-y immédiatement la description, techniquement facultative mais décisive en pratique. C’est la phrase sous le titre, celle qui décide si on clique. 2 à 4 phrases suffisent.

2 règles absolues sur la forme, et elles ne se négocient pas. Toujours des adresses complètes, qui commencent par https, jamais des chemins relatifs, sinon le robot repart les mains vides. Et un titre sous 60 caractères, au-delà il est coupé.

Sur un site développé sur mesure, ces balises se posent dans le code plutôt que dans une extension. Notre article sur l’Open Graph en Next.js montre comment les générer, y compris une image différente pour chaque article.

C’est l’étape qui règle 80% des aperçus ratés. Et une seule taille fonctionne partout.

1200 pixels de large sur 630 de haut. Ce format, dans un rapport de 1,91 pour 1, s’affiche correctement sur Facebook, LinkedIn, X, WhatsApp, Slack, Discord et les messageries de téléphone. LinkedIn recommande officiellement 627 pixels de haut, l’écart est sans conséquence.

Les autres contraintes à respecter.

• Le poids. Visez moins de 1 méga-octet. WhatsApp compresse fortement au-delà de 300 kilo-octets, et votre image devient floue sans que rien ne vous prévienne.
• Le format de fichier. JPEG ou PNG, rien d’exotique.
• La zone de sécurité. Gardez le texte et les visages dans les 1080 sur 600 pixels centraux. Chaque plateforme recadre à sa façon, et ce qui dépasse peut disparaître.

L’erreur de conception qu’on voit partout. Un visuel bourré de texte fin devient illisible dans une vignette de messagerie. 1 ou 2 mots en gros caractères valent mieux qu’une phrase entière que personne ne lira.

Et prévoyez une image par défaut pour tout le site. Les pages qui n’ont pas la leur afficheront celle-là. Toujours mieux qu’un aperçu vide.

Une subtilité que presque aucun guide ne mentionne, et qui se voit à l’écran.

Vous pouvez indiquer la largeur et la hauteur de votre image dans 2 balises dédiées. Sans elles, la plateforme doit télécharger l’image avant de savoir quelle place lui réserver, ce qui produit un aperçu qui s’affiche en 2 temps, parfois cassé au premier passage.

Avec elles, la place est réservée immédiatement et l’aperçu apparaît d’un bloc.

⚠ Le piège se cache ici. Ces valeurs doivent correspondre à la taille réelle du fichier. Déclarer 630 pixels de haut sur une image qui en fait 670 revient à mentir à la plateforme, et l’aperçu se déforme ou se recadre mal.

Comment le vérifier sans outil. Ouvrez le fichier image sur votre ordinateur et lisez ses propriétés. Si le site a été refait ou si les visuels ont été recadrés depuis leur mise en ligne, refaites ce contrôle. L’écart s’installe en silence, et personne ne vous préviendra.

Pendant que vous y êtes, renseignez aussi le texte alternatif de l’image. Il sert aux personnes qui utilisent un lecteur d’écran, et il ne coûte qu’une ligne.

Voilà la source de frustration numéro 1, et elle fait perdre des heures à des gens très compétents.

Vous corrigez votre image, vous recollez le lien, et l’ancienne version s’affiche encore. Vous en concluez que la correction n’a pas marché. C’est faux. Elle a très bien marché.

Les plateformes gardent en mémoire ce qu’elles ont lu la première fois. Elles ne reviennent pas lire votre page à chaque partage, ce serait insoutenable pour leurs serveurs. Cette mémoire peut durer plusieurs jours.

La solution, forcer le rafraîchissement. Chaque plateforme majeure propose un outil qui relit votre page à la demande et remplace sa version en mémoire.

3 réflexes qui font gagner du temps.

• Testez avant de partager, pas après. Une fois qu’un mauvais aperçu est en mémoire, vous perdrez plus de temps à le corriger qu’à l’avoir vérifié.
• Rafraîchissez sur chaque plateforme, elles ne partagent pas leur mémoire.
• Méfiez-vous de votre propre navigateur, qui garde lui aussi une copie. Un aperçu peut être correct pour tout le monde sauf pour vous.

Attention ici, une bonne partie des tutoriels en ligne vous envoient sur des outils morts.

Le validateur officiel de X a été abandonné en 2022 et n’a jamais été remplacé. Les guides qui vous y envoient encore n’ont pas été relus depuis 4 ans.

Ce qui fonctionne aujourd’hui.

• L’outil de débogage de Facebook, qui reste la référence. Il montre l’aperçu, liste les balises trouvées, signale les manques et permet de forcer le rafraîchissement.
• L’inspecteur de publications de LinkedIn, qui fait la même chose pour cette plateforme, rafraîchissement compris.
• Un vérificateur indépendant, qui affiche d’un coup le rendu sur plusieurs plateformes. C’est le plus pratique pour un contrôle rapide avant publication.

La bonne méthode, en 2 minutes. Collez l’adresse de votre page dans l’un de ces outils, regardez le rendu, corrigez si nécessaire, relancez. Faites-le sur votre page d’accueil, sur une page de service et sur un article, ces 3 gabarits couvrent en général tout le site.

Une vérification à part, votre page peut très bien afficher un aperçu correct sur Facebook et rien du tout dans une messagerie. Testez au moins une fois en vous envoyant le lien à vous-même.

Le format unique passe partout. Restent 4 différences qui valent le coup d’être connues.

• X. Ses propres balises permettent de choisir entre une petite vignette carrée et une grande image en bandeau. La grande version est presque toujours préférable. Elles ne sont plus indispensables, X sait lire les balises classiques, mais elles restent le seul moyen de choisir le format.
• LinkedIn. Il applique les balises standard sans particularité, mais sa mémoire est tenace. Passez systématiquement par son inspecteur après une correction.
• WhatsApp et les messageries. Elles compressent beaucoup. C’est là que le poids du fichier compte le plus.
• Slack et Discord. Ils affichent souvent la description en entier, ce qui récompense une phrase bien écrite.

Un mot sur la langue et le nom du site. Deux balises permettent d’indiquer la langue de la page et le nom de votre entreprise, ce dernier s’affichant au-dessus du titre sur plusieurs plateformes. Ce sont 2 lignes qui donnent un air soigné à l’ensemble.

Terminons par la question qui fâche, et soyons cash.

Ces balises ne sont pas un critère de classement. Google ne remonte pas une page parce qu’elle a un joli aperçu. Les guides qui vous promettent un gain de position direct racontent n’importe quoi, et souvent en connaissance de cause.

L’effet existe, mais il est indirect, et il passe par 3 chemins.

• Le taux de clic. Un lien avec une image et une phrase claire est nettement plus cliqué qu’une ligne de texte nue. Sur une publication partagée 200 fois, l’écart se compte en visites.
• Le partage lui-même. Les gens partagent plus volontiers un lien qui aura l’air soigné chez eux. Un aperçu cassé freine la recommandation.
• La crédibilité. Un lien sans image, avec un titre technique, ressemble à un lien douteux. Pour une entreprise qui vend de la confiance, c’est un détail qui n’en est pas un.

Le calcul est vite fait. Ces réglages se posent une fois et servent des années, sur chaque lien partagé par vous, par vos clients et par vos partenaires. Peu de choses en référencement rapportent autant pour aussi peu d’effort.

Un dernier conseil de méthode. Mettez ce contrôle dans votre routine de mise en ligne, au même titre que la relecture. Une page publiée sans aperçu vérifié, c’est une page qui sera mal partagée pendant toute sa vie. Allez, au boulot.