OG Image Preview Studio

À quoi sert vraiment une image OG pour un lien partagé

Une image OG (Open Graph), c'est le visuel qui décide de quoi ton lien va avoir l'air à la seconde où quelqu'un le colle dans Facebook, LinkedIn, Slack, Discord, ou à peu près n'importe quel service de preview digne de ce nom. Et de tout ce qui compose cette carte, c'est l'image qui porte le poids. Un visuel net, à ta marque, avec le titre intégré dedans, va générer plus de clics qu'un lien tout nu ou que ton favicon par défaut un peu pathétique, à peu près à chaque fois. Rate-le, ou oublie-le, et la carte atterrit en rectangle gris vide auquel personne ne touche. Twitter et X vont chercher exactement le même fichier via le tag twitter:image. Du coup un seul PNG en 1200x630 couvre discrètement tout le peloton grand public.

C'est ça que l'outil construit : l'image, ici même, dans ton navigateur. Tu choisis un template, tu remplis le titre et le sous-titre, tu déposes un logo, tu règles les couleurs et la police, tu sauvegardes le PNG. L'aperçu s'affiche au vrai 1200x630, donc ce que tu fixes à l'écran, c'est octet pour octet ce que les plateformes vont récupérer. Rien ne se perd au passage. Et ces fausses cartes plus bas ? Elles imitent le rendu Facebook, LinkedIn, Twitter et Slack pour que tu repères un titre peu contrasté, ou un titre qui déborde, avant que le truc ne parte en public.

Comment fonctionne le générateur d'image OG

C'est du Canvas HTML5 et quelques centaines de lignes de JavaScript tout bête. Pas de framework. Pas d'étape de build. Tu touches à un champ et le script efface le canvas 1200x630, repeint le fond (uni, dégradé ou couche texturée selon le template), puis pose l'étiquette, le titre, le sous-titre, le domaine et le logo, en gérant le retour à la ligne et l'alignement de chaque bloc au fur et à mesure. Le logo est lu en local via l'API FileReader du navigateur et peint avec drawImage, donc ce fichier ne quitte jamais ton ordi. Tu cliques sur télécharger et le canvas passe par canvas.toBlob, qui encode un PNG et ouvre la boîte de dialogue de sauvegarde. Les cartes d'aperçu ? Juste du HTML et du CSS pointés vers le même data URI que le canvas recrache. C'est pour ça qu'elles se redessinent à l'instant où tu tapes.

1. Choisis un template : vois chacun comme un preset, avec son style de titre et son placement d'accent, calibré pour un type de page particulier. Pages de marque. Articles. Produits. Citations. Heros en dégradé. Plus une carte texte seul dépouillée pour quand tu veux juste que les mots parlent, et rien d'autre.
2. Tape le titre et le sous-titre : le canvas gère le retour à la ligne à ta place, garde une marge de sécurité loin des bords (les plateformes adorent rogner quelques pixels) et réduit la taille quand le titre devient trop gourmand.
3. Ajuste la palette : des color pickers pour le fond, l'accent, le texte, le texte atténué, tout le bazar. Le mesureur de contraste dans l'onglet « Vérifs de bonnes pratiques » va te gronder dès que le titre devient dur à lire, ce que je trouve bizarrement satisfaisant.
4. Dépose le logo : il se cale à une taille fixe en haut dans le coin. Donne-lui un logo carré ou large sur fond transparent et il se tient bien. Une forme bizarre, un peu moins.
5. Télécharge et publie : récupère le PNG en 1200x630, héberge-le à une URL qui ne bougera pas, puis colle le tag og:image de l'onglet Meta tags sur la page qui doit le revendiquer.

Cas d'usage courants d'un studio d'image OG

