Générateur de balises meta Open Graph

Les balises à partir desquelles un aperçu de lien est construit

Lorsque quelqu'un colle votre lien dans une publication ou un message, l'application envoie un robot sur la page et lit une poignée de balises <meta> dans le <head>. Ces balises proviennent du protocole Open Graph, qui en indique quatre comme obligatoires :

• og:title : le titre tel qu'il doit apparaître dans l'aperçu.
• og:type : la nature de la page. website convient à la plupart des pages et article convient à un article de blog. Le protocole définit aussi des types comme profile, book, video.movie et music.song.
• og:image : l'URL de l'image qui représente la page.
• og:url : l'URL canonique, que le protocole appelle l'identifiant permanent de l'objet.

Le protocole définit aussi des balises facultatives, et le générateur écrit les plus utiles : og:description, og:site_name, ainsi que les détails de l'image og:image:width, og:image:height et og:image:alt. Au sujet du texte alternatif, le protocole est direct : si une page spécifie og:image, elle doit spécifier og:image:alt, et ce texte décrit ce qui se trouve dans l'image, il ne s'agit pas d'une légende.

Ce qu'ajoute X : twitter:card

X lit aussi Open Graph. Sa référence sur le balisage des cartes (la documentation développeur de X, liée ici via l'Internet Archive car la page d'origine redirige désormais) indique le repli pour chaque balise : twitter:title se replie sur og:title, twitter:description sur og:description, twitter:image sur og:image et twitter:image:alt sur og:image:alt. La seule balise à ajouter est donc twitter:card, qui détermine la mise en page. Si vous l'omettez, la même référence précise que X peut se rabattre sur une petite carte résumé, même si vous vouliez la grande :

• summary_large_image : une image pleine largeur au-dessus du titre. La page de X sur la carte à grande image indique que les images prises en charge ont un rapport de 2:1, avec des dimensions minimales de 300 × 157 et maximales de 4096 × 4096 pixels, moins de 5 Mo, aux formats JPG, PNG, WEBP ou GIF. Le SVG n'est pas pris en charge.
• summary : une carte plus petite avec une image carrée. La page de X sur la carte résumé indique que l'image prend en charge un rapport de 1:1, de 144 × 144 jusqu'à 4096 × 4096 pixels, et qu'elle est recadrée en carré sur toutes les plateformes.

La même référence répertorie les cartes app et player, qui nécessitent des champs supplémentaires d'app store ou de lecteur vidéo, elles sont donc exclues ici. Elle documente aussi les limites utilisées par les vérifications ci-dessus : 70 caractères pour un titre, 200 pour une description et 420 pour le texte alternatif.

Tailles d'image indiquées par les plateformes

• LinkedIn : son guide pour rendre un site web partageable demande og:title, og:image, og:description et og:url, et indique une taille de fichier maximale de 5 Mo, un minimum de 1200 × 627 pixels et un rapport recommandé de 1,91:1.
• Meta : ses bonnes pratiques de partage recommandent d'utiliser des images d'au moins 1080 pixels de large pour les écrans haute résolution, et d'au moins 600 pixels de large pour afficher des publicités de lien avec image. La même page demande og:image:width et og:image:height afin que le robot puisse afficher l'image immédiatement, sans avoir à la télécharger et à la traiter au préalable.

Une image de 1200 × 630 répond à toutes ces exigences : elle fait au moins 1200 × 627 pour LinkedIn, dépasse 1080 pour Meta, et affiche un rapport de 1,905:1, à moins de 5 % du 2:1 de X.

Vérifiez-le, et actualisez les anciens aperçus

Les applications mettent en cache ce qu'elles ont extrait, donc corriger les balises ne corrige pas un aperçu déjà enregistré. Les deux grands réseaux proposent un outil pour cela :

• Le Sharing Debugger de Meta affiche les balises extraites par son robot, avec les éventuelles erreurs ou avertissements, et déclenche une nouvelle extraction. Le guide pour webmasters de Meta le décrit, et la page des bonnes pratiques précise qu'autrement le contenu extrait est mis à jour selon une période standard de 24 heures.
• Le Post Inspector de LinkedIn actualise une URL mise en cache. La page d'aide de LinkedIn précise que l'actualisation n'affecte que les nouvelles publications : celles qui incluent déjà l'URL conservent l'ancien aperçu.

Ce que cet outil ne fait pas

Il ne récupère ni votre page ni votre image, il ne peut donc pas voir ce qui est réellement en ligne, et l'aperçu ci-dessus est une esquisse textuelle plutôt qu'un rendu. Il écrit les balises ; votre site doit tout de même les servir dans le <head> de la page, dans le HTML que reçoit le robot. Les balises ajoutées ensuite par JavaScript risquent de ne jamais être vues. Et il n'écrit pas les cartes app ou player, ni les propriétés supplémentaires que définissent des types comme book ou video.movie.

Si vous préférez ne pas écrire cela à la main

Hermoso, c'est le marketing en pilote automatique : il analyse les annonces qui fonctionnent déjà dans votre marché, crée des publicités image et vidéo fidèles à votre marque, programme les publications et gère les campagnes payantes sur vos propres comptes publicitaires. Il fonctionne dans l'application web, ou au sein de Claude, ChatGPT et Cursor via son serveur MCP.

Outils gratuits: Générateur de liens UTM · Générateur de QR code · Guide des tailles pour réseaux sociaux

Questions fréquentes

Quelles balises Open Graph sont obligatoires ?

Le protocole Open Graph liste quatre propriétés obligatoires : og:title, og:type, og:image et og:url. Les balises og:description, og:site_name ainsi que la largeur, la hauteur et le texte alternatif de og:image sont facultatives, mais valent la peine d'être ajoutées.

Ai-je besoin de twitter:title et twitter:image si j'ai des balises og: ?

Non. La référence du balisage des cards de X indique que twitter:title, twitter:description, twitter:image et twitter:image:alt se rabattent sur leurs équivalents og:. La balise qui vaut la peine d'être ajoutée est twitter:card, qui choisit la mise en page de la card.

Quelle taille doit avoir une image Open Graph ?

LinkedIn demande au moins 1200 × 627 pixels en 1.91:1 et moins de 5 Mo. Meta suggère au moins 1080 pixels de large. La large image card de X prend en charge le 2:1, de 300 × 157 à 4096 × 4096. Une image de 1200 × 630 convient aux trois.

Pourquoi mon lien affiche-t-il encore une ancienne image après avoir modifié les balises ?

L'application a mis en cache l'ancien scrape. Passez l'URL dans le Sharing Debugger de Meta ou le Post Inspector de LinkedIn pour la récupérer à nouveau. LinkedIn précise que les publications partageant déjà l'URL conservent l'ancien aperçu.

Pourquoi les guillemets et les esperluettes sont-ils modifiés dans la sortie ?

Ils sont échappés en HTML pour que la balise reste valide. Un titre comme Tom & Jerry's "Sale" devient Tom & Jerry's "Sale" dans l'attribut content, et les navigateurs et robots le relisent comme le texte d'origine.

L'outil charge-t-il mon image ?

Non. Rien de ce que vous saisissez n'est envoyé où que ce soit et l'URL de l'image n'est jamais récupérée, c'est pourquoi l'aperçu affiche un espace réservé au lieu de l'image.