Le guide rapide d'utilisation du débogueur Facebook pour corriger les images WordPress

C'est un problème incroyablement irritant… vous avez écrit un article fantastique à publier sur votre blog WordPress, créé avec soin une image en vedette pour l'article et l'avez finalement publié. Il est maintenant temps de le partager avec le monde sur Facebook. Vous copiez le lien de la page, écrivez une description pleine d'esprit et collez le lien dans Facebook. Quelques instants plus tard, un aperçu du lien apparaît. Mais attendez… cela montre totalement la mauvaise image et la mauvaise description ! Que se passe-t-il? La bonne nouvelle est qu'il s'agit d'un problème courant. La nouvelle encore meilleure est qu'il peut facilement être corrigé à l'aide du débogueur Facebook.

C'est comme ça que vous le faites.

Quel est le problème et qu'est-ce que le débogueur Facebook a à voir avec cela ?

Avant de pouvoir utiliser le débogueur Facebook pour résoudre le problème de l'affichage incorrect de l'aperçu de votre lien, nous devons comprendre quel est le problème.

Lorsque vous partagez quelque chose sur Facebook, Facebook vérifie le lien et devrait récupérer les informations pertinentes pour cette page. Il met ensuite ces informations en cache pour une utilisation ultérieure. Facebook examinera le contenu de votre page et essaiera de deviner ce qu'il serait préférable d'afficher dans l'aperçu de votre lien. Ces informations sont ensuite enregistrées sur les serveurs de Facebook et sont utilisées chaque fois que quelqu'un crée une publication sur Facebook avec un lien vers votre page.

Facebook scrape votre page une fois, puis met en cache ces informations sur ses serveurs. Ce cache n'est pas mis à jour pendant 30 jours, donc si vous apportez des modifications à votre page dans ce délai, ces modifications ne seront pas reflétées dans l'aperçu de votre lien Facebook.

L'image et la description incorrectes peuvent également se produire lorsque Facebook n'a pas réussi à extraire les informations correctes de votre page.

Donc, en résumé, l'aperçu du lien incorrect peut s'afficher lorsque :

1. Des informations erronées ont été récupérées sur votre page par Facebook.
2. La page a été mise à jour mais les informations de l'ancienne page sont mises en cache par Facebook et ce cache n'a pas été actualisé.

Nous pouvons résoudre ces deux problèmes en utilisant deux outils. Le plugin Yoast SEO et le débogueur Facebook.

Ouvrir les balises Meta Graph

Comme nous l'avons vu ci-dessus, l'une des raisons pour lesquelles des informations incorrectes ont été affichées dans votre aperçu de lien sur Facebook est que Facebook a récupéré les informations incorrectes sur votre page. Plutôt que de compter sur Facebook pour déterminer ce qu'il serait préférable d'afficher dans l'aperçu de votre lien, vous pouvez indiquer à Facebook ce qu'il faut afficher en ajoutant des balises méta Open Graph à l'en-tête de votre page.

Les balises Open Graph Meta contiennent toutes les informations que Facebook pourrait vouloir afficher aux utilisateurs sur votre page Web. En d'autres termes, il indique à Facebook ce que vous partagez.

Si vous utilisez Yoast (ou un plugin d'optimisation de recherche similaire), les informations Open Graph sont automatiquement ajoutées aux en-têtes de votre page. Vous pouvez modifier ce qui est affiché sur votre page à partir de ces plugins. Lorsque les balises méta Open Graph correctes ont été ajoutées, nous pouvons alors utiliser le débogueur Facebook pour dire à Facebook de gratter à nouveau votre page afin qu'il actualise son cache avec les informations correctes.

Utilisation de Yoast pour modifier vos balises Meta Open Graph

Le moyen le plus simple de modifier vos balises méta Open Graph consiste à utiliser le plug-in Yoast SEO. Non seulement c'est le plugin numéro 1 pour vous aider à optimiser votre site Web afin qu'il se classe efficacement, mais il dispose également d'un outil pratique qui facilite la configuration des pages de votre site Web pour afficher les informations correctes pour Facebook. Si vous ne souhaitez pas utiliser Yoast, essayez le plug-in Open Graph et Twitter Card Tags.

Tout d'abord, installez le plugin Yoast SEO (si vous ne l'avez pas déjà fait), puis ouvrez la page que vous souhaitez partager sur Facebook. Faites défiler la page jusqu'à ce que vous trouviez l'onglet Yoast SEO. Vous verrez un onglet dans Yoast intitulé "Social". Cliquez dessus et vous aurez deux options. Un pour Facebook et un pour Twitter. Sélectionnez Facebook et vous verrez ce qui suit :

Yoast essaie d'afficher automatiquement les informations Open Graph correctes pour votre page, mais ce n'est pas toujours correct. Au lieu de compter sur leur système automatisé pour ce faire, vous pouvez remplir les champs Facebook avec les détails que vous souhaitez que Facebook affiche avec une image que vous souhaitez utiliser. Lorsque vous avez terminé, cela ressemblera à ceci :

