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 :
- Encodage Gzip et deflate dans votre serveur
- Lister les propriétés open graph dans les 1 Mo de votre HTML
- Limitez le temps de chargement des pages à quelques secondes
- Ajoutez les chaînes d’agent utilisateur ou les adresses IP du crawler à la liste d’autorisation de votre site
- Assurez-vous que votre politique de confidentialité peut être explorée
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:
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 :
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:
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.
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.
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:
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) :
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 :
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:
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:
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 » :
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 !
