Générateur de carte sociale (image Open Graph)
Concevez une image Open Graph de 1200×630 avec titre, description et nom du site sur un dégradé, téléchargez le PNG et copiez les balises meta og: et Twitter.
Les réseaux sociaux exigent une URL absolue en https://.
Qu'est-ce que Générateur de carte sociale ?
Quand un lien est partagé sur Facebook, LinkedIn, X/Twitter, Slack ou Discord, la plateforme affiche l'image Open Graph de la page. Cet outil crée cette image à la taille recommandée de 1200 × 630 px à partir de votre Titre, de votre Description et du Nom du site ou domaine sur un dégradé coloré, et écrit les balises meta og: et twitter: correspondantes.
Comment utiliser Générateur de carte sociale
- Saisissez le Titre, la Description et le Nom du site ou domaine.
- Choisissez un Thème ou définissez vous-même le dégradé et les couleurs du texte.
- Cliquez sur Télécharger le PNG et téléversez l'image sur votre site.
- Saisissez l'URL de la page et l'URL de l’image (où vous hébergerez le PNG), puis copiez les Balises meta Open Graph et Twitter dans le
<head>de votre page.
Exemple
Title: Hello OG
<meta property="og:title" content="Hello OG"> … <meta name="twitter:card" content="summary_large_image">
Plus une image PNG de 1200 × 630.
Quand utiliser Générateur de carte sociale
Utilisez-le pour des articles de blog, des lancements de produits, des pages de documentation et toute page destinée à être partagée. Pour des milliers de pages, générez plutôt les images automatiquement au moment du build. Les plateformes mettent les aperçus en cache : après avoir changé une image, utilisez leurs outils de débogage (Facebook Sharing Debugger, LinkedIn Post Inspector) pour la rafraîchir.
Comment fonctionne Générateur de carte sociale
La carte est dessinée sur un canvas de 1200×630 : un fond en dégradé linéaire diagonal, le nom du site en haut, le titre en gras (la taille de police diminue de 72 px à 40 px jusqu'à tenir sur trois lignes, avec un retour à la ligne glouton et une coupure par caractère pour les écritures sans espaces) et jusqu'à deux lignes de description. Les textes de droite à gauche comme l'arabe sont alignés automatiquement à droite. Les balises meta comprennent og:title, og:description, og:url, og:image avec largeur et hauteur, et twitter:card défini sur summary_large_image, toutes les valeurs étant échappées en HTML.
Cas d'utilisation courants
- Créer une image de partage pour un nouvel article de blog
- Fabriquer des cartes d'aperçu cohérentes pour des pages de documentation
- Annoncer un lancement de produit sur LinkedIn et X
- Générer les balises meta og:image pour une landing page
Questions Fréquentes
Quelle taille doit avoir une image Open Graph ?
1200 × 630 pixels (environ 1,91:1) est la taille recommandée pour les grandes cartes de Facebook, LinkedIn et X.
Pourquoi l'URL de l'image doit-elle être absolue ?
Les plateformes récupèrent l'image depuis leurs propres serveurs : og:image doit donc être une URL https:// complète, pas un chemin relatif.
Ma nouvelle image n'apparaît pas quand je partage le lien
Les plateformes mettent les aperçus en cache. Relancez l'exploration de l'URL avec l'outil de débogage de la plateforme ou attendez l'expiration du cache.