Cliquez sur Mettre à jour pour appliquer ces modifications à votre page en direct et vous aurez maintenant les informations Open Graph correctes affichées dans les en-têtes de votre site Web.

Videz votre cache WordPress

Deux lots de cache doivent être effacés pour que les informations correctes s'affichent dans l'aperçu de votre lien sur Facebook. Le premier est le cache sur votre propre site Web. Avec autant de plugins de mise en cache disponibles, vous devrez jeter un coup d'œil à votre propre configuration et, si nécessaire, creuser dans les fichiers d'aide du plugin pour savoir comment vider votre cache.

Si vous hébergez votre site avec Pressidium, vous pouvez rapidement vider votre cache via le plugin Pressidium qui se trouve juste en haut du menu de gauche.

Une fois le cache effacé de votre côté, vous pouvez maintenant passer à l'effacement du cache sur les serveurs de Facebook.

Utilisation du débogueur Facebook

Tout d'abord, nous devons d'abord voir comment Facebook "voit" actuellement votre page. Pour ce faire, rendez-vous sur la page du débogueur Facebook puis saisissez l'URL de votre page dans l'outil. Cliquez sur "Déboguer" et vous verrez un résumé de la façon dont votre page est affichée avec un aperçu du lien. Si cela est correct, vous êtes prêt à partir car c'est ce qui sera affiché lorsqu'un lien vers votre page est partagé sur Facebook.

S'il est incorrect, vous devrez revérifier que vous avez correctement configuré Yoast et que vous avez vidé le cache de votre site Web. Une fois que vous avez fait cela, cliquez sur "Gratter à nouveau". Cela oblige Facebook à actualiser son cache. Cela devrait maintenant afficher les informations correctes ! Si ce n'est pas le cas, ne vous inquiétez pas d'appuyer à nouveau sur "Gratter" une deuxième ou une troisième fois. Cela peut parfois prendre quelques tentatives pour forcer Facebook à extraire les détails corrects de votre page.

Autres conseils de débogage Facebook

Il y a quelques autres éléments qu'il vaut la peine de connaître au cas où vous rencontreriez d'autres problèmes avec l'affichage de votre aperçu de lien.

Taille de l'image

Utilisez une image de 1 200 x 630 pixels dans la mesure du possible. Il s'agit de la taille optimale pour afficher une image dans un aperçu de lien Facebook. Si le rapport d'aspect est différent, vous constaterez peut-être que des éléments de votre image sont "tronqués". Si vous souhaitez utiliser une image plus grande, essayez de conserver ce rapport d'aspect.

Si vous ne voyez aucune image affichée, assurez-vous qu'elle est suffisamment grande. S'il est inférieur à 200px x 200px, Facebook ne l'affichera pas du tout.

'Fb: app_id' est manquant

Si vous regardez la capture d'écran du débogueur Facebook ci-dessus, vous remarquerez peut-être qu'il y a une erreur indiquant "Propriétés manquantes : les propriétés suivantes sont manquantes : fb: app_id".

La plupart du temps, cet avertissement peut être ignoré. Cela n'affectera en rien la possibilité de partager des messages. Cela affecte cependant votre capacité à utiliser les données de Facebook Insights. Si c'est quelque chose que vous voulez faire, voici comment corriger cette erreur.

1. Inscrivez-vous pour une application Facebook sur https://developers.facebook.com/docs/apps#register (vous devrez convertir votre compte Facebook en compte développeur)
2. Créez une application sur https://developers.facebook.com/apps, puis copiez votre numéro d'identification d'application.
3. Accédez à votre administrateur WordPress, puis dirigez-vous vers le plugin Yoast via le menu de la barre latérale. Cliquez sur 'Social' puis sur 'Facebook'. Près du haut, vous verrez une section pour votre ID d'application. Collez-le ici et enregistrez.
4. Vous pouvez ensuite vider le cache de votre site Web, puis utiliser le débogueur Facebook pour gratter à nouveau votre page. Cette erreur devrait maintenant disparaître.

Pré-cache votre Page avec Facebook

Notre dernier conseil est de pré-mettre en cache la page de votre site Web avec Facebook. La toute première personne à partager votre lien sur Facebook ne verra peut-être pas d'aperçu du lien. En effet, Facebook n'a pas encore récupéré cette page (il ne le fait que lorsqu'un lien est partagé).

Pour contourner ce problème, vous pouvez choisir d'exécuter le débogueur Facebook sur chacune de vos pages juste après les avoir publiées. Cela signifie que la page est maintenant mise en cache à la fin de Facebook et cela signifie que la première personne qui partage la page ou la publication verra instantanément l'aperçu du lien correct. Cela ne prend que quelques secondes et vaut la peine d'être considéré si vous avez une base d'utilisateurs actifs pour votre site Web et que vous voulez vous assurer que tout fonctionne parfaitement dès le départ.

Sommaire

L'utilisation du débogueur Facebook est une victoire facile et rare dans le monde numérique de plus en plus complexe d'aujourd'hui ! C'est un outil rapide et efficace à utiliser. N'oubliez pas de vider le cache de votre propre site Web et vous devriez être prêt à partir. Bon débogage Facebook !