Facebook peut être un endroit idéal pour partager des publications et commencer à faire de la publicité pour votre contenu. Cependant, vous pouvez remarquer que certains de vos liens partagés ne contiennent pas les bonnes images vedettes. Parfois, Facebook peut extraire une ancienne image ou, pire encore, aucune image du tout !

Heureusement, vous pouvez facilement dépanner et corriger ces types de problèmes à l’aide d’un outil appelé le débogueur de partage. Celui-ci peut cibler des erreurs d’affichage spécifiques ou des problèmes avec vos balises méta. Grâce à ce logiciel, vous pouvez permettre à Facebook d’annoncer correctement vos publications avec les bonnes images.

Dans cet article, nous allons vous expliquer ce qu’est le débogueur Facebook et comment vous pouvez l’utiliser pour corriger vos images WordPress. C’est parti !

Comment fonctionne le débogueur de Facebook

Avant de commencer à utiliser le débogueur de partage, vous devez comprendre comment Facebook analyse votre contenu. Chaque fois que quelqu’un utilise un bouton de partage social ou copie et colle un lien vers votre page, Facebook explore le code HTML de votre site web. Ensuite, il génère une image miniature, un titre et une description sur la base de ces informations.

Voici quelques exigences générales que votre site doit respecter pour que ce processus se déroule sans problème :

Maintenant que vous en savez un peu plus sur le robot d’exploration Facebook et son fonctionnement, plongeons dans les problèmes que vous pourriez rencontrer en partageant du contenu sur cette plateforme.

Comment Facebook récupère les informations

Chaque fois que vous partagez du contenu avec Facebook, celui-ci met en cache vos images sur ses serveurs et son réseau de diffusion de contenu (CDN). Si vous effectuez des mises à jour sur votre site, il se peut que Facebook affiche toujours une ancienne image lorsque vous voulez la partager. Cela s’explique par le fait qu’il ne récupère pas de nouvelles informations, mais sert plutôt les informations qu’il a déjà mises en cache.

Il en va de même pour les informations concernant votre lien et le contenu lui-même. Ils récupèrent ce qu’ils appellent les « métabalises Open Graph ». Selon Facebook, le protocole Open Graph transforme une page web en un objet riche dans un graphe social. Il s’agit essentiellement de balises (code) qui fournissent à Facebook des informations sur ce que vous partagez.

Même si vous n’êtes pas familier avec les métabalises Open Graph, vous les utilisez probablement déjà. Si vous avez installé des extensions populaires comme Yoast SEO ou Social Warfare, celles-ci ajoutent automatiquement des métabalises pour vous en coulisse.

Prenons l’exemple de notre guide d’optimisation de la vitesse des sites web. Si nous regardons le code source de ce post, nous pouvons voir les données suivantes concernant Open Graph. Remarque : Open Graph utilise différents attributs, tels que og:title et celui qui nous intéresse vraiment pour ce tutoriel, qui est og:image.

<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®" />
<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" />

Il s’agit du code de notre site que Facebook consulte pour déterminer l’image vedette, le titre et la description à afficher. Une fois ces données mises en cache, vous devrez utiliser l’outil Sharing Debugger pour mettre à jour les détails de votre publication.

Comment utiliser l’outil Sharing Debugger de Facebook pour corriger les images WordPress

Toute plateforme ou outil comporte des problèmes ou des bizarreries que vous devez contourner. L’outil Facebook Sharing Debugger a été créé pour vous aider à résoudre les problèmes liés à vos métabalises Open Graph, ainsi qu’à résoudre les problèmes de mise en cache.

Vous pouvez trouver le débogueur de partage sur le site Meta for Developers, sous la rubrique Outils. Pour explorer une publication, il suffit de saisir l’URL et de cliquer sur Debuguer:

Outil Facebook Sharing Debugger
Outil Facebook Sharing Debugger

Chez Kinsta, nous avons récemment mis à jour l’image de notre article sur l’optimisation de la vitesse des sites web. Lorsque nous l’entrons dans le débogueur Facebook, il va d’abord extraire les informations mises en cache qu’ils ont sur leur fin :

