Imagens OG dinâmicas: gere prévias de link automaticamente

Uma imagem OG dinâmica é uma imagem de prévia de link que o seu site gera para cada página, em vez de alguém desenhá-la à mão. Quando uma página é compartilhada no LinkedIn, no Slack ou num app de mensagens, a plataforma busca a imagem indicada na tag og:image da página. Se essa imagem é montada a partir do título e dos dados da própria página, todo artigo, produto e perfil ganha uma prévia que diz exatamente o que é.

Este guia trata do design do modelo, das duas formas de gerar imagens, das tags que as conectam, do cache e dos testes. Para o tamanho em si e como as plataformas recortam, veja o nosso guia do tamanho da imagem Open Graph.

Por que toda página deve ter a sua própria imagem OG

A prévia costuma ser a primeira coisa que alguém vê da sua página e, num feed cheio, é quase tudo o que vê. Um único cartão genérico com o logotipo para o site inteiro faz todo link compartilhado parecer igual, então nenhum diz o que há por trás. Uma imagem por página leva o título real da página na sua identidade visual: reconhecivelmente sua e específica o bastante para merecer o clique.

Desenhando um modelo de imagem OG

Desenhe o modelo como desenharia uma miniatura, porque é assim que ele costuma ser visto. As prévias aparecem numa fração do tamanho real, e alguns apps mostram uma versão menor e recortada. As palavras que importam devem sobreviver às duas.

1. 1

   Comece em 1200 × 630

   Desenhe em tamanho total e confira a um quarto dele. Se você não consegue ler o título a 300 pixels de largura, ele está pequeno ou longo demais.

2. 2

   Use o título, não a página toda

   Uma linha de tipografia grande, ou duas no máximo. Títulos longos precisam de uma regra: encurte-os nos dados ou reduza o tamanho da fonte quando passarem de um comprimento definido.

3. 3

   Mantenha margens largas

   Mantenha o título e o logotipo longe das bordas para que um recorte mais justo não os corte. Cerca de 60 a 80 pixels de margem neste tamanho é um ponto de partida sensato.

4. 4

   Acrescente um contexto

   Uma pequena etiqueta com a seção, o autor ou a data ajuda as pessoas a situar o link. Mais de uma linha extra transforma uma prévia num documento.

5. 5

   Faça o fundo carregar a marca

   Um gradiente ou material consistente faz mais pelo reconhecimento do que um logotipo grande. Mantenha a parte mais brilhante e agitada longe das palavras; o texto sobre gradiente explica como.

Gerando imagens OG no build ou sob demanda

Há dois momentos para fazer a imagem. No build, o seu site renderiza uma imagem para cada página uma única vez e a serve como arquivo estático: rápido, barato e ideal para artigos e documentação. Sob demanda, uma rota desenha a imagem na primeira vez que ela é pedida: certo para páginas cujos dados mudam, como o número de seguidores de um perfil ou o preço de um produto. As imagens sob demanda precisam ficar em cache, ou cada compartilhamento e cada visita de rastreador repete o trabalho.

A maioria dos frameworks tem um jeito de desenhar uma imagem a partir de uma marcação parecida com HTML. No Next.js, um arquivo opengraph-image.tsx ao lado de uma rota gera a imagem dela com ImageResponse, e o Next acrescenta as metatags para você. A mesma ideia funciona em outros lugares com um navegador headless tirando uma captura de uma página-modelo.

// app/guide/[slug]/opengraph-image.tsx
import { readFile } from 'node:fs/promises'
import { join } from 'node:path'
import { ImageResponse } from 'next/og'
import { getArticle } from '@/lib/articles'

export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const article = await getArticle(slug)
  const font = await readFile(join(process.cwd(), 'assets/Inter-SemiBold.ttf'))

  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end',
          padding: 72,
          backgroundImage: 'linear-gradient(135deg, #120a2e 0%, #4c1d95 55%, #db2777 100%)',
          color: '#ffffff',
          fontFamily: 'Inter',
        }}
      >
        <div style={{ fontSize: 28, opacity: 0.8 }}>Field Guide</div>
        <div style={{ fontSize: article.title.length > 40 ? 60 : 76, lineHeight: 1.1 }}>
          {article.title}
        </div>
      </div>
    ),
    { ...size, fonts: [{ name: 'Inter', data: font, weight: 600, style: 'normal' }] },
  )
}

As tags Open Graph que conectam a imagem

As plataformas encontram a imagem por metatags no head da página. O endereço da imagem deve ser absoluto, com https:// e o domínio, porque o rastreador o lê de fora do seu site. Declarar a largura e a altura ajuda algumas plataformas a diagramar a prévia antes de baixarem a imagem, e o texto alternativo a descreve para quem usa leitores de tela.

<meta property="og:title" content="How to fix gradient banding" />
<meta property="og:description" content="Why gradients show stripes, and four fixes that work." />
<meta property="og:image" content="https://example.com/guide/gradient-banding/opengraph-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words How to fix gradient banding on a violet gradient" />
<meta name="twitter:card" content="summary_large_image" />

Open Graph 1200 × 630

1200 × 630

Link do LinkedIn 1200 × 627

1200 × 627

Post do X 1600 × 900

1600 × 900

Cache e testes de imagens OG

As plataformas guardam prévias em cache, às vezes por muito tempo. Se você muda uma imagem mas mantém o endereço, as pessoas podem continuar vendo a antiga. Acrescente uma versão ao endereço, como ?v=2, quando o design mudar, ou peça à plataforma que busque a página de novo. Para imagens sob demanda, envie cabeçalhos de cache para o seu servidor e qualquer CDN guardarem o resultado.

• Cole a página no Post Inspector do LinkedIn para ver a prévia e atualizar o cache dela.
• Use o Sharing Debugger da Meta para o Facebook, que também consegue buscar uma página de novo.
• Cole o link num rascunho de post no X, ou numa conversa privada no Slack ou no WhatsApp, para ver a prévia real sem enviar nada.
• Abra o endereço da imagem direto num navegador para confirmar que ele devolve um PNG, no tamanho certo, sem login.

Trate as imagens OG como parte de qualquer lançamento: elas estão na checklist dos nossos gráficos do dia de lançamento, e o conjunto completo de formatos está em tamanhos de imagem para redes sociais. Se você desenha as prévias no Gradiently, a API dele pode renderizar um design salvo como um PNG exato de 1200 × 630, o que serve a pipelines e agentes de IA que fazem imagens para você.