• Carte hero pour article de blog. Une carte par article, le titre intégré dedans. Pas besoin d'avoir un designer dans l'équipe pour sortir des share cards qui ont vraiment l'air de faire partie d'un même ensemble. C'est quelques secondes par article.
• Landing page SaaS. Une carte de marque pour la home, une carte article pour le blog, une carte produit par fonctionnalité. Le même look partout, et personne n'a eu à briefer une agence pour chaque variante.
• Site de documentation. Génère une carte par section de docs avec le nom de la section comme titre. C'est mieux que la capture auto-générée que la plupart des sites de docs sortent encore. Ces trucs sont quasi illisibles à la taille d'une preview, honnêtement.
• Communiqué de presse. Une carte style citation avec une seule phrase bien tranchante. D'expérience, ça performe mieux qu'une carte photo sur les fils B2B, où tout le monde scrolle déjà sur des photos de stock en pilote automatique. Mais c'est peut-être juste les comptes que je suis.
• Portfolio perso ou newsletter. Une seule carte à ta marque, ta couleur d'accent et ton logo, réutilisée sur chaque lien que tu partages. Tu la règles une fois. Tu n'y penses plus.
• Campagne ponctuelle. Besoin d'une carte pour un seul push et pas envie de lancer Figma ? Fais-la ici. Les pixels sortent exactement aussi nets que ce qu'un outil de design te donnerait.

Limites et notes sur la confidentialité

Soyons clairs sur ce qu'il ne fait pas. Tu obtiens un PNG statique. Pas d'animation, pas de vidéo intégrée, pas d'A/B testing automatique sur une douzaine de variantes. Le logo se pose là où le template le met, à la taille que le template veut, donc un logo vraiment large ou vraiment haut peut se retrouver un peu de travers. Une version carrée transparente règle ça en général. Et comme le Canvas s'appuie sur la chaîne de fallback de polices de ton navigateur, une typo que tu n'as pas installée en local sera simplement remplacée par ce qui s'en rapproche le plus. Tu veux ta police de marque exacte au détail de la courbe près ? Héberge un webfont, ou génère l'image sur un serveur qui a la police. Pour un aperçu rapide, franchement, les défauts système font le job pour la plupart des équipes.

La partie confidentialité, c'est la partie facile. Tout reste sur ta machine. Titre, sous-titre, logo, le PNG que tu télécharges : rien ne part nulle part. Aucun upload. Aucun analytics qui surveille ce que tu conçois. Aucun appel tiers qui se faufile par derrière. Alors vas-y, maquette la page produit pas encore sortie ou la campagne sous embargo, ici même. Personne d'autre que toi ne la verra.

Questions fréquentes

Quelle taille doit faire une image OG ?

1200 par 630 pixels. C'est le chiffre sur lequel tout le monde s'est mis d'accord, et Facebook, LinkedIn, Twitter, Slack et Discord l'affichent tous proprement. Le ratio tombe autour de 1.91:1. Plus petit et c'est agrandi puis ça devient flou. Plus grand et certains clients vont te le rogner. Reste sur 1200x630 et arrête de te prendre la tête.

Pourquoi ma nouvelle image ne s'affiche pas quand je partage le lien ?

Le cache, quasiment toujours. Ces plateformes gardent ta vieille preview bien accrochée, et une image fraîche ne s'affichera pas tant que tu ne les forces pas à regarder à nouveau. Après publication, colle le lien dans le Facebook Sharing Debugger et le LinkedIn Post Inspector, et force le re-scrape. Ça nettoie ça sur le coup. Twitter et Slack ont tendance à se débrouiller tout seuls en quelques heures, donc ceux-là tu peux globalement les laisser tranquilles.

Je génère une image OG par page ou une seule pour tout le site ?

Une par page gagne sur les clics, sans débat. Ma règle perso : retombe sur une seule carte de marque partagée pour les pages maigres qui ne méritent pas leur propre visuel, mais donne à chaque article et chaque landing page sa propre carte avec le vrai titre dessus. Tu peux faire les deux ici même, et elles auront quand même l'air de venir du même endroit. C'est un peu tout l'intérêt.

Où dois-je héberger le PNG généré ?

N'importe où de stable qui renvoie une URL HTTPS absolue. Ton CDN, ton dossier média, un object store comme S3, le répertoire d'uploads de ton CMS, tout ça va. La seule règle dure : le tag og:image doit pointer vers l'URL absolue complète. Un chemin relatif échoue en silence, et tu ne le remarqueras pas tant que la carte ne sortira pas vide.