Comment utiliser le débogueur Facebook OpenGraph pour corriger les erreurs courantes

Le débogueur Facebook est un outil qui vous permet d'analyser et de dépanner les balises OpenGraph pour n'importe laquelle de vos pages. À l'aide du débogueur, vous pouvez rapidement identifier la source des erreurs dans vos extraits enrichis de médias sociaux.

Étant donné que les médias sociaux, et Facebook lui-même, sont des éléments clés de toute stratégie marketing, savoir comment utiliser cet outil peut s'avérer payant.

Parlons du débogueur Facebook et d'OpenGraph !

Qu'est-ce qu'OpenGraph (et comment ajouter des balises dans WordPress)

OpenGraph fait référence à une collection de balises que vous pouvez utiliser pour ajouter des métadonnées à vos pages et publications. Les plateformes de médias sociaux utilisent ces balises OpenGraph pour générer les extraits enrichis qu'elles affichent pour leurs utilisateurs :

Si vous n'utilisez pas de balises OpenGraph, les plateformes de médias sociaux généreront automatiquement des extraits de vos pages lorsque vous les partagerez. Cependant, avec cette approche, vous perdez tout contrôle sur l'apparence de ces extraits riches.

Cela signifie que si l'image d'accompagnement n'est pas belle, vous devez la modifier dans WordPress. Si vous n'aimez pas la méta description utilisée par Facebook, vous devrez également modifier votre contenu. Dans l'ensemble, ce n'est pas une approche intelligente si vous souhaitez tirer parti des réseaux sociaux comme source de trafic.

Même cet exemple simple nécessite que vous ajoutiez plusieurs balises OpenGraph en arrière-plan. Pour l'extrait enrichi, vous devez utiliser les balises suivantes :

<meta property="og:title" content="Article Title"/>
<meta property="og:description" content="Article Description"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://example.com/link/to/article"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="og:image" content="http://example.com/image/src.jpg"/>

Cet exemple est tiré d'un article précédent de Elegant Themes sur les balises OpenGraph et leur utilisation (que vous devriez lire !). En résumé, il existe deux manières d'ajouter des balises OpenGraph à votre contenu :

1. Manuellement. Tout comme avec le balisage Schema, vous pouvez ajouter manuellement des balises OpenGraph à vos pages. L'inconvénient est que vous devez le faire pour chaque page de votre site Web que vous souhaitez partager sur les réseaux sociaux.
2. Utilisation de plugins. Il existe de nombreux plugins qui génèrent automatiquement des balises OpenGraph pour votre contenu. L'option de plugin la plus populaire est Yoast SEO, bien que d'autres puissent également le faire.

Malheureusement, la version gratuite de Yoast SEO n'inclut pas la fonctionnalité de prévisualisation d'extraits enrichis. Cependant, il ne vous permet de modifier les balises OpenGraph de votre contenu à l' aide d' un simple éditeur.

Si vous utilisez déjà Yoast SEO, tirer parti de sa fonctionnalité OpenGraph est le moyen le plus simple de vous assurer que vos extraits de réseaux sociaux ont exactement l'apparence que vous souhaitez.

Pourquoi devriez-vous utiliser le débogueur Facebook pour OpenGraph

Le débogueur Facebook est un outil qui peut vous aider à vous assurer que vos extraits riches en médias sociaux fonctionnent parfaitement dans tous les domaines. Pour l'utiliser, il suffit de visiter la page Sharing Debugger pour les développeurs Facebook. Ici, entrez l'URL de la page dont vous souhaitez vérifier les balises et cliquez sur le bouton Déboguer :

Vous n'avez même pas besoin d'un compte Facebook pour utiliser le débogueur. Dès que vous analysez une URL, elle affiche un aperçu de son extrait enrichi ainsi que des informations telles que son URL canonique :

Si vous faites défiler plus loin, vous pouvez analyser toutes les balises OpenGraph de la page :

Gardez à l'esprit que le débogueur Facebook ne vous permet pas de corriger les erreurs ou de modifier vos balises directement. Cependant, il vous montre un aperçu de l'apparence de votre contenu sur Facebook. Plus important encore, il vous donne également des avertissements s'il détecte des erreurs dans vos balises OpenGraph :

Cette erreur particulière est l'une des trois que nous allons vous montrer comment résoudre les problèmes dans la section suivante.

Comment utiliser le débogueur Facebook pour corriger 3 erreurs OpenGraph courantes

Pour cette section, nous allons nous appuyer principalement sur le débogueur Facebook. Cependant, si vous utilisez Yoast SEO, nous vous montrerons également comment le plugin peut vous aider à corriger quelques erreurs OpenGraph. Allons-y !

1. Grattez à nouveau une URL pour mettre à jour les images associées