Ancienne image et URL apparaissant dans Sharing Debugger
Ancienne image et URL apparaissant dans Sharing Debugger

Dans ce cas, Facebook récupère une ancienne image datant d’avant la mise à jour de la publication. Nous pouvons également voir que l’adresse og:image est un ancien nom de fichier. C’est ce que les gens voient réellement lorsqu’ils partagent notre article.

Étape 1 : Vider le cache de WordPress pour cette URL

Pour vous assurer que Facebook récupère les dernières informations sur votre article, vous devez vider le cache de WordPress. Si l’ancienne image est toujours mise en cache sur votre site, le débogueur de partage ne pourra pas vous aider à résoudre votre problème, car il récupérera simplement les informations en cache.

Avec la mise en cache au niveau du serveur de Kinsta, chaque fois qu’un article est mis à jour, le cache de cette page ou de cet article est effacé automatiquement. Si vous utilisez une solution de mise en cache différente ou un plugin tiers, vous voudrez consulter leur documentation pour vous assurer que vous savez comment vider votre cache.

Si tout échoue, vous pouvez toujours vider le cache de l’ensemble de votre site WordPress. Cependant, gardez à l’esprit que votre site devra reconstruire le cache, ce qui peut dégrader la vitesse de votre site.

Si vous décidez que c’est nécessaire, ouvrez MyKinsta, naviguez sur votre site WordPress puis cliquez sur Outils. Ici, cliquez sur Vider le cache:

Vider le cache dans l'onglet Outils de MyKinsta.
Vider le cache dans l’onglet Outils de MyKinsta.

Si vous rencontrez toujours des problèmes, il se peut que votre image soit mise en cache sur votre CDN. Dans ce cas, vous devrez peut-être purger votre cache CDN.

Étape 2 : Grattez à nouveau dans le débogueur de partage

Maintenant que le cache a été vidé pour la publication ou la page en question, nous devons la gratter à nouveau dans l’outil Facebook Debugger. Pour ce faire, cliquez sur le bouton Scrape Again.

Scraper à nouveau dans les outils de Sharing Debugger
Scraper à nouveau dans les outils de Sharing Debugger

Vous pouvez rencontrer des avertissements qui ne sont pas toujours les plus précis. Par exemple, nous voyons un avertissement indiquant que notre image a dépassé la taille maximale de 8 Mo et que le serveur était trop lent pour répondre. En réalité, notre image ne fait que 160,63 Ko et la page se charge en moins d’une seconde.

Avertissement de Facebook
Avertissement de Facebook

C’est donc à ce moment-là que nous avons appuyé sur le bouton Scrape Again pour la deuxième fois. Oui, cela peut sembler étrange. Mais il arrive souvent que vous ayez besoin de scraper deux fois. Après cela, vous verrez que la nouvelle image vedette est maintenant extraite avec le nouveau nom de fichier comme attribut og:image:

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 pour les publications Facebook déjà partagées. Cela n’affecte que les publications que vous ou d’autres personnes partagent après coup.

Conseils supplémentaires pour Facebook Debugger

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

Corrigez l’avertissement de l’image « les propriétés ne sont pas encore disponibles »

Par ailleurs, 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 en ce qui concerne les images que vous devriez utiliser. Sinon, votre image pourrait ne pas s’afficher du tout (comme on le voit ci-dessous dans cet avertissement) :

Facebook Debugger - image trop petite
Facebook Debugger – image trop petite

Les propriétés « og:image x fournies ne sont pas encore disponibles car les nouvelles images sont traitées de manière asynchrone. Pour vous assurer que les partages des nouvelles URL incluent une image, spécifiez les dimensions à l’aide des balises « og:image:width x » et « og:image:height ».

Cet avertissement s’est produit parce que notre image était trop petite. La taille minimale de l’image exigée par Facebook est de 200 x 200 pixels. En général, plus l’image est grande, mieux c’est pour les images Facebook.

En général, 1 200 x 630 pixels semble convenir à la plupart des gens. Vous pouvez créer une image plus grande que cela, mais Facebook la recadrera. Lorsque vous déterminez la taille de votre image, gardez ce rapport d’aspect à l’esprit.

