Problème d'image d'aperçu de lien sur LinkedIn | Facebook | X

Vous souhaitez partager un lien sur LinkedIn ou Facebook et vous constatez un problème d'image d'aperçu. Ou bien, vous avez modifié l'image de la publication sur votre site et un ancien post affiche une version obsolète de l'image ou pas d'image du tout.

Il peut y avoir plusieurs raisons qui expliquent ce problème :

• Les balises Open Graph (OG) sont absentes ou mal renseignées.
• L'image n'a pas les paramètres requis pour le partage sur le réseau social.
• L'URL contient des espaces.
• Le cache de votre site ou de votre CDN n'a pas été vidé.

Mais la cause la plus fréquente est que le lien a déjà été partagé sur le réseau social et que ses données de prévisualisation ont été mises en cache par celui-ci. De ce fait, LinkedIn, Facebook ou X (ex Twitter) affiche la version mise en cache du lien et non pas sa dernière version.

Rassurez-vous, afin de résoudre ce problème d'aperçu de lien lors du partage, il est possible de forcer ces réseaux sociaux à vider leur cache.

Dans cet article, je vous explique donc comment déboguer vos images d'aperçu sur LinkedIn ou Facebook et en bonus sur X (ex Twitter).

Prérequis pour que l'image d'aperçu des liens soit correctement générée par les réseaux sociaux

Les balises Open Graph

Tout d'abord, il faut savoir que lorsque vous partagez une publication sur un réseau social, celui-ci se base sur les balises Open Graph présentes dans l'article pour son affichage.

Alors, évidemment, si elles ne sont pas présentes ou mal renseignées, l'image d'aperçu du lien ne s'affichera pas.

Les balises Open Graph essentielles pour afficher l'aperçu d'un lien lors d'un partage sont :

<meta property="og:title" content="Titre de l'article" />
<meta property="og:image" content="//media.example.com/ 1234567.jpg" />
<meta property="og:description" content="Description qui s'affichera dans l'aperçu" />
<meta property="og:url" content="//www.example.com/URL de l'article" />

💡​ WordPress ne gère pas les balises Open Graph (OG) en natif. Vous devez donc les inclure manuellement dans l'en-tête du code de votre site ou utiliser une extension pour le faire. Le plus simple est d'utiliser une extension SEO telle que Yoast SEO ou autre qui les ajoute automatiquement.

Cas particulier des balises Twitter Cards

X (Twitter) possède un type particulier de balises : les Twitter Cards. Elles ressemblent aux balises Open Graph et suivent les mêmes conventions que le protocole Open Graph. Il en existe beaucoup, voici les principales :

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@lecompteTwitterdevotresite" />
<meta name="twitter:title" content="Le titre de votre site" />
<meta name="twitter:description" content="La description de votre site" />
<meta name="twitter:image" content="URL de l'image à afficher" />

D'après la doc d'X, si vous utilisez déjà le protocole Open Graph, alors il n'est pas nécessaire d'ajouter en sus les balises de Twitter. En effet, lorsque le Twitterbot recherche les balises sur une page, il vérifie d'abord si la propriété spécifique à Twitter est présente. Mais, si elle ne l'est pas, il prend en compte les balises Open Graph pour le titre, la description et l'image.

Mais bon, je vous conseille de les ajouter quand même afin de ne pas avoir de surprise.

💡​ Tout comme pour les balises Open Graph (OG), WordPress ne gère pas non plus les Twitter Cards en natif. Pensez à utiliser une extension SEO telle que Yoast SEO ou autre pour les ajouter automatiquement.

La taille des images sur les réseaux sociaux

Lors du partage d'un lien sur un réseau social, il y a également des prérequis pour que l'image s'affiche de manière optimale.

Outre que le nom du fichier image ne doit pas contenir d'espaces, ses dimensions doivent être correctes.

Attention, chaque réseau social a ses propres formats !

