Satori
A biblioteca open source da Vercel que transforma JSX e CSS em SVG: o motor por trás das imagens de Open Graph dinâmicas
Satori é uma biblioteca open source da Vercel que renderiza JSX e um subconjunto de CSS em SVG, que depois você converte para PNG. É o motor por baixo da geração de imagens de Open Graph da Vercel e do ImageResponse do Next.js, então a maioria de quem gera cards sociais usa Satori sem citar o nome. Para quem tem uma empresa pequena, ele resolve bem um problema específico de distribuição: todo link que você compartilha, e todo link que outra pessoa compartilha, carrega uma imagem de prévia — e o Satori deixa essa imagem ser gerada a partir dos seus dados em vez de desenhada à mão, página por página.
O que é o Satori
O Satori (github.com/vercel/satori) recebe um elemento JSX e devolve uma string SVG. É escrito em TypeScript e licenciado sob MPL-2.0. Você entrega uma árvore de elementos simples mais uma fonte como buffer, ele calcula o layout com o Yoga — o mesmo motor de flexbox que o React Native usa — e devolve saída vetorial que você converte em PNG. Roda no navegador, no Node 16 ou superior e em Web Workers, com as dependências WebAssembly embutidas.
Ele deliberadamente não é um navegador, e as restrições são a parte interessante. O JSX precisa ser puro e sem estado: nada de hooks do React nem de dangerouslySetInnerHTML. Não existem tags style nem folhas de estilo ou scripts externos; todo estilo é inline. O suporte a CSS é um subconjunto documentado, `display` vale `flex` por padrão e só aceita `flex`, `contents` ou `none`, e o projeto é explícito ao dizer que a saída não promete bater pixel a pixel com um navegador. A maior parte das pessoas nunca toca na biblioteca diretamente: chega até ela pelo `next/og` ou pela geração de imagens OG da Vercel, que a embrulham com um rasterizador e uma resposta HTTP. Há também um playground ao vivo em og-playground.vercel.app, o jeito mais rápido de descobrir se um layout é viável.
Onde uma imagem de prévia realmente se paga
Um card social é o único ativo criativo que viaja junto com um link automaticamente. Você não escolhe onde ele aparece, e as superfícies em que ele mais importa são justamente as que você menos consegue ver:
- Compartilhamentos privados Um link colado no Slack, no WhatsApp ou numa mensagem direta se expande em um card, e esse card é a apresentação inteira para quem nunca ouviu falar de você. Esse tráfego chega sem referenciador e cai em Direto — a lacuna do dark social. Ou seja, o card faz um trabalho que você nunca verá atribuído.
- Por página, não por site Um único card feito à mão para o domínio inteiro significa que todas as suas páginas ficam idênticas em um feed. Cards gerados permitem que uma página de comparação, uma nota de versão e uma página de documentação mostrem cada uma o seu próprio título — a diferença entre um link que diz "um site" e outro que diz "a resposta que você pediu".
- Páginas programáticas Se você publica páginas em modelo em qualquer escala — SEO programático, fichas de diretório, páginas por integração —, desenhar cards à mão deixa de ser possível lá pela página trinta. Gerar é a única versão disso que sobrevive ao contato com um conjunto grande de páginas.
Vale ser honesto sobre o teto: `og:image` não é sinal de ranking, e nenhum card salva uma página que ninguém quer compartilhar. Ele muda a taxa de clique dos compartilhamentos que já iam acontecer — um efeito real, porém limitado, mais próximo em tamanho de um bom title do que de um canal novo.
O que aprendemos publicando o nosso próprio card
Geramos o card social do AgentCeres — o Diretor de Crescimento com IA, em agentceres.com — com `next/og`, que é Satori por baixo, e duas coisas custaram mais do que o card em si. A primeira foi um erro de rota sem erro nenhum anexado: o arquivo estava um segmento acima do layout do qual todas as páginas de fato dependem, então ele não emitia imagem alguma e a rota devolvia 404, em silêncio, em produção, até encontrarmos isso em 14 de julho de 2026. Nada avisa: uma imagem de prévia ausente é idêntica a uma imagem de prévia que você não olhou, e você só percebe quando cola o seu próprio link em algum lugar e ele volta pelado. Se você gera cards, adicione uma verificação que busca a rota da imagem e exige um 200.
A segunda saiu mais barata, mas é universal: as regras de layout do Satori não são as do navegador. Cada contêiner do nosso card carrega um `display: flex` explícito, a marca vai embutida como data URI em base64 em vez de ser baixada, e o card é pré-renderizado por idioma para ser um arquivo estático em vez de uma renderização na borda a cada rastreamento. Nada disso é exótico: é o formato para o qual um template de Satori converge assim que você para de escrever o CSS que escreveria para uma página. A ferramenta são quinze minutos de trabalho; decidir o que um estranho deve ver quando o seu link aparece na janela de conversa de outra pessoa é a parte que merece reflexão.
FAQ
- Satori e @vercel/og são a mesma coisa?
- Não. O Satori é a biblioteca de layout e renderização que transforma JSX em SVG. O @vercel/og — e o ImageResponse do Next.js, exportado de next/og — o embrulha com um rasterizador que converte o SVG em PNG e com uma resposta HTTP amigável a cache. A maioria das aplicações quer o embrulho. Você recorre ao Satori direto quando quer saída SVG ou quando está fora do Next.js.
- Imagens de Open Graph dinâmicas ajudam no SEO?
- Não diretamente: og:image não é sinal de ranking, e o Google não sobe páginas por terem uma prévia mais bonita. O efeito é de distribuição: o card determina se um link compartilhado recebe clique em um feed ou em uma conversa. Avalie como taxa de clique em compartilhamentos, não como desempenho de busca.
- Quais são as principais limitações?
- O suporte a CSS é um subconjunto documentado, resolvido pelo motor de flexbox do Yoga, então layouts em bloco ou grid não se comportam como no navegador; tags style e folhas de estilo externas não são suportadas; fontes precisam ser passadas como buffers; o JSX tem de ser puro e sem estado; e o projeto afirma claramente que a saída não promete corresponder exatamente à renderização do navegador. A renderização também fica mais lenta conforme você carrega mais fontes e emojis por imagem.
- Preciso gerar os cards em tempo de requisição?
- Não, e muitas vezes é melhor não fazer isso. Se as suas páginas são conhecidas em tempo de build, pré-renderize as imagens para que cada uma seja um arquivo estático servido do cache em vez de uma invocação de função a cada visita de rastreador. Nós pré-renderizamos as nossas por idioma exatamente por isso. Gerar em tempo de requisição é a escolha certa quando o card reflete dados que mudam: um número ao vivo, o nome de um usuário, um relatório com data.
You built it. Now grow it.
AgentCeres is a managed AI marketing team — specialists draft the SEO, social, and outreach that fill your links, you approve what ships. 14-day free trial, from $39/month.