Balises Meta Open Graph - Ce que tu dois savoir

Tu veux que tes publications sur les réseaux sociaux soient remarquées ?

Chaque jour, plus de 4 millions d'articles de blog sont rédigés, il est donc crucial de partager ton travail sur les réseaux sociaux. Open Graph est l'un des composants les plus importants pour atteindre un public plus large.

Tout le monde ne connaît pas l'importance d'Open Graph. Qu'est-ce que c'est au juste ? Comment cela peut-il t'aider à te faire remarquer ?

Qu'est-ce qu'Open Graph ?

« Les balises meta Open Graph, tout comme les meta descriptions et les titres, régissent la façon dont les URL sont affichées lorsqu'elles sont partagées sur les réseaux sociaux. »

Il est plus simple de définir le contenu des pages sur les sites de réseaux sociaux grâce au projet Open Graph de Facebook, qui vise à standardiser les informations sociales sur les sites web.

Ces balises fournissent aux services de réseaux sociaux des informations telles que le titre de la page, sa description et l'image mise en avant, dans la section d'en-tête d'une page web. Ce processus préserve la cohérence et l'authenticité des informations affichées.

Pourquoi utiliser Open Graph ?

Open Graph est pris en charge par divers réseaux sociaux tels que :

• Facebook ;
• Twitter/X ;
• Pinterest ;
• Viber ;
• Telegram ;
• WhatsApp.

Selon Google, le protocole améliore les « blocs de contenu recommandés ».

Que se passe-t-il si Open Graph n'est pas utilisé ?

Comme Facebook ne sait pas quoi afficher dans l'aperçu, il peut utiliser n'importe quelle image qu'il trouve (il peut même prendre une bannière publicitaire ou quelque chose de ton en-tête).

Par conséquent, Facebook est incapable de déterminer quelles sections de l'aperçu afficher.

• Open Graph crée des aperçus pour les sites web liés aux réseaux sociaux.
• Les balises Open Graph aident les utilisateurs à trouver du contenu dans les fils sociaux, ce qui entraîne une augmentation des visites sur le site.

Plus ton contenu apparaît en haut de la page de ton site web lorsque les visiteurs défilent, plus il reçoit d'attention. Cela permet aux utilisateurs d'obtenir un aperçu avant de cliquer.

Utilise les balises OG pour aider les gens à trouver ton contenu sur Facebook et d'autres plateformes de réseaux sociaux.

Les éléments meta OG sont utilisés pour créer des extraits lorsque des URL sont partagées dans des conversations privées sur les sites qui utilisent le protocole.

L'importance du protocole Open Graph pour ton entreprise

Ce type d'interaction est simplifié par le protocole Open Graph de Facebook. Le balisage Open Graph est une méthode d'organisation et de suivi des données d'aperçu. Il te donne un contrôle total sur la façon dont ton contenu est affiché sur les réseaux sociaux autres que les tiens.

Pour faciliter l'intégration, des objets graphiques riches ont été créés, partageant l'ensemble standard de caractéristiques de Facebook. Facebook contrôle le flux d'informations provenant de sources externes (ou aimées, etc.). Ces informations sont fournies par les balises meta Open Graph lorsqu'elles traversent l'en-tête d'un site web.

Étant donné que de nombreuses personnes accèdent à une page via les réseaux sociaux, les balises Open Graph sont plus vitales que jamais. Le CTR peut augmenter lorsque la recherche est améliorée. Open Graph facilite le processus de partage sur les réseaux sociaux. Open Graph est largement pris en charge sur les sites de réseaux sociaux. Les balises Open Graph de Twitter/X en sont un bon exemple ; Twitter/X prend en charge Open Graph.

Qu'est-ce que cela signifie exactement ?

Pourquoi se donner la peine d'étiqueter ton contenu côté serveur avec Open Graph ? Y a-t-il une chance que les balises supplémentaires améliorent les performances de ton site web et attirent plus de visiteurs ? Voici quelques-unes des raisons pour lesquelles nous pensons qu'Open Graph peut faire une énorme différence.

La plupart des réseaux sociaux importants utilisent les balises Open Graph

Si tu n'as pas le temps d'apprendre le HTML, tu peux plutôt utiliser les balises Open Graph de Facebook. Tu peux utiliser ces balises pour personnaliser les noms, les descriptions et les photos qui apparaissent sur tous les principaux sites de réseaux sociaux.

Les balises Open Graph sont bien destinées aux réseaux sociaux

Open Graph a été conçu pour afficher des extraits d'informations au sein du réseau social. Il organise les informations de manière à dépasser le simple partage d'une page web.

Image optimisée

Tu peux utiliser les balises Open Graph pour spécifier quelle image doit apparaître dans ton aperçu social. L'option par défaut n'a pas besoin d'être choisie. Les gens sont plus enclins à cliquer sur les liens vers ton article de blog ou ton site web s'ils ont une belle apparence.

Il s'agit d'aperçus sociaux, pas d'aperçus de recherche

