Les balises Open Graph expliquées, avec générateur en direct | We.Inc
Les quatre balises Open Graph obligatoires, les propriétés d'image, les valeurs de og:type et les balises article, commentées, plus un générateur qui écrit le balisage du head.
Les balises Open Graph expliquées
Les balises Open Graph sont des éléments meta placés dans le head d'une page, qui contrôlent l'apparence d'un lien partagé. Le protocole en exige quatre : og:title, og:type, og:image et og:url. Chacune utilise l'attribut property, par exemple meta property="og:title" content="...". Ajoutez og:description, og:site_name ainsi que la largeur, la hauteur et le texte alternatif de l'image pour de meilleurs aperçus.
Les quatre propriétés obligatoires
Propriété
Ce qu'il faut y mettre
og:title
Le titre tel qu'il doit apparaître dans la carte de partage
og:type
Le type d'objet, comme website ou article
og:image
Une URL complète vers l'image d'aperçu
og:url
L'URL canonique qui identifie la page
Les aperçus de partage reposent sur quelques balises faciles à rater de peu : un chemin d'image relatif, une largeur et une hauteur absentes, ou un titre qui n'existe que dans l'élément title. Remplissez le générateur pour obtenir un balisage correct, puis lisez le rôle de chaque propriété.
Renseignez le titre, la description, l'URL de la page et l'URL de l'image dans le générateur.
Choisissez le type : website pour la plupart des pages, article pour les articles de blog.
Vérifiez la carte d'aperçu approximative, puis copiez les balises générées dans le head de votre page.
Testez la page en ligne avec l'outil de débogage de partage de chaque plateforme, car chaque réseau met les aperçus en cache.
Utilisez des URL https absolues pour og:image et og:url. Les chemins relatifs expliquent souvent un aperçu sans image.
Ajoutez og:image:width et og:image:height pour qu'une application connaisse la forme de l'image grâce aux balises, sans mesurer le fichier.
Rédigez og:image:alt pour les personnes qui utilisent un lecteur d'écran sur les réseaux sociaux.
Quand vous changez l'image, utilisez un nouveau nom de fichier. Les plateformes mettent les images en cache, donc réutiliser l'ancienne URL peut conserver l'image périmée.
Questions fréquentes
Quelle taille pour une image Open Graph ?
Le protocole n'impose pas de taille. 1200 sur 630 pixels est un format paysage très répandu, et c'est la taille utilisée dans les exemples de la documentation Next.js. Éloignez le texte important des bords, car certaines applications recadrent l'image.
Les balises Open Graph aident-elles le SEO ?
Leur rôle est la carte de partage, pas le classement. Un titre et une image clairs peuvent rapporter plus de clics quand votre lien circule dans les messageries et les fils d'actualité. Gardez og:title cohérent avec votre élément title pour que chaque support décrive la page de la même façon.
Pourquoi les balises Open Graph utilisent-elles property et non name ?
Le protocole repose sur RDFa, qui utilise l'attribut property. Les exemples de ogp.me écrivent meta property="og:title". Les balises Twitter card, à l'inverse, utilisent l'attribut name, comme dans meta name="twitter:card".
Ai-je encore besoin des balises Twitter card ?
Ajoutez au moins twitter:card, réglé sur summary_large_image si vous voulez la mise en page avec grande image. Beaucoup d'applications lisent les valeurs og pour le titre, la description et l'image quand les balises twitter correspondantes manquent, mais les règles des plateformes changent, alors testez votre URL en ligne avant de compter sur ce repli.
Une page peut-elle avoir plusieurs og:image ?
Oui. Le protocole autorise les tableaux : répétez la balise og:image, et placez la largeur, la hauteur et le texte alternatif de chaque image juste après l'image qu'ils décrivent. En cas de valeurs contradictoires, le protocole donne la priorité à la première balise en partant du haut.
Les propriétés structurées appartiennent à la balise au-dessus
Des propriétés comme og:image:width décrivent la dernière og:image déclarée avant elles. L'ordre compte : déclarez d'abord l'image, puis sa largeur, sa hauteur, son type et son texte alternatif, puis l'image suivante.
og:image:secure_url est une adresse https supplémentaire pour la même image. Si votre og:image utilise déjà https, vous n'en avez pas besoin.
Les types et leurs balises supplémentaires
website est la valeur par défaut pour les pages qui ne sont pas un type d'objet précis. article donne accès à article:published_time, article:modified_time, article:author, article:section et article:tag.
Le protocole définit aussi book, profile et les groupes music et video. Utilisez-les seulement si la page est vraiment cet objet ; une page produit est généralement website.
Chaque propriété, commentée
Propriétés Open Graph facultatives et structurées
Propriété
Rôle
Exemple de valeur
og:description
Une ou deux phrases sous le titre
Réparation de toiture le jour même partout à Leeds
Les balises obligatoires d'abord, puis la description, le nom du site et le bloc image avec ses propriétés structurées.
Article de blog avec balises article
L'attribut prefix déclare les espaces de noms. Les dates utilisent l'ISO 8601.
Réparation de toiture à Leeds | Northside Roofing
Réparation de fuites le jour même et devis écrits gratuits partout à Leeds.
Couvreur posant des ardoises sur une maison mitoyenne
L'URL de l'image doit être absolue et commencer par https://
L'URL de la page doit être absolue et commencer par https://
og:title est obligatoire
Générateur de balises Open Graph
Remplissez les champs pour générer les balises et une carte de partage approximative. Chaque application dessine sa propre carte, alors prenez l'aperçu comme une indication.