Par exemple, pour LinkedIn, la dimension de l'image recommandée pour un lien partagé est d'au moins 1200 (largeur) x 627 (hauteur) pixels avec un ratio de 1,91:1. De plus, l’image doit avoir une largeur minimum de 200 px. En effet, si l’image fait moins de 200 px de largeur, LinkedIn va la retravailler et l'affichera sous forme de vignette sur le côté gauche de votre post.

Pour Facebook, les prérequis de l'image sont à peu près identiques à ceux de LinkedIn. La dimension de l'image recommandée pour un lien partagé est d'au moins 1200 (largeur) x 630 (hauteur) pixels avec un ratio de 1,91:1. De plus, l’image doit avoir une résolution minimale de 200 x 200 pixels. Il est à noter également que les images inférieures à 600 x 315 pixels, mais supérieures à 200 x 200 pixels s’affichent sous la forme d’une petite image carrée.

Pour X (ex Twitter), il n'y a pas de taille d'image recommandée. Elle doit juste avoir un ratio de 2:1, des dimensions minimales de 300 x 157 ou maximales de 4 096 x 4 096 pixels.

Bon, après, il ne s'agit que de tailles recommandées. Si la taille de vos images s'en approche, il suffit juste de vérifier si elles s'affichent correctement sur les réseaux sociaux.

Résoudre le problème d'image d'aperçu d'un lien sur LinkedIn

Si le problème d'image d'aperçu du lien partagé n'est présent que sur LinkedIn, alors utilisez son outil dédié Post Inspector. Grâce à celui-ci, vous pouvez prévisualiser de quelle façon votre lien sera partagé sur LinkedIn. Il vous servira aussi à identifier les données manquantes et à actualiser le cache de LinkedIn concernant votre page.

Pour exemple, voici un post que j'avais fait sur LinkedIn. Dans celui-ci, je partageais le lien de mon article qui explique comment ajouter une icône aux liens externes dans WordPress. Lorsque je l'ai publié tout était bon. Sauf que depuis j'ai modifié l'image en avant de l'article.

Et paf ! Plus aucune image d'aperçu n'apparait ! 😦​

Pour résoudre le problème d'image d'aperçu manquante, je me suis donc servie de Post Inspector.

L'outil est simple d'utilisation : indiquez l'URL concernée puis cliquez sur Inspect.

LinkedIn Post Inspector récupère alors les données Open Graph de l'URL. Puis, il montre l'aperçu du lien lors du partage ainsi que les données qu'il a recueillies ou celles qui sont manquantes :

• Quand les données du lien ont été extraites pour la dernière fois (last scraped)
• L'URL récupérée et l'URL canonique (fetched URL et canonical URL)
• La redirection 301 de l'URL s'il y en a une et le code de statut de réponse (URL redirect trail)
• Les métadonnées collectées pour la page : titre, type, image, description, auteur, date de publication (title, type, image, description, author, published date)

Si la bonne image d'aperçu apparait, retournez alors sur votre post sur LinkedIn et rechargez la page.

Et là, vous verrez que l'image d'aperçu a bien été réactualisée. 🎯

Si l'image d'aperçu n'est pas la bonne comme c'est le cas pour mon article, une alternative à reCAPTCHA conforme au RGPD. Alors, allez sur votre site. Puis, videz son cache et éventuellement le cache de votre CDN. Enfin, recommencez la procédure.

Résoudre le problème d'image d'aperçu sur Facebook

Facebook a également un outil dédié pour résoudre le problème d'image d'aperçu des liens. Il s'agit du programme de débug du partage.

Sur la même page, vous trouverez par ailleurs l’outil d’invalidation par lots. Celui-ci peut s'avérer utile pour réactualiser les informations de plusieurs URL en même temps.

Pour l'utiliser, saisissez l'URL du lien qui pose un problème ou dont vous souhaitez afficher l'aperçu avant de le partager. Puis, cliquez sur "Débuguer".

Facebook vous donne alors de multiples informations sur ce qu'il a collecté comme :

