Générateur Open Graph
Quatre balises décident de votre carte
Ce générateur Open Graph écrit le bloc og: qui contrôle l’allure de votre lien dans une messagerie, un fil ou un message. De plus, il signale les quatre propriétés obligatoires et affiche la carte pendant la saisie.
- GratuitPrix
- 4Balises obligatoires
- AucuneInscription
- AucuneEnvois
Générateur Open Graph
Les balises og: qui décident de l’allure d’un lien partagé
Prêt. Les quatre balises obligatoires se cochent à mesure que vous les remplissez.
Ce que contrôle vraiment Open Graph
Collez un lien dans une messagerie et il se passe quelque chose. Une image apparaît, un titre, une ligne de texte et le nom du site.
Cette carte vient des balises de votre élément head. Sans elles, l’application devine, et ce qu’elle devine est en général votre logo et votre menu.
Facebook a publié le protocole en 2010, puis il s’est répandu. Aujourd’hui, LinkedIn, WhatsApp, Slack, Discord, Signal et Telegram lisent tous les quatre mêmes propriétés.
C’est le protocole lui-même qui impose ces quatre-là : og:title, og:type, og:image et og:url. Tout le reste sur cette page est une finition facultative.
L’image fait toute la carte
Une carte avec image prend plusieurs fois la place d’une carte sans image. C’est pourquoi l’image est la balise à soigner en premier.
Utilisez donc 1200 sur 630 pixels, le format 1,91 pour 1 auquel chaque réseau recadre. Ensuite, gardez le fichier sous environ cinq mégaoctets, et utilisez toujours une adresse https absolue.
Le texte dans l’image est rogné sur les petites cartes. Placez plutôt les mots dans og:title, où ils restent lisibles à toute taille.
Property, pas name
Les balises Open Graph utilisent l’attribut property, tandis que les balises Twitter utilisent name. Ainsi, si vous copiez une balise depuis le mauvais exemple, le réseau l’ignore en silence.
La différence vient de RDFa, sur lequel repose Open Graph. Cela ressemble à un détail, pourtant cela explique la moitié des cartes cassées, comme l’expose la référence de l’élément meta.
Ce générateur de balises Open Graph écrit chacune avec le bon attribut, donc cette distinction ne devient jamais votre problème.
Des types au-delà de website
La plupart des pages sont de type website. Un article ajoute un auteur et une date de publication, un produit peut porter un prix, et un profil nomme une personne. Choisissez celui qui correspond, puis ignorez le reste.
Pourquoi votre carte ne se met pas à jour
Les réseaux mettent en cache ce qu’ils lisent, souvent pendant des jours. Vous corrigez une balise, repartagez le lien, et l’ancienne carte revient.
Chaque réseau a un outil de débogage qui force une actualisation, et c’est le seul remède fiable. Facebook, LinkedIn et X en proposent un.
Par conséquent, posez les balises avant un lancement plutôt qu’après. Une carte mise en cache le jour d’une campagne est un problème lent à défaire.
Les descriptions d’une carte se comportent autrement
Une description de recherche est en concurrence avec neuf autres résultats. En revanche, une description de carte rivalise avec tout le fil qui l’entoure, et elle dispose de moins de place.
Tenez-vous à une phrase, car la plupart des réseaux affichent environ deux lignes sur téléphone. Une seconde phrase longue survit rarement.
Dites ce qu’offre le lien, pas ce que contient la page. Aucune recherche ne se cache derrière une carte, donc rien n’indique pourquoi quelqu’un devrait s’y intéresser.
Ensuite, laissez le titre porter l’essentiel. Sur une petite carte, la description disparaît parfois complètement.
Les descriptions d’une carte se comportent autrement
Une description de recherche est en concurrence avec neuf autres résultats. En revanche, une description de carte rivalise avec tout le fil qui l’entoure, et elle dispose de moins de place.
Une seule phrase suffit. La plupart des réseaux affichent environ deux lignes sur téléphone, donc une seconde phrase longue survit rarement.
Dites ce qu’offre le lien, pas ce que contient la page. Aucune recherche ne se cache derrière une carte, donc rien n’indique pourquoi quelqu’un devrait s’y intéresser.
Ensuite, laissez le titre porter l’essentiel. Sur une petite carte, la description disparaît parfois complètement.
Un seul bloc pour tous les réseaux
Twitter se rabat sur les balises og: quand les siennes manquent, et presque tout le reste aussi. Écrivez Open Graph une fois, ajoutez une ligne twitter:card, et c’est fini.
Le générateur Open Graph, étape par étape
Quatre étapes, et le panneau de notes suit les quatre propriétés obligatoires à mesure que vous les remplissez.
- 1
Choisissez le type
Website couvre la plupart des pages. Choisissez article pour un billet de blog, et deux champs supplémentaires apparaissent pour l’auteur et la date.
- 2
Écrivez un titre pour la carte
Jusqu’à 70 caractères s’affichent en entier. Il peut différer du titre de votre page, et il le devrait souvent, car aucune recherche ne se cache derrière une carte.
- 3
Ajoutez l’image et l’adresse
Les deux demandent des adresses https complètes. L’aperçu montre le recadrage 1,91 pour 1, donc vous voyez ce que garde une carte étroite.
- 4
Collez le bloc et relancez la lecture
Placez-le dans votre head, puis passez le lien dans l’outil de débogage de chaque réseau. Sinon, une carte en cache peut rester là pendant des jours.
Ce qui distingue cet outil Open Graph
La plupart des générateurs sortent toutes les propriétés de la spécification. Au contraire, celui-ci écrit ce dont une carte a besoin et nomme ce qui manque.
Il suit les quatre obligatoires
Titre, type, image et url gardent chacun une note jusqu’à ce que vous les remplissiez. Rien d’autre ne prétend être obligatoire.
La carte prévisualisée au fil de la saisie
Vous voyez la forme du recadrage et les longueurs de coupe pendant la saisie, puisque c’est là que la plupart des cartes échouent.
Des attributs corrects partout
Pour og:, on écrit property ; pour twitter:, on écrit name. Les inverser est la cause de carte cassée la plus courante.
Pas de bloc Twitter en double
Twitter lit déjà les balises og:, donc cocher la case n’ajoute que twitter:card et le texte alternatif de l’image. Deux fois la même chose n’aide personne.
Des champs d’article quand il le faut
L’auteur et la date de publication apparaissent pour les articles et restent cachés sinon. Après tout, un formulaire plein de champs inutiles appelle de mauvaises réponses.
Vos fichiers restent dans cet onglet
Des textes de campagne non publiés passent par ici. Comme la page ne récupère rien, aucune adresse ni aucun titre n’atteint un serveur.
Des règles pour des cartes réussies
Les cartes échouent de quelques façons prévisibles. Chaque règle ci-dessous en élimine une.
- Utilisez une adresse d’image https absolue. La plupart des réseaux ignorent les chemins relatifs et le http simple. Le robot n’est pas votre navigateur, et il n’a aucun contexte de page pour les résoudre.
- Faites une image de 1200 sur 630. C’est la taille d’image og vers laquelle chaque réseau recadre. Les images plus petites donnent une petite carte carrée, ou aucune.
- Ne placez pas le message clé dans l’image. Les recadrages coupent les bords, et les petites cartes réduisent tout. Les mots vont dans og:title, où ils restent lisibles.
- Écrivez un titre de carte, pas un titre de page. Un titre de recherche répond à une requête. En revanche, un titre de carte doit fonctionner à froid, dans un fil, à côté de contenus qui se disputent le même regard.
- Faites pointer og:url vers l’adresse canonique. Les partages s’accumulent sur cette adresse. Donc, si elle diffère de votre balise canonical, les compteurs se répartissent entre deux versions d’une même page.
- Ajoutez og:image:alt. Un lecteur d’écran le lit à la place de l’image, et il coûte une ligne. Bien que très peu de sites s’en donnent la peine, c’est une mauvaise raison de s’en passer.
- Relancez la lecture après chaque changement. Les réseaux mettent en cache de façon agressive. Tant que vous ne forcez pas d’actualisation, tout le monde voit l’ancienne carte.
- Nommez aussi le site. og:site_name place votre publication à côté du titre. Dans un fil chargé, cette ligne travaille autant que le titre.
- Testez sur un téléphone. La plupart des gens ouvrent les liens dans une messagerie sur un petit écran. L’aperçu sur ordinateur est le plus indulgent.
Six erreurs Open Graph qui cassent les cartes
Chacune produit une page qui fonctionne parfaitement et un lien qui a l’air cassé.
Écrire name à la place de property
Les balises Open Graph demandent l’attribut property. Avec name, la balise est du HTML valide et totalement ignorée.
Un chemin d’image relatif
Comme le robot n’a aucune base pour le résoudre, la carte arrive sans image.
Des balises ajoutées par JavaScript
La plupart des robots lisent le HTML tel qu’il est servi et n’exécutent rien. Donc les balises injectées après le chargement leur restent invisibles.
Une image derrière une connexion
Comme un mot de passe de préproduction ou une règle anti-hotlink bloque le robot, la carte se rabat sur du texte brut.
Deux balises og:image
Un thème en ajoute une, puis un plugin en ajoute une autre. Les réseaux en choisissent une, mais rarement celle que vous vouliez.
Croire que l’aperçu se rafraîchit tout de suite
Les caches durent des jours. Passez donc le lien dans l’outil de débogage de chaque réseau, au lieu de le repartager en espérant.
Les questions fréquentes sur Open Graph
De quelles balises Open Graph une carte a-t-elle besoin ?
Quatre sont indispensables : og:title, og:type, og:image et og:url. Le protocole les désigne comme les métadonnées de base, et de plus une carte sans image est une carte bien plus petite.
Quelle taille d’image og faut-il utiliser ?
Utilisez 1200 sur 630 pixels, ce qui correspond au rapport 1,91 pour 1 auquel les réseaux recadrent. De plus, gardez-la sous cinq mégaoctets et servez-la en https.
Ai-je aussi besoin des balises Twitter ?
Seulement twitter:card, et le texte alternatif de l’image si vous le souhaitez. En effet, Twitter lit og:title, og:description, og:image et og:url quand ses propres balises manquent.
Pourquoi l’aperçu affiche-t-il toujours l’ancienne carte ?
Le réseau a mis l’ancienne en cache. Utilisez donc son outil de débogage pour forcer une nouvelle lecture, car repartager le lien sert en général la copie en cache.
Open Graph influence-t-il le SEO ?
Pas directement. Il influence le nombre de clics sur un lien partagé, et de plus Google a indiqué qu’il peut utiliser og:title comme signal lorsqu’il réécrit un lien de titre.
Puis-je utiliser le résultat d’un générateur de balises Open Graph sur toute plateforme ?
Oui. Le même bloc fonctionne sur Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram et Signal, parce que tous lisent le même protocole.
Où vont ces balises ?
Dans l’élément head, à côté de vos autres balises meta. L’ordre n’a pas d’importance, pourtant les garder ensemble facilite leur vérification plus tard.
Que se passe-t-il si je ne mets aucune balise og ?
Le réseau devine à partir de votre page. En général, cela donne votre logo, un titre de menu et la première phrase trouvée, ce qui vend rarement le lien.
Plusieurs pages peuvent-elles partager une image ?
Elles le peuvent, et une image par défaut pour le site vaut mieux que rien. Cependant, une page avec sa propre image obtient plus de clics, donc gardez l’image par défaut pour les pages sans image dédiée.
Plusieurs pages peuvent-elles partager une image ?
Elles le peuvent, et une image par défaut pour le site vaut mieux que rien. Cependant, une page avec sa propre image obtient plus de clics, donc gardez l’image par défaut pour les pages sans image dédiée.
Ma saisie part-elle quelque part ?
Non. Votre navigateur écrit les balises, et la page ne récupère aucune adresse. C’est pourquoi ce site ne stocke rien et n’enregistre rien.
Des outils pour les liens partagés
Une carte se compose de balises et d’une image. Ces trois outils couvrent les deux moitiés.
Générateur de Twitter Card
Les balises twitter:, et seulement celles sans équivalent og:.
Ouvrir l’outil →Convertisseur d’images
Transformez une image de carte en WebP, JPG ou PNG dans votre navigateur.
Ouvrir l’outil →Générateur de balises meta
Les balises head qui accompagnent votre bloc og:.
Ouvrir l’outil →
On remet votre carte d’aperçu en état ?
Remplissez quatre propriétés, suivez l’aperçu et collez le bloc dans votre head. Le générateur Open Graph est gratuit, ne demande aucun compte et tourne entièrement dans votre navigateur.