L'optimisation pour les moteurs de recherche (SEO) et le marketing des réseaux sociaux sont tous deux cruciaux, mais ils ont des exigences distinctes. Les composants Open Graph ont résolu un ancien problème de SEO : le fait que les aperçus des publications sur les réseaux sociaux avaient des titres et des descriptions peu attrayants.

Le titre de la page, les meta descriptions, ainsi que les balises Open Graph de titre, description, URL et image doivent tous être uniques pour que le contenu soit optimisé pour les moteurs de recherche et les réseaux sociaux.

Tu as le contrôle sur ton contenu

Que tu publies ton contenu toi-même ou que quelqu'un d'autre le fasse, tu as un contrôle total sur la façon dont il apparaîtra sur les réseaux sociaux.

Même si tu personnalises chaque publication sur les réseaux sociaux, la majorité de tes clients ignoreront l'aperçu. Les visiteurs qui choisissent de partager ton contenu le feront avec une image, un titre et une description bien choisis si tes balises Open Graph sont aussi excellentes que possible. C'est très important car tu as un contrôle total sur les informations diffusées concernant ton entreprise.

Types de balises Open Graph

Les balises Open Graph telles que og:title, og:image, og:type et og:url permettent aux plateformes de réseaux sociaux de visualiser tes informations. Tu dois utiliser ces balises essentielles, mais tu peux aussi en utiliser d'autres.

Une capture d'écran Facebook contenant des liens vers les composants og:image, og:url, og:title et og:description.

og:site_name

La balise og:site_name doit contenir le domaine où ton contenu peut être trouvé. En conséquence, elle remplace le nom de la marque, qui aurait été dans le meta title (et serait donc interdit dans la balise og:title).

La balise og:site_name doit inclure le nom de ton site ou de ta marque, tandis que la balise og:title doit contenir le titre de ton article.

Code og:site_name <meta property="og:site_name" content="Your Site Name" />

Utilise la même balise de nom de site sur l'ensemble de ton site web.

og:title

La balise og:title est suggérée pour définir le titre de la page. C'est similaire à la façon dont les meta titles sont utilisés en SEO. Lorsque tu utilises un meta title existant, assure-toi de garder le champ og:title exempt de tout contenu spécifique à ta marque ou ton site web.

Code og:title <meta property="og:title" content="Title" />

Cette balise doit apparaître sur toute page de ton site web qu'un utilisateur pourrait vouloir partager sur Facebook, Twitter/X ou un autre site de réseau social.

Garde le titre entre 40 et 50 caractères ; sinon, il sera tronqué.

Si tu veux que plus de gens visitent ton site web, le titre doit faire plus que simplement le décrire.

Contrairement aux meta titles des moteurs de recherche, tu ne dois pas inclure ton nom de domaine ou toute autre information qui pourrait être utilisée pour t'identifier.

og:type

Utilise la balise og:type pour spécifier le type de contenu soumis. Cela informe le site de réseau social sur le type de contenu que tu partages, comme un article de blog, une page web, une vidéo ou un fichier audio.

Code og:type <meta property="og:type" content="article" />

Utilise le type d'objet « article » pour les informations qui nécessitent une explication, comme les articles de blog.

Ajoute le type « website » aux autres pages du site web.

Tu dois utiliser le bon format de fichier si tu souhaites transférer un fichier qui contient à la fois du texte et de l'audio ou de la vidéo. Cette page contient une liste de toutes les catégories d'objets.

og:locale

La balise og:locale fournit des informations sur la langue dans laquelle le contenu transféré est rédigé. Les utilisateurs des sites de réseaux sociaux doivent être informés que le contenu publié sur les sites web peut être consulté dans plusieurs langues.

Code og:locale <meta property="og:locale" content="en_GB" />

Étant donné que Facebook suppose que tout ce qui ne possède pas de balise og:locale est rédigé en anglais américain, si tu gères un site web aux États-Unis entièrement composé de contenu en anglais, tu es libre d'ignorer cette balise (en_US).

Si le contenu que tu fournis est rédigé dans une langue autre que l'anglais américain, assure-toi d'utiliser la balise OG correcte.

og:url

Utilise simplement la balise og:url pour spécifier où tu souhaites publier le contenu.

Code og:url <meta property="og:url" content="https://www.yourdomain.com/title.html" />

Cette balise doit fournir l'URL canonique de la page.

og:description

La déclaration incluse dans une balise og:description doit être succincte, simple et aussi engageante que possible afin d'encourager les lecteurs à visiter un site web.

Tu es libre de réutiliser l'information tant qu'elle est pertinente, étant donné que cette balise est similaire à celle utilisée par les moteurs de recherche.

Code og:description <meta property="og:description" content="Your description." />

Il serait utile de garder ta description entre 50 et 100 caractères. Les publications Facebook devraient contenir entre deux et quatre mots au maximum ; les publications de plus de quatre mots sont plus susceptibles d'être supprimées.

