Problème d’affichage d’un lien dans une publication Facebook : que faire ?


Quand un contenu est partagé sur Facebook, il peut arriver que le lien dans la publication ne s’affiche pas correctement ou soit bloqué.

Dans cet article, je vais vous donner quelques solutions à tester si vous rencontrez un problème de partage Facebook.

Bien afficher un lien dans une publication Facebook avec Open Graph

Comment Facebook sait-il quel lien afficher dans une publication ? Quelle description ? C’est assez simple en réalité : le réseau social s’appuie sur le code de la page web.

Comme Google et autres sites, Facebook analyse le contenu de la page et essaie de détecter la présence des éléments dont il a besoin : une image, une description, un titre… Pour orienter le réseau social vers les éléments qui vous intéressent, il existe un type de code spécifique à utiliser : les balises Open Graph.

Réseaux sociaux

Qu’est-ce qu’Open Graph ?

Open Graph, ce sont tout simplement des bouts de code reconnaissables par Facebook et par d’autres réseaux sociaux, placés dans l’en-tête d’une page (« head »), qui vont mettre en avant certains éléments clés de la page afin de contrôler la manière dont un lien s’affiche quand il est partagé.

On distingue des balises Open Graph obligatoires et des balises Open Graph facultatives. Ainsi, chaque page de votre site doit obligatoirement contenir au minimum les balises :

  • og:url : c’est l’URL de la page sans aucun paramètre ou spécificité. Elle servira de base à Facebook pour compter toutes les mentions J’aime et les partages rattachés à cette URL. Par exemple, si vous utilisez le format AMP sur mobile, l’URL indiquée ici doit être celle de la version desktop de la page et pas monblog.fr/mon-article/amp/. Si votre URL comporte des paramètres (exemple : monblog.fr/mon-article?origine=header), l’og:url doit être simplement monblog.fr/mon-article.
  • og:title : c’est le titre de l’article (et s’il s’agit d’une page interne, sans le nom de votre site ou de votre marque).
  • og:description : c’est la courte description de 2-3 lignes qui s’affichera sous le titre du lien quand il sera partagé. Elle doit donner envie de cliquer pour aller sur le site.
  • og:image : c’est l’image associée à l’URL, que Facebook mettra en avant lors du partage.

En plus de ces balises obligatoires, il existe des balises Open Graph facultatives, pour indiquer la langue du site par exemple (notamment quand une même page est disponible en plusieurs langues) ou pour indiquer le type de contenu et aider ainsi le réseau social à l’afficher correctement dans le flux Facebook.

Par défaut, Facebook considère que le type de contenu (og:type) est « website », c’est-à-dire un site web. Il existe d’autres types de contenu (chanson, album, playlist, station de radio, film vidéo, épisode vidéo, émission vidéo, livre, etc).

Dans le cas d’un blog, l’indication og:type de type « website » fonctionne très bien pour afficher correctement son contenu.

Lien optimisé dans une publication Facebook
Lien optimisé dans une publication Facebook

En l’absence de balises Open Graph

Que se passe-t-il si votre site ne comporte pas ce type de balise, ou que leur contenu n’est pas renseigné ? Facebook va tout simplement essayer de « deviner » ce qu’il peut utiliser sur la page : la meta description par exemple pour remplacer la description, ou alors le premier paragraphe de contenu du site ; le titre de l’article ; une image qui possède une taille suffisante…

Et ça donne un affichage pas toujours très heureux, comme ici sur le site d’une compagnie de bus (très sérieuse, du reste !) en Pologne :

Lien non optimisé sur Facebook
Lien non optimisé sur Facebook

Comment ajouter des balises Open Graph ?

Pour savoir si votre site comporte par défaut ce type de balise Open Graph, parfois ajoutées aux thèmes lors de leur création, il suffit d’ouvrir le code source de l’un de vos articles en faisant le raccourci Ctrl+U dans votre navigateur depuis la page de l’article en question.

Le code de l’article s’affiche : faites une recherche sur la page de ce petit bout de code : og:

Si vous possédez des balises Open Graph, vous devriez détecter a minima un « og:title », « og:url », « og:description ». Voici à quoi ça ressemble sur mon blog :

Balises Open Graph
Balises Open Graph

Si vous constatez que votre site ne possède pas les balises Open Graph, elles peuvent être ajoutées dans le header du thème.

Sur la plateforme Blogger (Blogspot), il faut modifier le code HTML de votre blog (menu Thème > Modifier le code HTML). Recherchez dans le code la ligne et juste avant, copiez ceci :

<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>

Sur WordPress, les balises Open Graph peuvent être ajoutées via un plugin comme Yoast SEO (que je vous recommande d’utiliser aussi pour vous faciliter le travail de référencement de votre blog) ou via un plugin dédié comme Open Graph and Twitter Card Tags, qui est lui aussi gratuit.

Vous pouvez aussi modifier le code de votre thème (modification que je vous conseille de faire sur un thème enfant et non directement dans le thème du blog, afin que la personnalisation ne soit pas effacée si le thème est mis à jour). Je vous renvoie à ce tutoriel pour trouver le code adéquat à insérer dans le fichier functions.php.

Tester l’affichage d’un lien dans une publication Facebook

Si vous avez bien mis en place Open Graph ou tout simplement que vous voulez comprendre un peu mieux pourquoi Facebook n’affiche pas correctement le lien d’une publication, il existe un outil essentiel pour vous aider : l’outil de débug du partage Facebook.