• La date de dernière analyse
• Le code de réponse
• L'URL canonique avec le nombre de mentions j’aime, de partages et de commentaires
• L'aperçu du lien
• Les propriétés des balises Open Graph og:url, og:type, og:title, og:description, og:image et og:image:alt,…

Ensuite, selon que le lien a déjà été partagé ou pas, cliquez sur le bouton approprié.

Premièrement, si votre lien n'a pas encore été partagé sur Facebook, comme le lien de mon article pour héberger localement Google Analytics, vous en aurez l'indication. En ce cas, cliquez sur "Obtenir de nouvelles informations".

Deuxièmement, si le lien a déjà été partagé, cliquez sur le bouton "Re-collecter".

Idem, si comme moi, vous avez migré votre site après avoir partagé un lien sur Facebook. Facebook ne le sait pas et affiche un aperçu obsolète. Mais comme vous avez correctement fait les choses et instauré une redirection 301 de l'ancienne URL vers la nouvelle. Cette fois-ci, indiquez l'ancienne URL et cliquez sur le bouton "Re-collecter".

Dans les données mises à jour, vous constaterez que Facebook a bien trouvé la redirection, la nouvelle URL et les nouvelles balises méta. 🎯

💡Si ça ne fonctionne pas, cliquez de nouveau sur "Re-collecter" jusqu’à ce que la nouvelle image s'affiche.

Pour finir, dans tous les cas, il vous faut faire une ultime manipulation. En effet, si vous avez partagé un lien et mis à jour l’image, le partage initial continuera d’afficher l’ancienne. Eh oui, c'est ballot, mais le programme de débug de partage de Facebook ne rafraîchit pas automatiquement les publications. 😒​

Alors, pour actualiser l’image du lien, accédez à votre publication.
Puis, cliquez sur les points de suspension en haut à droite et sélectionnez "Actualiser la pièce jointe à partager". Une nouvelle fenêtre s'affichera et là, cliquez sur "Enregistrer".

Résoudre le problème d'image d'aperçu sur X (Twitter)

X (ex Twitter) possède également un outil dédié pour vider son cache lorsque l'image d'aperçu du lien déjà partagé n'est pas la bonne. Il s'agit du Card validator. Mais attention, avec cet outil, vous ne pouvez pas prévisualiser l'aperçu de votre lien. En effet, cette fonctionnalité a été retirée en août 2022 au profit du Tweet Composer.

Twitter Card validator reste néanmoins utile à des fins de test de reconnaissance des cards. D'autre part, et c'est la fonction qui est intéressante ici, il sert à demander à Twitter de revisiter votre site afin d'actualiser les données mises en cache.

Pour l'utiliser, indiquez simplement l'URL, puis cliquez sur "Preview Card". X(ex Twitter) indiquera alors les données qu'il a collectées :

• Si la page a été récupérée avec succès ou pas
• Le nombre de balises méta trouvées
• Si la twitter:card a été trouvée
• Si la card a été chargée avec succès ou pas

Ensuite, retournez sur le tweet qui pose un problème et réactualisez la page.

Voici, par exemple, un tweet de quelqu'un ayant partagé un de mes articles. Comme vous pouvez le constater, l'image n'apparassait pas. Le passage par Card Validator et le rafraichissement de la page a résolu le problème.

Le partage de liens sur les réseaux sociaux

Le partage de liens sur les réseaux sociaux contribue à l'optimisation de votre visibilité sur le Web. Cela s'appelle le SMO (Social Media Optimization).

Pour ma part, je n'aime pas les réseaux sociaux. Par conséquent, je ne partage mes articles que sur LinkedIn et encore même pas tous. Je sais, ce n'est pas bien... 🥺​

Cependant, e mets à votre disposition des boutons de partage via Scriptless Social Sharing, une extension légère et respectueuse du RGPD. 😉 Bref, je compte sur vous qui avez des comptes sur les divers réseaux sociaux pour partager les articles de ce blog que vous trouvez intéressants.

À bientôt et bons partages sur LinkedIn, Facebook et consorts.