L'une des erreurs les plus courantes que vous pouvez rencontrer avec les balises OpenGraph est que le débogueur Facebook affichera des images en vedette obsolètes. Cela se produit car il ne se met pas automatiquement à jour sur Facebook lorsque vous mettez à jour une page ou une image associée à une publication. Lorsque vous utilisez des balises OpenGraph pour les images, Facebook met ces fichiers en cache de son côté pour améliorer les performances. Par conséquent, si vous mettez à jour les images en vedette de votre côté, vous devez «forcer» Facebook à faire de même de son côté.

La façon la plus simple de le faire est d'utiliser la fonctionnalité Scrape Again du débogueur Facebook. Vous pouvez trouver cette option juste sous Quand et comment nous avons gratté l'URL pour la dernière fois :

Cliquez sur le bouton Gratter à nouveau et voyez si l'image en vedette de votre page change dans la section Aperçu du lien . Si ce n'est pas le cas, parfois cliquer à nouveau sur le bouton fait l'affaire (pas très high-tech, mais ça marche !)

Si l'image ne parvient pas à être téléchargée, vous pouvez être confronté à un problème de mise en cache sur votre site Web. Dans ce cas, vous devrez vider le cache de votre site, puis utiliser le bouton Scrape Again pour forcer Facebook à mettre à jour ses informations d'image.

2. Corrigez l'erreur « les propriétés ne sont pas encore disponibles »

La balise og:image est ce qu'OpenGraph utilise pour déclarer quel fichier image les plateformes de médias sociaux doivent afficher pour chaque page. Dans certains cas, vous pouvez rencontrer l'erreur « og: Les propriétés de l'image ne sont pas encore disponibles ».

Cela signifie qu'il pourrait y avoir un problème avec la résolution de votre image en vedette. Si la taille de votre image est inférieure à 200×200, cela ne fonctionnera pas du tout.

Idéalement, les images que vous définissez pour vos extraits enrichis de médias sociaux doivent avoir une largeur de 1080 pixels ou plus. Les grandes images en vedette sont non seulement plus belles, mais elles peuvent également aider à attirer l'attention sur votre contenu sur les réseaux sociaux :

Si vous voulez en savoir plus sur les images et la balise og:image , il y a un autre article sur le blog Elegant Themes. En résumé, si le débogueur Facebook renvoie une erreur liée à la taille de votre image, vous pouvez généralement la corriger en utilisant l'une de ces deux approches :

1. Mettez à jour l'image vedette de la page avec une version à plus haute résolution (et tenez-vous-en à l'utilisation d'images de haute qualité à partir de maintenant !).
2. Utilisez Yoast SEO pour indiquer un fichier image différent dans votre balise og:image .

Pour Yoast SEO, vous pouvez trouver la possibilité de modifier votre « image Facebook » sous l'onglet Social pour la publication ou la page que vous souhaitez mettre à jour :

Une fois que vous avez mis à jour votre image ou la balise correspondante, utilisez le bouton Scrape Again dans le débogueur Facebook. L'avertissement "og:image properties are not yet available" devrait disparaître et votre image devrait s'afficher correctement.

3. Ajoutez la propriété fb:app_id manquante à votre site Web

Revenons à un avertissement présenté plus tôt dans l'article :

Cet avertissement signifie qu'il n'y a pas d'ID d'application Facebook associé à votre site Web. Vous n'avez pas besoin d' un identifiant d'application pour partager votre contenu sur les réseaux sociaux, mais cela vous permet d'accéder à Facebook Insights.

Étant donné que Facebook Insights peut vous aider à améliorer vos efforts marketing et à mesurer les performances de publication, cela vaut la peine d'un peu de temps d'installation. Si vous souhaitez accéder à ces analyses, vous devrez générer un identifiant d'application Facebook pour votre site Web.

Une fois que vous avez l'ID de l'application, vous pouvez utiliser Yoast SEO pour l'ajouter à vos pages à l'aide de la propriété fb:app_id . Pour cela, rendez-vous dans l'onglet SEO > Social > Facebook de votre site et recherchez le champ Facebook App ID :

Ajoutez votre ID d'application, enregistrez les modifications apportées aux paramètres du plugin et vous êtes prêt à partir. À partir de maintenant, le débogueur Facebook ne devrait plus renvoyer d'erreurs liées à une propriété fb:app_id manquante.

Conclusion

Le débogueur Facebook est remarquablement simple à utiliser. Cependant, certaines erreurs que vous pourriez rencontrer sont difficiles à comprendre sans une compréhension de base des balises OpenGraph. De manière générale, si vous utilisez un plugin tel que Yoast SEO, vous n'aurez pas à vous soucier de la configuration manuelle des balises.

Avec le débogueur Facebook, vous pouvez rapidement résoudre les erreurs OpenGraph en :

1. Grattage d'une URL à nouveau pour mettre à jour les images associées.
2. Correction de l'erreur « og: les propriétés de l'image ne sont pas encore disponibles ».
3. Ajout de la propriété fb:app_id manquante à votre site Web.

Vous avez des questions sur l'utilisation du débogueur Facebook ? Parlons-en dans la section commentaires ci-dessous!

Image miniature de l'article par Sergey Targasov / shutterstock.com.