Que vous soyez blogueur, spécialiste du marketing sur les réseaux sociaux ou même simplement propriétaire d’une petite entreprise, vous rencontrerez probablement à un moment donné le problème que Facebook n’affiche pas l’image correcte sur votre site WordPress. Parfois Facebook peut afficher une vieille image ou pire encore, pas d’image du tout ! Heureusement, vous pouvez facilement dépanner et corriger ces types de problèmes à l’aide d’un outil appelé Facebook Debugger. Découvrez ci-dessous quelques scénarios courants que vous pourriez rencontrer et comment les résoudre.

Comment Facebook va chercher de l’information

Chaque fois que vous partagez des choses avec WordPress, Facebook met vos images en cache sur leurs serveurs et CDN (pour en savoir plus sur ce qu’est un CDN et comment il fonctionne, cliquez ici). Vous pouvez penser à cela de la même manière que la mise en cache fonctionne sur votre site, parfois vous devez vider le cache pour que les choses fonctionnent à nouveau. Il en va parfois de même pour Facebook. Si vous faites des mises à jour sur votre site, Facebook peut toujours afficher une vieille image lorsque vous allez la partager, c’est parce qu’elle ne va pas chercher de nouvelles informations, mais qu’elle sert plutôt à augmenter les informations qu’elle a déjà en cache.

Il en va de même pour les informations sur votre lien et le contenu lui-même. Ils récupèrent ce qu’ils appellent les balises Open Graph Meta Tags. Selon Facebook, le protocole Open Graph permet à toute page web de devenir un objet riche dans un graphique social. Fondamentalement, ce sont des balises (code) qui informent Facebook de ce que vous partagez.

Vous n’êtes pas sûr d’utiliser les balises Open Graph Meta Tags sur votre site ? Eh bien, vous l’êtes probablement, vous ne le savez peut-être pas. 😉 Si vous utilisez des plugins populaires comme Yoast SEO ou Social Warfare, ceux-ci ajoutent en fait automatiquement ces balises pour vous dans les coulisses.

Prenons l’exemple de notre guide d’optimisation de la vitesse de votre site Web. Si nous regardons le code source de cet article, nous pouvons voir les données suivantes concernant Open Graph. Note : Open Graph utilise différents attributs, tels que og:title et celui qui nous intéresse vraiment pour ce tutoriel, est og:image. Il s’agit du code sur notre site que Facebook consulte pour déterminer l’image, le titre et la description à afficher.

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="A Beginner's Guide to Website Speed Optimization (WordPress-Friendly)" />
<meta property="og:description" content="In-depth website speed optimization guide that shows you how important it is to have a snappy website. DIY instructions and tricks to improve load times." />
<meta property="og:url" content="https://kinsta.com/learn/page-speed/" />
<meta property="og:site_name" content="Kinsta Managed WordPress Hosting" />
<meta property="article:publisher" content="https://www.facebook.com/kinstahosting" />
<meta property="article:author" content="https://www.facebook.com/mark.gavalda" />
<meta property="article:tag" content="webdev" />
<meta property="article:tag" content="webperf" />
<meta property="fb:app_id" content="148976462317083" />
<meta property="og:image" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />
<meta property="og:image:secure_url" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />

Utilisation du débogueur Facebook

Comme avec n’importe quelle plateforme ou n’importe quel outil, il y aura des problèmes ou des bizarreries que vous devrez contourner, surtout si vous ne suivez pas les directives établies pour les meilleures pratiques. L’outil Facebook Debugger a été créé pour vous aider à résoudre les problèmes avec vos balises Open Graph Meta Tags, ainsi que pour dépanner la mise en cache.

Vous trouverez le débogueur Facebook sur le site de développeur Facebook sous Outils et assistance. Si c’est vous qui partagez beaucoup de contenu sur Facebook, c’est un bon lien vers un signet pour référence future.

Outil de débogage Facebook

Outil de débogage Facebook

Pour parcourir un article, il suffit d’entrer l’URL et de cliquer sur « Debugger ». Nous allons en fait utiliser un cas réel dans notre exemple. Nous venons tout juste de mettre à jour l’image de notre article sur l’optimisation de la vitesse de votre site web. Lorsque nous l’entrons dans le débogueur Facebook, il va d’abord extraire les informations mises en cache qu’ils ont de leur côté (comme indiqué ci-dessous).

