Satori

Qué es Satori

Satori (github.com/vercel/satori) toma un elemento JSX y devuelve una cadena SVG. Está escrito en TypeScript y publicado bajo licencia MPL-2.0. Le pasas un árbol de elementos simples y una fuente en forma de búfer, él calcula el diseño con Yoga —el mismo motor de flexbox que usa React Native— y te entrega salida vectorial que conviertes a PNG. Funciona en el navegador, en Node 16 o superior y en Web Workers, con sus dependencias WebAssembly incluidas de serie.

Deliberadamente no es un navegador, y ahí está lo interesante. El JSX debe ser puro y sin estado: nada de hooks de React ni de dangerouslySetInnerHTML. No hay etiquetas style ni hojas de estilo o scripts externos; todo estilo va en línea. El soporte de CSS es un subconjunto documentado, `display` vale `flex` por defecto y solo acepta `flex`, `contents` o `none`, y el proyecto avisa de forma explícita de que la salida no promete coincidir píxel a píxel con un navegador. Casi nadie usa la librería directamente: la mayoría llega a ella a través de `next/og` o de la generación de imágenes OG de Vercel, que la envuelven con un rasterizador y una respuesta HTTP. También hay un playground en vivo en og-playground.vercel.app, la forma más rápida de saber si un diseño es expresable.

Dónde se gana el sueldo una imagen de vista previa

Una tarjeta social es el único recurso creativo que viaja con un enlace de forma automática. No eliges dónde aparece, y las superficies donde más importa son justo las que menos puedes ver:

• Compartidos privados Un enlace pegado en Slack, WhatsApp o un mensaje directo se despliega en una tarjeta, y esa tarjeta es toda la propuesta para alguien que nunca te ha oído nombrar. Ese tráfico llega sin referente, así que cae en Directo: la brecha del dark social. Es decir, la tarjeta hace un trabajo que nunca verás atribuido.
• Por página, no por sitio Una única tarjeta hecha a mano para todo el dominio significa que todas tus páginas se ven idénticas en un feed. Las tarjetas generadas permiten que una comparativa, una nota de versión y una página de documentación muestren cada una su propio título, que es la diferencia entre un enlace que dice "una web" y otro que dice "la respuesta que pediste".
• Páginas programáticas Si publicas páginas con plantilla a cualquier escala —SEO programático, fichas de directorio, aterrizajes por integración—, diseñar tarjetas a mano deja de ser viable alrededor de la página treinta. Generarlas es la única versión de esto que sobrevive al contacto con un conjunto grande de páginas.

Conviene ser honesto con el techo: `og:image` no es una señal de posicionamiento y ninguna tarjeta rescata una página que nadie quiere compartir. Cambia el porcentaje de clics de los compartidos que iban a ocurrir de todas formas, un efecto real pero acotado, más parecido en tamaño a un buen title que a un canal nuevo.

Lo que aprendimos publicando nuestra propia tarjeta

Generamos la tarjeta social de AgentCeres —el Director de Crecimiento con IA, en agentceres.com— con `next/og`, que por debajo es Satori, y dos cosas nos costaron más que la tarjeta en sí. La primera fue un error de rutas sin ningún mensaje asociado: el archivo estaba un segmento por encima del layout del que cuelgan realmente todas las páginas, así que no emitía imagen alguna y la ruta devolvía 404, en silencio, en producción, hasta que lo detectamos el 14 de julio de 2026. Nada te avisa: una imagen de vista previa que falta se ve exactamente igual que una que no has mirado, y solo lo notas cuando pegas tu propio enlace en algún sitio y vuelve desnudo. Si generas tarjetas, añade una comprobación que pida la ruta de la imagen y verifique que responde 200.

La segunda salió más barata pero es universal: las reglas de diseño de Satori no son las del navegador. Cada contenedor de nuestra tarjeta lleva un `display: flex` explícito, la marca va incrustada como URI de datos en base64 en vez de descargarse, y la tarjeta se prerenderiza por idioma para que sea un recurso estático y no un render en el borde en cada rastreo. Nada de eso es exótico: es la forma a la que converge una plantilla de Satori en cuanto dejas de escribir el CSS que escribirías para una página. La herramienta son quince minutos de trabajo; decidir qué debe ver un desconocido cuando tu enlace aparece en la ventana de chat de otra persona es la parte que merece pensarse.