Comment personnaliser les balises méta Facebook Open Graph et Twitter Card

Publié: 2023-03-11

Imaginez ceci : vous êtes prêt avec le billet de blog parfait et une image vedette accrocheuse pour l'accompagner. Mais dès que vous la partagez sur Facebook ou Twitter, l'image est recadrée aux mauvais endroits. Pire encore, soit il n'y a pas d'image, soit l'image est si petite qu'il est facile de faire défiler la page, manquant ainsi complètement le message. À un moment donné de nos voyages de blogging, nous avons tous été là.

Une image mal dimensionnée non seulement dilue le message que vous essayez de transmettre à vos abonnés, mais réduit également la possibilité de partage des publications. Même vos fans les plus ardents hésiteront à partager votre contenu (aussi informatif soit-il) s'il n'est pas accompagné d'une image vedette pertinente, optimisée pour la plateforme en question.

Une image vaut mille mots, sans aucun doute, mais si vous ne cherchez pas activement à prendre le contrôle de vos images sur les réseaux sociaux, ceux-ci peuvent s'avérer être de mauvais mots. Alors, comment pouvez-vous éviter cet écueil et optimiser les images de votre blog pour le partage social ?

Les balises méta Open Graph et Twitter Card sont les solutions pour cela.

Que sont les balises méta Open Graph et Twitter Card ?

Introduites par Facebook en 2010, les balises Open Graph sont un ensemble de balises méta utilisées pour faciliter la transformation de n'importe quelle page Web en un objet riche dans un graphe social en vous permettant, en tant qu'éditeur de contenu, de contrôler les éléments qui s'affichent lorsque vous partagez votre page sur Facebook. Depuis son introduction, le protocole Open Graph a également été adopté par LinkedIn et Pinterest. Twitter utilise un protocole utilisant des cartes Twitter, dont la fonction est similaire à l'Open Graph de Facebook.

Si vous visitez un site où Open Graph et Twitter Cards sont activés et que vous visualisez la source du contenu, les balises méta peuvent ressembler à l'exemple ci-dessous (avec les informations de « contenu » remplacées de manière appropriée) :

facebook-open-graph-twitter-card-source

Lorsqu'elles sont incluses, les balises Open Graph et Twitter Card n'ont pas d'impact direct sur le référencement de la page, mais elles ont un impact sur la façon dont la page s'affiche sur les plateformes sociales et, plus important encore, donnent à l'éditeur un niveau de contrôle sur les éléments à afficher lorsque leurs pages sont partagées sur médias sociaux par n'importe qui.

Comment implémenter les balises Open Graph et Twitter Card sur votre site WordPress

Jusqu'ici, tout va bien. Mais la question qui se pose ensuite est de savoir comment manipuler les balises méta Open Graph et Twitter Card pour obtenir les meilleurs résultats d'affichage pour votre publication sur les réseaux sociaux. La bonne nouvelle est qu'il existe plusieurs plugins parmi lesquels choisir pour implémenter ces balises méta. Dans cet article, je me concentrerai principalement sur les fonctionnalités de balises méta premium du plug-in Yoast SEO, mais je parlerai ensuite de quelques autres façons de procéder.

Yoast SEO pour WordPress

Si vous n'avez pas déjà installé la version premium Yoast SEO sur votre site WordPress, c'est la première étape pour optimiser les images de votre blog pour les réseaux sociaux. Ce plugin facilite l'ajout de balises méta Facebook Open Graph et Twitter Card. Voici un guide étape par étape sur la façon d'activer les balises méta sociales à l'aide du plugin Yoast SEO.

1. Configurer Yoast SEO

Accédez à l'onglet "Social" du plugin Yoast SEO à partir du tableau de bord de votre site WordPress. Remplissez les détails associés aux plateformes de médias sociaux de votre site dans l'onglet "Comptes".

yost-seo-paramètres-du-compte-social

Activez les métadonnées Open Graph sur l'onglet "Facebook" et renseignez les autres détails pertinents selon les besoins sur la page.

yoast-seo-facebook-paramètres

Activez les métadonnées de la carte Twitter dans l'onglet "Twitter" et remplissez les informations pertinentes requises sur la page.

Remarque : Il est préférable d'utiliser "Résumé avec grande image" pour Twitter, car les tweets avec de grandes images obtiennent plus d'engagement que ceux avec de petites images ou sans images. Vos tweets ressembleront alors à ceci :

twitter-résumé-image-exemple

Une fois ces étapes terminées, les balises méta Facebook Open Graph et Twitter Card seront activées sur toutes vos publications. (Il s'agit d'une configuration unique !)

Cependant, les images qui seront sélectionnées pour le partage social par ces balises ne seront toujours pas personnalisées de manière unique pour les plateformes en question. Pour que cela se produise, vous devrez effectuer une étape supplémentaire sur les messages individuels que vous souhaitez partager. (C'est une étape que vous devrez répéter pour chaque nouvel article de blog).

2. Sélectionnez des images spécifiques à partager sur Facebook et Twitter

Lorsque vous faites défiler jusqu'à la section Yoast SEO d'une publication nouvellement créée (ou de toute publication en mode édition), le deuxième onglet de la section Yoast SEO vous permet de sélectionner les détails du partage social. Vous pouvez utiliser cet onglet pour modifier l'image, le titre, la description, etc. de Facebook et de Twitter.

yoast-seo-blog-modifier-paramètres

Et c'est tout! Juste quelques choses à garder à l'esprit :

  1. Yoast suggère une taille d'image en vedette de 1200px sur 630px pour Facebook et de 1024px sur 512px pour Twitter. Par essais et erreurs, j'ai constaté que toute image horizontale avec un rapport largeur/hauteur de 2:1 et une largeur supérieure à 450px fonctionne bien pour Facebook et Twitter. Pour plus d'informations sur la taille des réseaux sociaux, consultez ce guide de Sprout Social et ces directives de Buffer.
  2. Si vous modifiez rétroactivement les images en vedette pour Facebook après avoir déjà partagé votre lien de publication au moins une fois auparavant, vous devez exécuter votre URL via le débogueur de partage Facebook, afin que les anciennes informations mises en cache puissent être actualisées et qu'elles puissent récupérer le nouveau image vedette à partir de là.

Autres plugins WordPress pour optimiser les images des médias sociaux

Si vous n'utilisez pas le plugin Yoast SEO, il existe d'autres plugins WordPress qui peuvent vous aider à faire le travail. Voici quelques autres options de plug-in parmi lesquelles vous pouvez choisir en fonction de vos préférences et de la compatibilité du site :

  • Facebook
  • Pack SEO tout en un
  • Balises Facebook Open Graph, Google+ et Twitter Card
  • Ouvrir graphique

Comment utiliser PHP pour ajouter manuellement des métadonnées Open Graph et Twitter Card à votre thème WordPress

Enfin, si vous recherchez une solution technologique plutôt qu'un plugin, vous pouvez toujours choisir d'ajouter directement les balises méta à votre thème WordPress en incluant manuellement le code PHP nécessaire dans le fichier function.php de votre thème. Voici quelques liens sur la façon dont vous pouvez le faire avec des instructions étape par étape :

  • Comment ajouter des métadonnées Facebook Open Graph dans les thèmes WordPress
  • Comment ajouter des balises Meta Open Graph à WordPress
  • code functions.php pour inclure les balises méta Open Graph

Remarque : vous devrez peut-être personnaliser le code de référence fourni ci-dessus pour l'adapter à la conception du thème de votre site Web particulier.

Une fois que vous avez compris les balises méta qui relient vos publications sur les réseaux sociaux, vous pouvez les faire fonctionner sur votre site WordPress en un rien de temps. Et le retour sur investissement ? Eh bien, vos messages fonctionneront bien mieux sur les réseaux sociaux et vous aurez un bien meilleur contrôle sur leur apparence et ce qu'ils véhiculent, ce qui les rendra à la fois significatifs et partageables.