C’est ce que les gens voient lorsqu’ils partagent notre article. Cependant, dans ce cas-ci, il s’agit d’extraire une vieille image d’avant la mise à jour de l’article. Nous pouvons aussi voir que og:image est l’ancien nom de fichier.

Ancienne image et URL affichées dans Facebook Debugger

Ancienne image et URL affichées dans Facebook Debugger

Alors que pouvons-nous faire ? Il y a deux choses à faire. Suivez les étapes ci-dessous.

Étape 1 – Effacer le cache WordPress pour cette URL

La toute première chose que nous devons faire pour nous assurer que Facebook récupère les dernières informations est de vider le cache sur notre site WordPress lui-même. C’est vrai, techniquement, il y a deux couches de mise en cache qui pourraient être impliquées ici. Si l’ancienne image est toujours mise en cache sur votre site, le débogueur Facebook ne pourra pas vous aider à résoudre votre problème car il ne fera que récupérer à nouveau les informations mises en cache.

En ce qui concerne la mise en cache WordPress, nous sommes d’accord (et pouvons passer à l’étape 2), car avec la mise en cache au niveau du serveur Kinsta, chaque fois qu’un article est mis à jour, le cache pour cette page ou cet article est automatiquement vidé. En savoir plus sur le fonctionnement de la mise en cache Kinsta. Si vous utilisez une autre solution de mise en cache ou un plugin tiers, vous devrez consulter leur documentation pour vous assurer que vous savez comment vider votre cache pour une URL. Voici quelques liens vers certaines des solutions de mise en cache les plus populaires :

Si tout le reste échoue, vous pouvez toujours vider le cache sur l’ensemble de votre site WordPress (voir ci-dessous). Cependant, pour des raisons de performances, ceci n’est généralement pas recommandé car votre site devra reconstruire le cache, ce qui dégradera vos temps de chargement entre-temps.

Effacer le cache de WordPress

Effacer le cache de WordPress

Et si vous avez toujours des problèmes, votre image pourrait aussi être mise en cache sur votre CDN. Dans ce cas, vous devrez peut-être purger votre cache CDN.

Étape 2 – Essayer à nouveau dans Facebook Debugger

Maintenant que le cache est vide pour l’article ou la page en question, nous devrons la tester à nouveau dans l’outil Facebook Debugger. On entre donc l’URL et on clique sur le bouton « Scrape Again ».

Tester à nouveau dans les outils de débogage de Facebook

Tester à nouveau dans les outils de débogage de Facebook

Vous pourriez rencontrer un avertissement. D’après notre expérience, ce n’est pas toujours précis. Par exemple, nous voyons un avertissement qui dit que notre image a dépassé la taille maximale de 8 Mo ou que le serveur a été trop lent à répondre. Tout d’abord, notre image est loin d’avoir cette taille, en fait, elle n’est que de 160,63 Ko. Deuxièmement, notre serveur est très rapide et la page entière se charge en moins d’une seconde.

Avertissement Facebook

Avertissement Facebook

C’est donc ici que nous appuyons simplement sur le bouton « Scrape Again » pour la deuxième fois. Oui, ça peut paraître bizarre. Mais beaucoup de fois, vous aurez besoin de tester deux fois. Cela ne prend que quelques secondes. Et boum ! Et voilà, c’est parti. Nous pouvons voir ci-dessous qu’il récupère maintenant notre nouvelle image et si nous regardons l’attribut og:image c’est bien le nouveau nom du fichier.

Nouvelle image dans l'outil Facebook Debugger

Nouvelle image dans l’outil Facebook Debugger

Il est important de noter que cela ne mettra pas à jour l’image des articles déjà partagés sur Facebook. Cela n’a d’impact que sur les articles que vous ou d’autres personnes partagez après coup.

Conseils supplémentaires sur le débogueur Facebook

Vous pouvez utiliser l’outil Facebook Debugger pour mettre à jour non seulement les anciennes images mais aussi le contenu (texte) que vous voyez sur vos messages Facebook. Le titre et la description sont toutes deux des balises Meta Open Graph. Donc si vous avez besoin de reformuler quelque chose, mettez-le à jour dans WordPress, et suivez exactement les mêmes étapes ci-dessus.

