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.
Dans cet article
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.
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 simplementmonblog.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.
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 :
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 :
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 </head> 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.
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.
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.
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.
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.
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".
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 !
Bonjour Marlène, je te remercie pour cet article ! Seulement, ça n’apporte pas de réponse à mon souci. Je bosse en tant que CM pour un groupe de presse et Facebook depuis deux semaines ne diffusent plus nos images sur nos posts. Voici le message d’erreur que nous avons, as-tu une idée de l’origine de ce souci ?
Voici le message d’erreur du debug (tout va côté opengraph) : « Domaine d’actualités restreint
OG fourni : URL d’image, échec du traitement de https://mesinfos.fr/content/articles/307/A187307/initial-charlotte-caubel.jpg en raison d’une restriction de licence pour un domaine d’actualités européen. Pour plus d’informations, rendez-vous sur https://www.facebook.com/help/533727544131571«
Bonjour, avez-vous fait la démarche d’autoriser Facebook à afficher des liens enrichis via ce formulaire ? Si ce n’est pas encore le cas, je commencerais par là :)
Je ne trouve mon problème nulle part ! Souvent quand je veux partager l’article d’un ami qu’il a tagué public sur une page que j’administre, le partage s’affiche (photo, texte) mais le bouton (ou la barre bleue) PUBLIER sous la publication n’existe pas ! Si je veux publier le même article sur mon profil, la barre bleu PUBLIER réapparait ! Le problème est que je ne veux pas publier sur mon mur perso mais sur une de mes pages . Comment faire ?
Bonjour Sofi, je n’ai malheureusement jamais rencontré ce problème. As-tu essayé depuis un autre navigateur, des fois que ce serait un problème d’affichage et non de paramétrage ?
Merci pour le réponse. mais ce n’est malheureusement pas cela. J’ai essayé avec d’autres navigateurs et même sur mon téléphone portable qui en a encore un autre. Cela ne fonctionne pas pour deux des 4 pages que j’administre. Pourquoi? C’est la page Feufliâzhe (https://www.facebook.com/sofifeufi) et celle Musique des Alpes (https://www.facebook.com/profile.php?id=100085945693657), 2 pages que j’ai créées. Alors que les 2 autres pages, dont je suis devenue administratrice par la suite, Reta (https://www.facebook.com/RETA.Irmande) et Pragati Népal (https://www.facebook.com/associationpragatinepal), elles, fonctionnent. Qu’est-ce que j’ai fait de faux ? Ma page perso fonctionne aussi. Merci beaucoup de bien vouloir se pencher dessus.A bientôt.
Bonjour Sofi, malheureusement je ne peux pas débuguer ce genre de problème de l’extérieur. Visiblement, la fonction Partage fonctionne sur les pages puisque je vois que sur Musique des Alpes tu as partagé des contenus tiers, tout comme sur Feufliâzhe. Ca laisse entendre que ce n’est pas un bug du partage lui-même… mais plutôt un bug lié au compte spécifique dont tu essaies de partager le contenu sans succès. Si c’était juste un bug du partage, tu ne pourrais pas non plus partager les contenus d’autres personnes.
Je peux en effet partager avec seulement la fonction « Partager maintenant » (il ne me propose rien d’autre) si je vois un article intéressant lorsque je suis avec mon profil Feufliâzhe. Avec mon profil perso, quand je vois un article publiable, c’est à dire avec l’icône monde, Facebook me propose tout, y compris « partager sur une page ». Alors je lui indique la page Feufliâzhe, il fait comme s’il allait publier, je peux même mettre un commentaire, mais sans la barre bleu en-dessous intitulée Partager ou Publier. C’est pourquoi il y a des publications qui sont partagées sur Feufliâzhe, mais c’est en contournant le problème, ce n’est pas spontané, cela met un temps fou car il faut que je change de profil, prendre celui du Feufliâzhe, et que je recherche sur quel ami j’ai trouvé la publication qui était arrivé dans mon fil d’actualité perso, que j’aille exprès sur son profil rechercher dans ses publications et faire « partager maintenant »… et cela ne fonctionne pas toujours même comme cela.
Je viens d’avoir une autre idée à creuser : est-ce que les pages qui posent problème sont sur le Business Manager Facebook ? Car parfois, quand on gère une page via Business Manager, on perd justement la capacité à faire certaines actions avec son profil perso. Dans la partie « Paramètres d’entreprise » puis Comptes > Pages de Business Manager, vérifie que les droits de ton compte perso sont bien les plus larges possibles. Sinon, je ne vois pas d’autre chose à tester, il faudrait peut-être demander sur un forum si quelqu’un a d’autres pistes.
Je ne trouve pas la partie Paramètres d’entreprise. Par contre il y a Meta buisness suite. Est-ce cela?
Non, la Meta Business Suite est différente du Business Manager. Je te laisse solliciter de l’aide sur un forum ou autre plateforme plus adaptée si toutefois tu ne trouves pas de solution, car la discussion devient hors sujet par rapport à ce dont traite l’article. Le but est que les commentaires puissent aider d’autres personnes confrontées au problème abordé dans le post, qui concernait l’apparence des liens ;)
OK merci.
Bonjour Marlène,
Merci pour cet article !
voici mon problème. J’ai posté mon site internet sur Facebook et ce dernier disparait systématiquement ; j’ai donc utilisé la fonction « Debug » tde Facebook, et j’ai une alerte nécessitant une action : « Propriétés manquantes
Les propriétés requises suivantes manquent : fb:app_id ».
J’imagine que je dois insérer cela dans le code de ma page web, mais je ne suis vraiment pas familiarisé à cela et je ne sais pas comment m’y prendre…
Merci d’avance !
Bonjour Fred, normalement cet élément n’est pas bloquant pour l’affichage correct d’un site sur Facebook. Que voulez-vous dire par « le site disparaît systématiquement » ?
Merci, pour cet article, sa ma vraiment beaucoup aider.
Merci pour le commentaire !
Bonjour Marlène,
Merci pour votre article car je galère depuis plusieurs jours avec Facebook qui bloque mon url dans une publicité.
Je démarre sur les publicités Facebook et je suis une formation en ligne mais ni le formateur ni learnybox me trouve une explication rationnelle au fait que l’url est refusé.
Votre article m’a donné une lueur d’espoir, je crains juste que Facebook ne tienne pas vraiment compte de mon unique commentaire.
J’espère que le problème sera résolu car tout mon projet est bloqué donc je suis très déçu.
Je vous remercie
Bonne journée
Bonjour Olivier, mon article parlait des publications organiques sur Facebook et non de la publicité. En l’occurence, sur un domaine « partagé » par plein de sites, il y a un risque que certaines personnes aient enfreint les règles de la communauté Facebook et que le domaine lui-même (learnybox ici) soit « blacklisté », au détriment des utilisateurs qui, eux, respectent les règles.
et j’ai bien ces balises là dans mon code source:
« `html
og:image
og:image:secure_url
og:image:width » content= »1500″
og:image:height » content= »1000″
Mais que dit l’outil de debug Facebook sur les raisons du blocage ? Je ne peux vraiment pas aider à partir des infos fournies, vous n’avez pas mis de lien en postant votre commentaire ;)
voici un lien où le partage n’affiche pas d’image.
cordialement
Hello Clément, la raison est ici. Facebook affiche ce message : « La Directive sur le droit d’auteur et les droits voisins est applicable en France. L’affichage du contenu est donc restreint pour certaines publications ».
Coucou Marlène ! Merci pour ta réactivité. Mais comment cela ce fait puisque ce sont mes photos ?
Alors, déjà, un peu plus de contexte autour de cette situation concernant Facebook, les droits voisins et la presse. Ton site est considéré comme un organe de presse donc Facebook y applique ces règles, peut-être parce qu’il est lié à une page Facebook classée dans la catégorie « Société de médias/d’actualités ».
D’accord est saurais tu comment changer ça ? Encore merci.
Et pourquoi certaines personnes qui partage le lien on l’image avec celui-ci
Facebook dit bien « l’article peut s’afficher sous forme de lien ne comportant ni image ni texte issu de l’article », le « peut » laisse entendre que ce n’est pas forcément toujours le cas… mais le réseau ne communique pas sur ses critères.
donc pas de solution pour mon problème a ce que je vois…
Pour ma part, j’aurais essayé de changer la catégorisation de la page Facebook pour mettre autre chose que « Société de médias/d’actualités ». Si le classement de Facebook se fonde sur cet élément, ça pourrait être efficace. En parallèle, je contacterais le support pour voir s’il y a un moyen d’autoriser la diffusion de ses contenus sur le réseau (car à l’heure actuelle, ils ne communiquent pas ouvertement sur le sujet).
Bonjour, j’ai un petit soucis avec mon site dès que quelqu’un partage un article via Facebook l’image n’apparait pas! auriez vous une solution? cordialement
Bonjour Clément, qu’avez-vous testé parmi les solutions mentionnées dans l’article ?
J’ai testé les plugins Yoast SEO et open graph mais rien n’y fait les partage sont toujours sans image!
Merci Marlène pour ton article. Mon site fait partie malheureusement du cas le plus grave (bloqué par Facebook). Après avoir tenté toutes les méthodes indiquées, je compte garder le nom tout en changeant d’hébergeur. Ce changement entraînera le changement de l’IP du site. Pensez-vous que ca peut débloquer la situation? ce sont les IP que Facebook bloquent?
Hello, je t’avoue que je ne sais pas du tout s’ils bloquent sur la base de l’IP ou plus simplement sur la base du domaine (j’aurais tendance à penser que c’est un blocage par domaine mais sans aucune certitude !).
Bonjour Marlène,
comment faire pour appliquer la balise Open Graph à l’ensemble des articles?
En effet, lorsque je partage mon article c’est l’image de ma page d’accueil qui s’affiche et non l’image de mes articles.
Merci :)
Hello Charlotte, utilises-tu bien le code donné dans l’article ?
J’ai tenté mais sans succès, du coup j’en ai utilisé un autre en ajoutant quelques balises.
Ceci dit, dans l’article il manque un mot où vous dite qu’il faut copier ce code juste avant un mot mais vous ne dites pas lequel. Peut-être que je ne l’ai pas placé au bon endroit.
Hello, le code ne s’affichait effectivement pas, j’ai modifié ;) C’est la partie « data:blog.postImageThumbnailUrl » qui contrôle la sélection de l’image qui s’affiche.