Aller au contenu

Générateur Open Graph et Twitter Card

Produisez vos balises Open Graph et Twitter Card, et voyez tout de suite la carte telle qu’elle apparaîtra sur Facebook, LinkedIn ou WhatsApp.

1200 × 630 pixels, moins de 1 Mo.

Deux lignes suffisent : viser 60 à 120 caractères.

Un protocole, tous les réseaux

Quand vous collez un lien dans une conversation WhatsApp, dans un message Slack ou dans une publication LinkedIn, l’application va chercher la page et lit son <head> pour fabriquer l’aperçu. Ce qu’elle y cherche s’appelle Open Graph, un protocole publié par Facebook en 2010 et adopté depuis par la quasi-totalité des plateformes : LinkedIn, WhatsApp, Telegram, Signal, Slack, Discord, Microsoft Teams, Pinterest.

Sans ces balises, le réseau improvise : il prend le title, parfois la première image trouvée dans la page — un logo, un avatar, une icône de partage — et produit une carte médiocre. Avec elles, vous décidez exactement de ce qui s’affiche.

Six balises suffisent :

BaliseContenuIndispensable
og:titleTitre affiché sur la carteOui
og:descriptionUne à deux lignes sous le titreOui
og:imageAdresse absolue de l’imageOui
og:urlAdresse canonique de la pageOui
og:typewebsite, article, productRecommandé
og:site_nameNom de votre siteRecommandé

L’image : le seul élément que l’on remarque

Dans un fil de publications, l’image occupe quinze fois plus de surface que le titre. C’est elle qui décide du clic, et c’est elle qui pose le plus de problèmes.

Dimensions : 1200 × 630 pixels, soit un ratio de 1,91:1. C’est le format de référence d’Open Graph : il s’affiche en pleine largeur sur Facebook et LinkedIn, et se recadre proprement ailleurs. En dessous de 600 × 315, la plupart des plateformes basculent sur une vignette carrée minuscule ; en dessous de 200 × 200, elles n’affichent plus rien.

Poids : restez sous 1 Mo. Et sous 300 Ko environ si le partage par messagerie compte pour vous : au-delà, la vignette n’est fréquemment pas générée du tout, WhatsApp en particulier. Ces seuils ne sont pas documentés officiellement, ce sont des ordres de grandeur constatés — prenez-les comme tels et testez.

Adresse absolue et publique. /images/partage.jpg ne fonctionne pas : le robot de partage n’a aucun moyen de résoudre un chemin relatif. Il faut https://exemple.fr/images/partage.jpg, accessible sans authentification, sans redirection et sans blocage dans le robots.txt.

Du texte lisible, et peu. Sur mobile, la carte fait environ 340 pixels de large : un titre de douze mots incrusté dans l’image devient illisible. Comptez six mots maximum, en très gros.

Twitter Card : name et non property

C’est le détail qui fait échouer une intégration sur deux. Les balises Open Graph utilisent l’attribut property, les balises Twitter utilisent name :

<meta property="og:title" content="…"> contre <meta name="twitter:card" content="…">

Une seule balise Twitter est réellement nécessaire : twitter:card. Deux valeurs comptent — summary_large_image affiche l’image en grand au-dessus du texte, summary la réduit à une vignette carrée sur le côté. En l’absence de twitter:title, twitter:description ou twitter:image, les valeurs Open Graph sont reprises. Le générateur les écrit quand même : cela permet de proposer un titre plus court sur ce réseau sans toucher au reste.

Le cache : pourquoi votre correction ne se voit pas

Les réseaux conservent l’aperçu d’une URL pendant des jours, parfois des semaines. Vous corrigez une image, vous recollez le lien, et rien ne change. C’est normal : la plateforme ne relit pas la page, elle ressort ce qu’elle a en mémoire.

Deux solutions : demander une relecture depuis l’outil de débogage du réseau concerné, ou modifier l’URL — une nouvelle adresse n’a pas de cache. C’est d’ailleurs une bonne raison de figer son slug avant publication, et de vérifier ses longueurs de titre dans l’aperçu SEO en même temps que sa carte de partage.

L’aperçu affiché ici est reconstitué dans votre navigateur à partir de ce que vous saisissez. Rien n’est envoyé : ni le texte, ni l’adresse de l’image, qui est simplement chargée par votre propre navigateur pour l’afficher. Le rendu final varie légèrement d’un réseau à l’autre — la troncature du titre et le nombre de lignes de description ne sont pas identiques partout.

Questions fréquentes

Faut-il une image différente par page ?

Idéalement oui, au moins pour les pages que vous diffusez activement. Une image générique de site donne des partages interchangeables et un taux de clic faible. Un modèle réutilisable où seul le titre change est un bon compromis : il coûte peu et reste identifiable.

Pourquoi mon aperçu ne s’affiche-t-il pas du tout ?

Quatre causes dans l’ordre de fréquence : l’image est en adresse relative, elle est trop lourde, elle est bloquée par le robots.txt ou un pare-feu, ou la page elle-même n’est pas accessible publiquement. Testez l’URL de l’image seule dans une fenêtre de navigation privée : si elle ne s’affiche pas, le réseau ne la verra pas non plus.

Les balises Open Graph aident-elles le référencement ?

Pas directement : Google n’en fait pas un critère de classement. L’effet est indirect mais réel — un partage attrayant génère des visites et des liens, qui comptent. Ne confondez pas pour autant og:title avec la balise title : ce sont deux textes distincts, pour deux usages distincts.

Quelle différence entre og:url et la canonique ?

Les deux désignent l’adresse de référence de la page, mais pour des publics différents : canonical parle aux moteurs de recherche, og:url aux réseaux sociaux, qui y rattachent le compteur de partages. En pratique, mettez la même valeur dans les deux.

Ces outils peuvent aussi vous servir

Tous les outils →