Pour obtenir le maximum de clics et d'attention pour le contenu que tu fournis, la description que tu proposes doit être aussi détaillée et convaincante que possible.

og:image

Indique l'URL de l'image à utiliser dans l'extrait social à l'aide de l'élément og:image. Utilise une image à la fois intrigante et directement pertinente par rapport au contenu de l'article pour augmenter la probabilité que les gens cliquent sur ton site web.

Cet élément OG fonctionne de manière similaire au schema markup d'image, qui est utilisé par les moteurs de recherche pour fournir des résultats enrichis.

Code og:image <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png" />

Si tu veux que les pages partageables de ton site web soient mieux classées en SEO d'image, utilise des photos innovantes qui correspondent à ton branding. Même si une page n'est pas susceptible d'être partagée fréquemment, la marquer avec ton logo est une bonne idée au cas où quelqu'un la partagerait à l'avenir.

Pour éviter d'apparaître pixélisé ou de mauvaise qualité, ton illustration originale doit avoir un rapport d'aspect de 1.91:1 et une résolution d'au moins 1200 par 630 pixels.

Les balises og:image:width et og:image:height garantissent que les images précédemment partagées apparaissent correctement. Installe Yoast sur ton site WordPress si tu ne l'as pas déjà fait pour qu'elles soient ajoutées automatiquement. Si tu ne l'as pas encore fait, voici le code :

<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />

Ajouter Open Graph à WordPress

L'ajout de balises OG à WordPress est le moyen le plus simple, le plus courant et le plus facile de le faire avec le plugin Yoast SEO. Ce plugin devrait déjà être installé si ton site est configuré de manière à ce que les moteurs de recherche puissent facilement le trouver.

Mets à jour la page ou l'article où Open Graph doit être inséré en utilisant l'option « social » de Yoast SEO.

Remplis les champs og:image, og:title et og:description dans l'accordéon Facebook.

Yoast configurera ta balise og:url, ta carte Twitter/X et les tailles d'image pour toi. Si tu n'indiques pas à Yoast d'utiliser une image spécifique, il utilisera l'image principale de l'article.

Lorsque ton site web est partagé, aucune image n'est affichée par défaut. Tu peux modifier cela en fournissant une capture d'écran de l'ensemble du site. Cette erreur se produit lorsqu'une URL d'image n'a pas la balise og:image.

Sur la page des paramètres principaux de Yoast, tu peux sélectionner l'og:image pour l'ensemble du site.

Ajouter des balises OG à ton blog WordPress est très facile. Il te suffit d'aller à :

Barre latérale WordPress : Yoast>Social>Facebook.

Active l'interrupteur, puis enregistre l'image existante. Nous pensons que tu devrais choisir un logo. Tu peux également faire la même chose pour Twitter/X et Pinterest.

Ajouter Open Graph manuellement

Si tu sais coder et que tu n'utilises pas l'un des systèmes précédents, les balises OG sont simples à installer.

Tu peux copier-coller le contenu ci-dessous sur ton site web, mais merci de le modifier pour l'adapter à tes besoins.

<meta property="og:site_name" content="INSERT SITE NAME" /> <meta property="og:title" content="INSERT TITLE" /> <meta property="og:description" content="INSERT DESCRIPTION" /> <meta property="og:url" content="INSERT URL" /> <meta property="og:type" content="INSERT TYPE" /> <meta property="og:image" content="INSERT IMAGE URL" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="INSERT IMAGE URL" />

Tester tes balises meta Open Graph

Supposons que tu aies compris comment inclure un Open Graph sur ton site web.

Si ton site web est correctement classifié, il devrait apparaître excellent lorsqu'il est partagé sur les réseaux sociaux. Teste toujours ton travail avant de le rendre public.

Avant de partager une URL, vérifie que tes balises OG sont bien extraites et affichées correctement.

Ces outils peuvent être utiles pour tester tes balises OG :

• Validateur de Rich Pins Pinterest
• Validateur de cartes Twitter/X
• Débogueur de partage Facebook
• Inspecteur de publications LinkedIn

Saisis simplement une URL dans l'un de ces services pour obtenir les balises meta originales. Lorsque tu la partages, tu auras une idée de son apparence pour les autres.

Examine l'image, le titre et la description de l'aperçu avant de continuer. Tu peux recevoir des alertes concernant des balises dont tu n'as pas besoin, que tu peux ajouter ou ignorer.

Si le test d'URL échoue, tu devrais réessayer avec une balise différente. Vérifie que chaque outil est opérationnel en visitant son URL. Tu pourras en discuter une fois que ce sera terminé.

Verdict

Il est essentiel de garder le contrôle sur ce que tu partages sur les réseaux sociaux. Le trafic et les taux de conversion augmentent lorsque des éléments riches sont affichés dans Open Graph. Commence par un seul article de blog. Une fois que tu auras vu le résultat, il sera beaucoup plus facile d'appliquer les balises Open Graph dans tes prochains articles à l'avenir.

Questions fréquemment posées