Générateur d'images OG

Saisissez un titre et un sous-titre, choisissez un fond uni ou en dégradé et une URL de logo facultative, prévisualisez en direct la carte sociale 1200x630 et téléchargez-la au format PNG.

Chargement de l'outil…

Générateur d'images OG — Créez l'image Open Graph 1200x630 qui s'affiche lorsque votre page est partagée sur Facebook, X/Twitter, LinkedIn ou Slack. Saisissez un titre et un sous-titre, choisissez un fond uni ou un dégradé bicolore, définissez la couleur et l'alignement du texte et indiquez éventuellement une URL de logo. Un aperçu en direct se redessine au fur et à mesure de votre saisie et vous pouvez télécharger la carte finie au format PNG. L'image est entièrement dessinée sur un canvas dans votre navigateur, de sorte que votre texte et vos couleurs ne quittent jamais votre appareil.

Qu'est-ce que Générateur d'images OG ?

Le Générateur d'images OG est un outil gratuit dans le navigateur pour créer des cartes de partage social (images Open Graph / Twitter Card) à la taille standard de 1200x630 pixels. Les marketeurs, blogueurs, développeurs indépendants et toute personne qui publie une landing page l'utilisent pour obtenir une vignette d'aperçu nette sans ouvrir une appli de design. Vous saisissez le titre et un sous-titre facultatif, choisissez une couleur unie ou un dégradé diagonal, définissez la couleur du texte et l'alignement à gauche ou centré, et collez une URL de logo si vous voulez une marque dans le coin. Le canvas se redessine en direct pour affiner le texte et les couleurs, puis vous exportez un PNG prêt à être référencé dans votre balise meta og:image.

Comment utiliser Générateur d'images OG

  1. Saisissez votre titre dans le champ Titre ; il est dessiné en grand et en gras et se répartit sur jusqu'à trois lignes.
  2. Ajoutez un sous-titre facultatif sous le titre, ou laissez-le vide pour n'afficher que le titre.
  3. Ouvrez les Réglages pour choisir un fond uni ou en dégradé, définir les couleurs du fond et du texte, et choisir un alignement à gauche ou centré.
  4. Collez éventuellement l'URL d'une image de logo (une image avec CORS activé) pour placer un logo au-dessus du texte.
  5. Regardez l'aperçu 1200x630 se mettre à jour en direct, cliquez dessus pour l'agrandir, puis téléchargez la carte au format PNG.

Exemples

Carte de partage pour un article de blog

Saisissez le titre de l'article comme titre et l'auteur ou le nom du site comme sous-titre, choisissez un dégradé assorti à votre marque et téléchargez un PNG 1200x630 à utiliser comme og:image de l'article.

Bannière de lancement de produit

Utilisez une couleur de marque unie, un alignement centré, votre slogan comme titre et une URL de logo dans le coin pour produire une carte de lancement cohérente sur tous les canaux sociaux.

Questions fréquentes

Quelle est la taille de l'image générée ?
Toujours 1200x630 pixels, le format standard d'Open Graph et de Twitter summary-large-image (environ 1,91:1). Cette taille s'affiche nettement dans les aperçus de liens de Facebook, X/Twitter, LinkedIn, Slack et Discord.
Comment ajouter mon propre logo ?
Collez une URL directe vers une image de logo dans le champ URL du logo. L'image est récupérée depuis cette URL et dessinée au-dessus du texte à une hauteur fixe en conservant son ratio. La source doit autoriser l'utilisation interorigine (CORS), sinon le navigateur bloquera son dessin sur le canvas.
Puis-je contrôler les couleurs et la mise en page ?
Oui. Dans les Réglages, vous pouvez basculer entre un fond uni et un dégradé diagonal bicolore, définir la ou les couleurs de fond et la couleur du texte, et choisir un alignement à gauche ou centré. Le titre et le sous-titre se répartissent automatiquement et le texte long est tronqué par des points de suspension.
Mon texte ou mon image sont-ils téléversés quelque part ?
Non. La carte est entièrement dessinée sur un canvas HTML dans votre navigateur et exportée en PNG localement. Votre titre, sous-titre et couleurs ne sont jamais envoyés à un serveur. Seule une URL de logo que vous fournissez est récupérée, et cette requête part directement de votre navigateur vers l'hôte que vous avez choisi.

Outils connexes

Code en image

Transformez un extrait de code en image avec coloration syntaxique dans votre navigateur, avec plus de 20 langages, des thèmes et fonds personnalisés, des numéros de ligne et un export PNG ou SVG.

Vérificateur de contraste des couleurs

Vérifiez le contraste WCAG 2.1 et le score APCA Lc entre texte et fond, voyez les badges AA, AAA et 3:1 et appliquez la couleur conforme la plus proche.

Mélangeur de couleurs

Mélangez deux couleurs HEX selon le ratio de votre choix, dans l'espace RGB ou Lab, et obtenez la couleur intermédiaire sous forme d'échantillon et de valeur HEX copiable.

Générateur de nuances de couleur

Transformez une couleur HEX de base en une échelle OKLCH, HSL ou RGB avec paliers réglables, indications de contraste WCAG par palier et export CSS, Tailwind et JSON.