Les propriétés ‘og:image’ fournies ne sont pas encore disponibles

Aussi, ce n’est pas parce que nous avons ignoré les avertissements ci-dessus qu’ils ne sont pas toujours utiles. En fait, il existe des tailles recommandées lorsqu’il s’agit d’images que vous devriez utiliser. Sinon, de mauvaises choses peuvent arriver. Par exemple, une image n’apparaît pas du tout (comme on le voit ci-dessous dans cet avertissement).

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités

Les propriétés ‘og:image’ fournies ne sont pas encore disponibles car les nouvelles images sont traitées de manière asynchrone. Pour s’assurer que les partages de nouvelles URLs incluent une image, spécifiez les dimensions en utilisant les balises ‘og:image:width’ et ‘og:image:height’.

Facebook Debugger - image trop petite

Facebook Debugger – image trop petite

Ce qui précède s’est produit parce que notre image était trop petite. La taille minimale d’image requise par Facebook est de 200 x 200 pixels. Habituellement, plus c’est grand, mieux c’est quand il s’agit d’images Facebook. Nous avons créé un article avec toutes les tailles d’images recommandées pour les réseaux sociaux. 1 200 x 630 pixels semble fonctionner le mieux pour la plupart des gens. Il est correct d’aller plus grand aussi bien, en fait notre image sur notre article dans le premier exemple faisait 1460 x 730px. Rappelez-vous simplement que Facebook recadrera tout ce qui est plus gros, et donc le maintien de ce rapport d’aspect est l’une des parties les plus importantes.

Si vous utilisez un plugin comme Yoast SEO, il peut également être recommandé de régler manuellement l’image. Peut-être que vos images en vedettes sur votre thème WordPress sont d’une taille ou d’un rapport d’aspect différent. Ou peut-être que vous n’utilisez même pas les images en vedette !

Dans ce cas, le plugin Yoast SEO vous permet de télécharger manuellement une image de taille différente juste pour Facebook qui remplira ces Meta Tags Open Graph. Vous pouvez également définir manuellement le titre et la description si nécessaire.

Boîte sociale Facebook dans Yoast SEO

Boîte sociale Facebook dans Yoast SEO

Les propriétés requises suivantes sont manquantes : fb:app_id

Vous pouvez également voir l’avertissement suivant parlant d’un ID d’application Facebook manquant. Il est important de noter que cela n’interfère en rien avec la possibilité de partager des articles sur Facebook. Bien souvent, cela peut tout simplement être ignoré. Cependant, cela limite votre capacité à utiliser les données de Facebook Insights.

Les propriétés requises suivantes sont manquantes : fb:app_id

Les propriétés requises suivantes sont manquantes : fb:app_id

Les propriétés requises suivantes sont manquantes : fb:app_id

Si vous voulez les données Insights supplémentaires, vous devez ajouter votre ID d’application Facebook à votre site. Voici les instructions ci-dessous sur la façon de l’ajouter dans WordPress en utilisant le plugin Yoast SEO.

  1. Créez votre application Facebook : https://developers.facebook.com/docs/apps/register (c’est entièrement gratuit)
  2. Copiez votre ID d’application Facebook à partir du tableau de bord de l’application.
  3. Dans votre tableau de bord WordPress, cliquez sur « SEO » à gauche.
  4. Sous l’onglet « Facebook », vous pouvez entrer votre ID d’application Facebook.
Ajouter l'ID de l'application Facebook

Ajouter l’ID de l’application Facebook

Assurez-vous de vider le cache de votre site avant de le tester à nouveau dans l’outil Facebook Debugger.

Résumé

J’espère que vous en savez un peu plus sur l’outil Facebook Debugger et sur la façon dont vous pouvez l’utiliser pour dépanner et corriger des images sur votre site WordPress. N’oubliez pas d’effacer toutes les couches du cache, puis de tester. Vos nouvelles images devraient alors apparaître correctement pour que tous puissent les partager sur Facebook.


Si vous avez aimé ce tutoriel, alors vous allez adorer notre support. Tous les plans d’hébergement de Kinsta incluent le support 24/7 de nos développeurs et ingénieurs WordPress expérimentés. Discutez avec la même équipe qui soutient nos clients du Fortune 500. Découvrez nos plans