Outil de debug du partage Facebook
Outil de debug du partage Facebook

Il suffit de rentrer l’URL de la page qui vous pose problème, et Facebook va vous dire ce qu’il détecte exactement dessus, comment il comprend votre page et l’interprète pour l’afficher lors d’un partage.

Le debug du partage Facebook
Le debug du partage Facebook

Si je reprends l’exemple du site polonais, Facebook détecte que l’URL a été partagée, aimée ou commentée 311 fois, l’a visitée pour la dernière fois le 8 septembre. Il explique aussi quelles balises Open Graph il a pu construire à partir de « balises brutes » (c’est-à-dire à partir de ce qu’il a pu piocher dans le code de la page !). Et en l’occurence, il n’a pas trouvé d’image donc n’en affiche pas !

C’est en utilisant cet outil de débug du partage Facebook que vous pouvez comprendre pourquoi, par exemple, le réseau social n’affiche pas la photo de votre choix lorsque vous partagez un lien sur une publication Facebook. C’est peut-être parce qu’il détecte une autre photo à la place !

Si Facebook détecte un problème, il vous affiche une alerte en haut de page, juste sous l’URL que vous avez entrée, en indiquant les propriétés manquantes.

Alerte en cas de propriété Open Graph manquante
Alerte en cas de propriété Open Graph manquante

Si une URL n’a jamais été partagée sur Facebook pour l’instant, cliquez sur « Obtenir de nouvelles informations » pour accéder au débug du partage.

URL jamais partagée sur Facebook
URL jamais partagée sur Facebook

A savoir sur l’affichage d’un lien dans une publication Facebook

Pour qu’un lien s’affiche correctement, en-dehors des balises Open Graph à indiquer, il faut aussi savoir que l’image doit respecter certaines propriétés pour apparaître sur Facebook.

Vous devez par exemple éviter d’utiliser une image générique qui s’affiche à l’identique pour toutes les URLs de votre site. Autrement dit, le paramètre « og:image » d’Open Graph doit être dynamique, changer à chaque article, au lieu d’être une image fixe.

Ensuite, Facebook indique de faire en sorte que l’image Open Graph fasse au moins 600 pixels, idéalement au moins 1080 pixels afin que l’image ait une bonne résolution sur toutes les tailles d’écran lors du partage d’un lien dans une publication Facebook.

Et si Facebook n’a pas les bonnes informations sur votre lien ?

Il peut arriver que vous ayez fait une erreur lors de la publication d’un article : une malencontreuse faute d’orthographe dans le titre, un oubli de l’image… Si votre URL a déjà été partagée sur Facebook, vous souhaitez peut-être rectifier ces informations que Facebook garde en mémoire.

Cette « mise en mémoire », que l’on appelle le « cache », dure 30 jours sur Facebook. Autrement dit, quand une URL est partagée pour la première fois, Facebook va garder en mémoire toutes les informations qui la concernent pendant un mois, avant d’aller vérifier si la page a subi des modifications.

Il suffit d’entrer l’URL de l’article sur l’outil de débug du partage Facebook et de cliquer sur le bouton « Re-collecter » qui s’affiche, afin de réactualiser les données de l’article.

Re-collecter les données Open Graph sur Facebook
Re-collecter les données Open Graph sur Facebook

Si, malgré ce bouton, le lien de la publication Facebook ne s’affiche toujours pas correctement, voici ce que vous pouvez essayer :

  • Vérifiez que vous n’avez pas plusieurs plugins différents qui insèrent des balises Open Graph dans le code de vos pages, car elles pourraient comporter des informations contradictoires : mettez-vous sur l’un de vos articles et affichez le code source à l’aide du raccourci Ctrl + U, puis cherchez si vous rencontrez plusieurs fois og:title par exemple.
  • Vérifiez que votre lien dans la balise og:url est un lien absolu, c’est-à-dire qui comporte toute l’adresse de votre site. Par exemple, https://www.notuxedo.com/contact/ est un lien absolu, alors que /contact/ serait un lien relatif. Les liens relatifs ne fonctionnent pas correctement lors du partage Facebook.
  • Vérifiez que l’image n’enfreint pas les règles de publication de Facebook.

Il peut enfin arriver que le partage d’un lien dans une publication Facebook soit impossible car votre site est bloqué sur ce réseau social. Dans ce cas, vous obtenez ce type de message :

« Nous ne pouvons pas examiner ce site web car le contenu ne correspond pas à nos Standards de la communauté. Si vous pensez que c’est une erreur, veuillez nous en informer ».

Erreur lors du partage Facebook
Erreur lors du partage Facebook

Vous pouvez tenter de cliquer sur « veuillez nous en informer » pour faire un signalement à Facebook, et inciter votre communauté à faire de même. Si vous utilisez une plateforme gratuite (WordPress.com, Blogger), vous pouvez aussi essayer de contacter le support de votre plateforme – sait-on jamais, des fois que leur intervention aurait plus de poids.

Parfois, c’est la conséquence de pratiques assimilées à du spam (ex : vous avez fait la promotion de votre blog en copiant-collant le même message dans plein de groupes différents sur une durée limitée)… mais parfois, ça survient de manière totalement inattendue ce qui rend la résolution de problème plus compliquée !

J’espère que cet article vous aidera si vous rencontrez un problème de partage Facebook. Ça semble assez fréquent si j’en crois vos questions régulières à ce sujet !


Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.