ProblĂšme d’image d’aperçu de lien sur LinkedIn | Facebook | X

ProblĂšme d’image d’aperçu de lien sur LinkedIn | Facebook | X
14 mn de lecture

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 ! 😩​

ProblÚme image d'aperçu disparue sur LinkedIn

Pour rĂ©soudre le problĂšme d’image d’aperçu manquante, je me suis donc servie de Post Inspector.

Post Inspector l'outil de debug de partage de LinkedIn

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)
Résolution du problÚme d'image d'aperçu avec Post Inspector de LinkedIn

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. 🎯

RĂ©solution du problĂšme d’image d’aperçu LinkedIn

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.

LinkedIn affiche la mauvaise image d'aperçu

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.

Programme de débug du partage pour résoudre le problÚme d'image d'aperçu sur Facebook

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”.

Prévisualiser l'image d'aperçu d'un lien pas encore partagé sur Facebook
Debug d'image d'aperçu d'un lien jamais partagé sur Facebook

DeuxiĂšmement, si le lien a dĂ©jĂ  Ă©tĂ© partagĂ©, cliquez sur le bouton “Re-collecter”.

Re-collecter les données d'un lien déjà partagé sur Facebook

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”.

Recollecter données lien partagé aprÚs redirection sur Facebook

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

Débug image d'aperçu Facebook pour une redirection

💡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”.

Actualiser les données de la publication Facebook

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
Twitter card validator

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.

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

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.

Soumettre un commentaire 💬

guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires