Retour au blog
Vous êtes-vous déjà demandé pourquoi vos liens partagés sur Facebook ou Twitter avaient parfois une apparence bizarre ? Savez-vous comment influencer l’apparence de vos articles de blog partagés sur ces réseaux sociaux ?
Si vous n’êtes pas sûr d’avoir tout fait pour optimiser les informations de votre article de blog ou de votre page lorsqu’elle s’affiche sur Facebook et Twitter, lisez la suite. Nous allons vous montrer comment l’utilisation des bonnes balises social media (social media tags) peut vous aider à améliorer le look & feel de vos aperçus de posts.
Lorsque vous partagez un lien vers un article, vous voulez que votre post soit attrayant une fois publié sur les réseaux sociaux. Vous souhaitez qu’il contienne une image de qualité, le bon titre, la bonne description et l’URL correcte. Facebook, Twitter et les autres plateformes social media récupèrent ces paramètres directement depuis votre site web.
Vous pouvez contrôler ce qu’ils extraient du post en incluant des balises meta (par exemple, les balises open graph) dans le code HTML de vos pages.
Si les balises meta Facebook (= balises meta Open Graph) sont présentes, c’est vous qui déterminez ce qui s’affiche dans le post Facebook. Si vous n’incluez pas ces méta-propriétés Open Graph (og), Facebook affichera quand même des informations sur votre article, mais probablement pas comme vous le souhaiteriez. Cela fonctionne de manière analogue avec les balises meta Twitter. Voyons comment utiliser ces balises meta pour le partage de liens sur Facebook.
Partage de contenu web sur Facebook
Facebook est une excellente plateforme pour partager votre nouveau contenu. Créer un nouveau post à partir d’un article de votre site est aussi simple que d’insérer le lien dans l’outil de création de publication Facebook.
Examinons ce processus. Nous utiliserons notre article sur la stratégie marketing Facebook comme exemple.
Après avoir inséré l’URL dans le champ de publication, Facebook extrait les données de l’URL cible et crée pour nous un post bien formaté. Le format est instantanément affiché dans l’aperçu, aussi bien pour la vue ordinateur que mobile. Si vous utilisez Kontentino pour gérer votre contenu social media, l’aperçu est instantanément disponible dans votre calendrier Kontentino.
Comprendre les balises meta dans le code HTML de la page
Méta-propriétés pour les moteurs de recherche
Tout en haut, nous pouvons voir plusieurs propriétés définissant les paramètres de cet article, aussi appelées balises meta ou méta-propriétés. Certaines d’entre elles sont utilisées par les moteurs de recherche pour comprendre le contenu du site web en fournissant des informations supplémentaires qui ne sont pas affichées sur la page du post elle-même. Celles-ci incluent par exemple des balises telles que :
- Meta title – <title>
- Meta description – meta name=”description”
- Robots – meta name=”robots”
L’image ci-dessous montre le code HTML de ce post Kontentino. Vous pouvez voir ces balises meta marquées en vert.
Identification des balises meta dans le code HTML du post Ciblage des audiendes Facebook Ads : Le guide ultime
Astuce rapide : Vous ne savez pas comment afficher le code HTML de votre site ? Appuyez simplement sur CTRL+U dans votre navigateur sous Windows ou Option + Command + U sur Mac.
Grâce à ces balises meta, les moteurs de recherche savent que l’indexation de cette page web (post) et ses paramètres sont réglés sur « follow » (dofollow). Le meta title saisi et la meta description sont utilisés par les moteurs de recherche pour afficher le lien vers ce post dans leurs résultats (sur la page de résultats de recherche – SERP). Comme vous pouvez le voir, les propriétés title et description sont définies ainsi :
- Meta title : ‘Facebook Ads Target Audiences 101: The Ultimate Guide | Kontentino Blog – Simplifying Social Media Approval Workflow’
- Meta description : ‘Find out how to reach the right people with Facebook Ads target audiences.’
Nous savons que ces balises n’ont pas une longueur optimale, mais nous ne sommes pas là pour parler SEO ou Google. Passons directement aux balises meta ci-dessous, qui contiennent le texte ‘og:’.
Ces balises ou propriétés sont parfois appelées balises meta sociales, social media meta tags ou simplement propriétés meta og.
Comme vous pouvez le constater, il y a 7 propriétés meta og différentes dans le code HTML de notre article de blog. Ce sont :
- og: locale
- og: type
- og: title
- og: description
- og: url
- og: site_name
- og: image
De plus, il existe d’autres balises meta Facebook – les propriétés og: associées à la balise og:image qui incluent :
- og:image:width
- og:image:height
- og:image:alt
- og:image:type
Balises meta Twitter
En dehors de celles-ci, vous trouverez également des balises meta spéciales pour Twitter dans le code HTML, telles que :
- meta name=”twitter:card”
- meta name=”twitter:title”
- meta name=”twitter:description”
- meta name=”twitter:site”
- meta name=”twitter:image”
Revenons à notre exemple de partage de post Facebook. Nous devons comprendre, décoder et éditer le contenu des propriétés meta ‘og:’ pour influencer l’apparence de notre nouveau post FB avec le lien intégré.
Lisez la suite pour en savoir plus sur : i) Le décodage des propriétés meta og: ; ii) Les directives pour rédiger le contenu des balises meta sociales ; et iii) L’édition du contenu de ces propriétés dans le CMS de votre site web.
Publication Facebook et Twitter avec Kontentino
Inscrivez-vous pour un essai de 14 jours de Kontentino et maîtrisez les balises social media avec nous. Visualisez l’aperçu du post dans Kontentino avant de le publier.
Le ‘og:’ dans le code HTML de votre site signifie ‘Open Graph’. C’est l’acronyme d’un protocole Open Graph qui vous permet d’indiquer à Facebook comment votre contenu partagé doit s’afficher. Comme nous l’avons déjà mentionné (et comme Facebook l’indique dans ses instructions pour les développeurs), ‘sans ces balises Open Graph, le Crawler Facebook utilise des heuristiques internes pour deviner au mieux le titre, la description et l’image d’aperçu de votre contenu.’ Définir ces informations explicitement avec les balises Open Graph garantit la meilleure qualité de vos posts sur Facebook.
Comme vous pouvez le voir, ces balises meta og sont extrêmement importantes pour Facebook. Si vous n’en avez jamais entendu parler ou si vous pensez qu’elles sont nouvelles, vous serez surpris d’apprendre que le protocole Open Graph a été lancé par Facebook il y a déjà plus de 10 ans (en 2010). Aujourd’hui, cependant, il est géré par l’Open Web Foundation.
Le protocole Open Graph s’appuie sur diverses technologies et schémas existants pour aider les développeurs à représenter richement n’importe quelle page web au sein du graphe social. Assez d’histoire et de définitions, entrons dans les détails des différentes balises og. Nous nous concentrerons sur les 4 principales – celles qui sont responsables de l’apparence de notre post intégré sur Facebook : og:title, og:image, og:url, et og:description.
La propriété meta og:title
Cette méta-propriété est l’une des quatre métadonnées de base du protocole Open Graph (à savoir : og:title, og:type, og:image, og:url). En spécifiant le og:title, nous définissons le titre de notre objet (ici, un article de blog) tel qu’il doit apparaître dans le graphe social. Facebook extraira alors ce og:title et l’affichera comme titre du post (juste sous l’URL dans notre première image).
La propriété meta og:image
Nous insérons ici l’URL de l’image qui doit représenter notre objet (article) dans le graphe social. Dans ce cas, le lien vers l’image mise en avant (featured image) doit être inclus dans cette propriété. En spécifiant l’og:image, nous nous assurons que c’est bien cette image qui s’affiche sur Facebook.
Sinon, Facebook pourrait choisir une autre image de notre post ; cela pourrait être l’image principale affichée dans notre liste d’articles ou n’importe quelle autre image apparaissant dans le corps du texte.
La propriété meta og:url
Cette balise contient l’URL canonique de notre objet qui sera utilisée comme son ID permanent dans le graphe social. Dans notre cas, l’URL dans og:url est https://www.kontentino.com/blog/facebook-ads-target-audiences/.
La propriété meta og:description
Enfin, spécifier la balise og:description devrait nous aider à faire afficher la description lors du partage de ce post. Comme vous pouvez le voir dans l’image du code HTML, c’est : ‘Find out how to reach the right people with Facebook Ads target audiences.’
Balises meta Twitter
Les balises meta Twitter fonctionnent de manière analogue aux balises Open Graph et spécifient le contenu que Twitter extraira lors du partage d’une page web sur cette plateforme.
Maîtriser les balises meta og
Facebook et Twitter proposent des directives sur la façon d’utiliser les balises mentionnées ci-dessus. Dans notre tableau ci-dessous, nous résumons les informations de base les concernant ainsi que les recommandations respectives.
Maintenant que nous comprenons les différents types de balises sociales et leurs implications, il est temps de plonger dans le CMS de notre site web pour voir où et comment les éditer. Nous vous montrerons des exemples issus du CMS WordPress, qui est de loin le CMS n°1 dans le monde.
Si vous utilisez un plugin SEO, tel que Yoast SEO, Rank Math, All in One SEO ou similaire, ceux-ci seront très utiles pour éditer ces métadonnées sociales. Presque tous les bons plugins SEO vous permettront de modifier les balises pour Facebook et Twitter séparément. Dans le texte suivant, nous vous montrerons comment les configurer dans Rank Math.
Nous commençons par éditer l’article et cliquer sur l’onglet SEO. Ensuite, il faut ouvrir l’onglet ‘social’.
Trouver l’endroit où éditer les balises social media dans votre CMS
Rank Math contient un outil de prévisualisation en direct vous permettant de voir comment les modifications impacteraient l’intégration de votre post sur Facebook ou Twitter. Cliquez sur le bouton ‘Preview & Edit Social Media’.
Éditer les balises meta Facebook
Tout d’abord, nous verrons l’aperçu du post Facebook et en dessous, les balises meta qui peuvent être ajustées.
Aperçu du partage de lien généré par votre CMS – dans ce cas, le plugin Rank Math
Dans notre cas, les propriétés og:image, og:title et og:description n’ont pas encore été spécifiées. Comme vous pouvez le voir, le simulateur (éditeur d’extrait) affiche les valeurs des métadonnées de base utilisées pour les moteurs de recherche.
Édition des balises social media : les tags og:title et og:description de votre article de blog
Dans la toute première image de cet article, nous pouvons voir que le titre manquant est le point le plus problématique. Cependant, nous allons remplir à la fois le titre et la description.
Ensuite, après avoir enregistré les modifications, nous devons regarder à quoi ressemblera le post mis à jour lorsqu’il sera partagé sur Facebook.
Nouvelles balises social media renseignées pour le post
Bien que Facebook recommande d’utiliser 2 à 4 phrases pour la balise og:description, nous nous contenterons d’une phrase pour cette démonstration. Nous voulons voir si Facebook l’affiche, grâce à l’espace libéré sur la carte en réduisant la longueur du paramètre og:title.
Avant de vérifier le résultat, nous devrions mentionner d’autres solutions vous permettant d’éditer les paramètres Open Graph dans WordPress. Si vous n’utilisez pas de plugin SEO, vous pouvez utiliser un plugin Open Graph dédié tel que OG ou insérer manuellement les métadonnées sociales dans le code HTML de votre page. Cette dernière option sera utile pour d’autres CMS également. WIX a une solution intégrée pour insérer des propriétés meta og, tout comme les autres principaux systèmes de gestion de contenu.
Une fois que vous avez fini d’éditer les balises meta Facebook ou Twitter, il est temps d’essayer de partager votre post sur ces plateformes. Voyons à quoi ressemblerait notre post sur Facebook maintenant. Nous pouvons utiliser le Facebook Debugger (officiellement appelé Facebook Sharing Debugger, parfois appelé outil de prévisualisation FB) pour examiner les posts modifiés sur Facebook. Avant de le faire, n’oubliez pas de vider votre cache ou de supprimer les fichiers temporaires Safari (si vous utilisez ce navigateur) s’ils n’ont pas été effacés automatiquement après l’enregistrement du post.
Balises meta Open Graph dans le débogueur de partage Facebook
Aperçu du lien dans le Facebook Sharing Debugger montrant vos balises social media en action
Comme vous pouvez le voir ci-dessus, tout semble correct et les modifications apportées aux balises meta Facebook ont bien été prises en compte.
Idées reçues courantes sur les balises social media
Mythe 1 : Les balises social media ne servent que pour le SEO.
Les balises meta ne sont pas uniquement destinées aux moteurs de recherche—elles jouent un rôle critique dans la façon dont votre contenu s’affiche sur les réseaux sociaux. Les balises meta comme og:image et og:title optimisent spécifiquement vos posts pour des plateformes comme Facebook et Twitter, améliorant ainsi l’engagement.
Mythe 2 : Toutes les images s’affichent parfaitement sur les réseaux sociaux.
Toutes les images de votre article ne s’afficheront pas correctement une fois partagées. Sans spécifier og:image ou utiliser une Twitter card, les plateformes sociales peuvent sélectionner une image générique ou mal formater le visuel, affectant l’apparence de votre post.
Mythe 3 : Les balises meta ne sont importantes que pour les sites ‘one-page’.
Les balises meta sont essentielles pour les sites comportant plusieurs pages. Que votre site contienne des blogs ou des listes de produits, l’utilisation de og:type et d’autres balises meta assure un affichage cohérent et optimisé sur les multiples plateformes sociales.
Mythe 4 : Vous pouvez compter sur les réseaux sociaux pour afficher votre contenu correctement.
Compter sur Facebook ou Twitter pour formater automatiquement votre post est risqué – c’est le moins qu’on puisse dire. Sans définir manuellement les balises clés comme og:url et og:description, les plateformes sociales peuvent extraire des données incorrectes ou incomplètes, impactant l’attrait visuel de votre contenu.
Mythe 5 : Les balises sociales sont difficiles à implémenter sans compétences en code.
Les plugins WordPress et outils comme Rank Math simplifient le processus d’ajout et de gestion des balises meta. Vous n’avez pas besoin d’être développeur web pour garantir que vos posts sont optimisés pour le partage social.
Mythe 6 : Les Twitter cards ne fonctionnent qu’avec des images statiques.
Les Twitter cards prennent en charge divers formats médias, y compris les formats GIF et les vidéos. Vous pouvez joindre des photos ou d’autres médias à votre carte, rendant vos posts plus dynamiques et engageants sur ce réseau social.
Mythe 7 : Les balises meta ne concernent que votre propre contenu.
Les balises meta ne concernent pas uniquement votre propre site web ; elles aident aussi lorsque votre contenu est partagé sur d’autres sites. Définir correctement meta property= »og:image » et meta property= »og:title » garantit que votre contenu a l’air professionnel, peu importe où il est partagé.
Conclusion
Nous espérons que cet article vous a aidé à comprendre les propriétés meta og et leur importance pour le partage de liens sur Facebook et Twitter. Si vous souhaitez faire passer votre marketing social media au niveau supérieur, assurez-vous d’essayer Kontentino (si ce n’est pas déjà fait). C’est un outil facile à utiliser pour créer du contenu social media, facilitant la collaboration d’équipe et l’approbation de contenu.
Notre Calendrier de contenu intègre la fonctionnalité d’aperçu, de sorte que vous n’avez pas besoin d’aller ailleurs pour voir à quoi ressemblera votre nouveau post avec lien, économisant ainsi un temps précieux pour vérifier et optimiser vos balises meta.
Et quoi de mieux que de définir les balises UTM pour suivre la performance du post dans vos analyses web, programmer une date de publication future ou allouer un budget de boost au post pour toucher une audience plus large ?
FAQ
Qu’est-ce qu’une balise meta social media ?
Une balise meta social media fournit des données cruciales comme les titres, images et descriptions aux plateformes sociales lors du partage de pages web. C’est essentiel pour améliorer l’engagement utilisateur sur les principaux réseaux sociaux.
Quels sont des exemples de balises meta ?
Les exemples incluent meta property= »og:title », meta property= »og:image » et le contenu meta property= »og:url », qui optimisent le partage social sur des plateformes comme Facebook et Twitter, assurant une bonne représentation de votre contenu.
Qu’est-ce que les métadonnées social media ?
Les métadonnées social media incluent des données open graph comme un titre concis, une description et des images de haute qualité, qui améliorent l’apparence des posts sur des plateformes comme Twitter et Facebook.
Que sont les balises (tags) social media ?
Les tags social media sont des identifiants comme les balises twitter card ou les balises og intégrées dans le fichier HTML pour influencer la façon dont les pages web s’affichent lorsqu’elles sont partagées, augmentant ainsi l’exposition sociale.
Comment créer des balises meta ?
Pour créer des balises meta, un développeur web insère quelques lignes de code dans le fichier HTML d’une page web, incluant des paramètres tels que la balise titre, la balise description et une image unique représentant le contenu.
Quels réseaux sociaux utilisent les meta ?
Les balises meta sont utilisées par les principales plateformes comme Facebook, Twitter et LinkedIn pour optimiser l’apparence des pages web et des posts lorsqu’ils sont partagés sur les réseaux, améliorant ainsi l’engagement utilisateur.
Une balise meta est-elle nécessaire ?
Oui, les balises meta sont cruciales pour le marketing en ligne car elles contrôlent l’apparence de votre contenu sur les plateformes sociales, garantissant que la bonne image et le bon titre sont affichés, ce qui augmente les partages et l’engagement.
Comment trouver les balises meta ?
Vous pouvez inspecter le fichier HTML d’un site web pour trouver les balises meta. Des outils comme le Facebook Debugger et d’autres services en ligne vous aident également à visualiser des propriétés meta spécifiques comme og:image ou og:type.
Combien de balises meta devrais-je utiliser ?
Utilisez les balises essentielles comme og:title, og:image, og:url et les balises Twitter card pour optimiser votre exposition sociale. Privilégiez la qualité à la quantité en vous concentrant sur les balises à fort impact pour le partage.
Qu’est-ce qu’une balise meta Facebook ?
Une balise meta Facebook, telle que meta property= »og:title », fait partie du protocole Open Graph. Elle aide à déterminer comment vos pages web ou posts apparaissent sur Facebook, assurant un meilleur engagement utilisateur.
Qu’est-ce que le contenu de la méta-propriété og:title ?
Le contenu de la méta-propriété og:title définit le titre de votre page web tel qu’il apparaît lorsqu’elle est partagée sur des plateformes comme Facebook.
Qu’est-ce que le contenu de la méta-propriété og:image ?
Le contenu de la méta-propriété og:image spécifie l’URL de l’image qui apparaîtra lorsque votre contenu sera partagé sur les plateformes social media.
Qu’est-ce que le contenu de la méta-propriété og:type ?
Le contenu de la méta-propriété og:type définit le type de contenu (ex : article, site web) partagé, aidant les plateformes sociales à le catégoriser et l’afficher correctement.
Qu’est-ce que les métadonnées ? 3 exemples ?
Les exemples de métadonnées incluent la balise description, les variables de session pour les paramètres d’identification utilisateur, et la balise meta property= »og:image », qui aide les plateformes à sélectionner la bonne image pour le partage social.