Si vous utilisez une extension comme Yoast SEO, il est également recommandé de définir manuellement l’image. Vos images mises en avant sur votre thème WordPress peuvent avoir un ratio d’aspect ou une taille différents. Peut-être n’utilisez-vous même pas d’images mises en avant !

Dans ce cas, l’extension Yoast SEO vous permet de téléverser manuellement une image de taille différente juste pour Facebook. Il vous suffit de trouver les régalges sociaux de Yoast SEO pour un article et d’ajouter une nouvelle image Facebook :

Boîte sociale Yoast SEO Facebook
Boîte sociale Yoast SEO Facebook

Une fois que vous aurez téléversé une image correctement dimensionnée, elle remplira les métabalises Open Graph que Facebook recherche. En outre, vous pouvez continuer à définir manuellement le titre et la description si nécessaire.

Ajoutez la propriété fb:app_id

Vous pouvez également voir un avertissement concernant l’absence de l’ID de l’application Facebook. Il est important de noter que cela n’interfère en aucune façon avec la capacité de partager des publications sur Facebook. Dans la plupart des cas, cela peut être simplement ignoré, mais cela limite votre capacité à utiliser les données de Facebook Insights:

Propriétés manquantes
Propriétés manquantes

Si vous souhaitez obtenir ces données Insights supplémentaires, vous devez ajouter votre ID d’application Facebook à votre site. Tout d’abord, créez votre application Facebook. Ensuite, copiez votre Facebook App ID depuis le tableau de bord de l’application.

Une fois que vous avez configuré une application Facebook en direct, vous pouvez ajouter une balise méta pour celle-ci à votre site. Bien que Yoast SEO ait eu l’habitude de prendre en charge ce processus, il a récemment supprimé cette fonctionnalité. Comme alternative, installez l’extension gratuite Meta Tag Manager:

Extension Meta Tag Manager
Extension Meta Tag Manager

Pour commencer à utiliser cet outil, allez dans Réglages > Meta Tag Manager. Ensuite, définissez le type de balise comme « propriété » et la valeur de la propriété comme « fb:app_id » :

Valeurs de Meta Tag Manager
Valeurs de Meta Tag Manager

Pour l’Attribut de contenu, collez votre Facebook App ID. Une fois que vous aurez cliqué sur Enregistrer les modifications et vidé votre cache, ces informations seront ajoutées aux métabalises de votre site. Vous pouvez maintenant gratter à nouveau l’URL pour voir si le problème a été résolu !

Résumé

Avec un peu de chance, vous en savez maintenant un peu plus sur l’outil Facebook Sharing Debugger et sur la façon dont vous pouvez l’utiliser pour dépanner et réparer les images sur votre site WordPress. Ainsi, tous vos liens partagés contiendront les images, titres et descriptions corrects.

Après avoir remarqué une image vedette incorrecte dans l’outil Sharing Debugger, effacez toutes les couches de mise en cache sur votre site w<eb et procédez à un nouveau scrapping. Vos nouvelles images devraient alors apparaitre correctement pour que tous puissent les partager sur Facebook. Souvent, vous pouvez éviter tout problème avec vos liens Facebook en vidant régulièrement le cache de votre site.

Avec un plan d’hébergement Kinsta, le cache de votre page sera automatiquement purgé chaque fois que vous mettez le contenu à jour !


Obtenez tous vos applications, bases de données et Sites WordPress en ligne et sous un même toit. Notre plateforme cloud haute performance, riche en fonctionnalités, comprend :

  • Configuration et gestion faciles dans le tableau de bord MyKinsta
  • Support expert 24/7
  • Le meilleur matériel et réseau de la plateforme Google Cloud, propulsé par Kubernetes pour une évolutivité maximale
  • Une intégration Cloudflare au niveau de l’entreprise pour la vitesse et la sécurité
  • Une audience mondiale avec jusqu’à 35 centres de données et 275 PoP dans le monde entier

Testez-le vous-même avec 20 $ de réduction sur votre premier mois de Hébergement d’application ou Hébergement de base de données. Explorez nos plans ou contactez nous pour trouver ce qui vous convient le mieux.