Satori

Ce qu'est Satori

Satori (github.com/vercel/satori) prend un élément JSX et renvoie une chaîne SVG. Il est écrit en TypeScript et publié sous licence MPL-2.0. Vous lui passez un arbre d'éléments simples et une police sous forme de buffer, il calcule la mise en page avec Yoga — le moteur flexbox qu'utilise React Native — et vous rend une sortie vectorielle que vous convertissez en PNG. Il fonctionne dans le navigateur, dans Node 16 ou plus et dans les Web Workers, ses dépendances WebAssembly étant embarquées.

Ce n'est délibérément pas un navigateur, et ce sont les contraintes qui font l'intérêt. Le JSX doit être pur et sans état : pas de hooks React, pas de dangerouslySetInnerHTML. Il n'y a ni balise style, ni feuille de style externe, ni script ; tous les styles sont en ligne. La prise en charge de CSS est un sous-ensemble documenté, `display` vaut `flex` par défaut et n'accepte que `flex`, `contents` ou `none`, et le projet indique explicitement que la sortie ne promet pas de correspondre au pixel près à un navigateur. La plupart des gens ne touchent jamais la bibliothèque directement : ils la rencontrent via `next/og` ou la génération d'images OG de Vercel, qui l'enveloppent d'un rastériseur et d'une réponse HTTP. Il existe aussi un bac à sable en direct sur og-playground.vercel.app, le moyen le plus rapide de savoir si une mise en page est exprimable.

Là où une image d'aperçu gagne sa place

Une carte sociale est le seul élément créatif qui voyage automatiquement avec un lien. Vous ne choisissez pas où elle apparaît, et les surfaces où elle compte le plus sont précisément celles que vous voyez le moins :

• Partages privés Un lien collé dans Slack, WhatsApp ou un message direct se déplie en carte, et cette carte constitue tout l'argumentaire pour quelqu'un qui n'a jamais entendu parler de vous. Ce trafic arrive sans référent et atterrit en Direct — l'angle mort du dark social. Autrement dit, la carte accomplit un travail que vous ne verrez jamais attribué.
• Par page, pas par site Une seule carte faite à la main pour tout le domaine, et chacune de vos pages se ressemble dans un fil d'actualité. Des cartes générées permettent à une page de comparaison, à une note de version et à une page de documentation d'afficher chacune son propre titre : la différence entre un lien qui dit "un site web" et un lien qui dit "la réponse que vous cherchiez".
• Pages programmatiques Si vous publiez des pages sur gabarit à la moindre échelle — SEO programmatique, fiches d'annuaire, pages d'atterrissage par intégration —, dessiner les cartes à la main devient impraticable vers la trentième page. La génération est la seule version qui survit au contact d'un grand ensemble de pages.

Soyons honnêtes sur le plafond : `og:image` n'est pas un signal de classement, et aucune carte ne sauve une page que personne n'a envie de partager. Elle modifie le taux de clic des partages qui allaient de toute façon avoir lieu — un effet réel mais borné, plus proche en ampleur d'une bonne balise title que d'un nouveau canal.

Ce que nous a appris notre propre carte

Nous générons la carte sociale d'AgentCeres — le Directeur de la croissance par l'IA, sur agentceres.com — avec `next/og`, donc avec Satori en dessous, et deux choses nous ont coûté plus cher que la carte elle-même. La première fut une erreur de routage sans le moindre message : le fichier de convention se trouvait un segment au-dessus de la mise en page dont dépendent réellement toutes les pages, si bien qu'aucune image n'était produite et que la route renvoyait un 404, en silence, en production, jusqu'à ce que nous le découvrions le 14 juillet 2026. Rien ne vous alerte : une image d'aperçu absente ressemble exactement à une image d'aperçu que vous n'avez pas regardée, et vous ne le remarquez qu'en collant votre propre lien quelque part et en le voyant revenir nu. Si vous générez des cartes, ajoutez une vérification qui appelle la route de l'image et exige un code 200.

La seconde a coûté moins cher, mais elle est universelle : les règles de mise en page de Satori ne sont pas celles du navigateur. Chaque conteneur de notre carte porte un `display: flex` explicite, la marque est intégrée en URI de données base64 plutôt que récupérée, et la carte est prérendue par langue afin d'être un fichier statique plutôt qu'un rendu à la volée à chaque passage de robot. Rien d'exotique là-dedans : c'est la forme vers laquelle converge un gabarit Satori dès qu'on cesse d'écrire le CSS qu'on écrirait pour une page. L'outil, c'est un quart d'heure de travail ; décider ce qu'un inconnu doit voir quand votre lien apparaît dans la fenêtre de conversation de quelqu'un d'autre, voilà la partie qui mérite réflexion.