Imagens OG dinâmicas: pré-visualizações automáticas

Uma imagem OG dinâmica é uma imagem de pré-visualização de ligação que o teu site gera para cada página, em vez de alguém a desenhar à mão. Quando uma página é partilhada no LinkedIn, no Slack ou numa app de mensagens, a plataforma vai buscar a imagem indicada na etiqueta og:image da página. Se essa imagem for construída a partir do título e dos dados da própria página, cada artigo, produto e perfil ganha uma pré-visualização que diz exatamente o que é.

Este guia trata do desenho do modelo, das duas formas de gerar imagens, das etiquetas que as ligam, da cache e dos testes. Para o tamanho em si e a forma como as plataformas cortam, vê o nosso guia do tamanho da imagem Open Graph.

Porque é que cada página deve ter a sua imagem OG

A pré-visualização é muitas vezes a primeira coisa que alguém vê da tua página e, num feed cheio, é quase tudo o que vê. Um cartão genérico com o logótipo para o site inteiro faz todas as ligações partilhadas parecerem iguais, e nenhuma diz o que está por trás. Uma imagem por página leva o título real da página na tua identidade visual: reconhecivelmente tua e específica o bastante para merecer o clique.

Desenhar um modelo de imagem OG

Desenha o modelo como desenharias uma miniatura, porque é assim que costuma ser vista. As pré-visualizações aparecem numa fração do tamanho real, e algumas apps mostram uma versão mais pequena e cortada. As palavras que importam devem sobreviver a ambas.

1. 1

   Começa em 1200 × 630

   Desenha em tamanho inteiro e depois verifica a um quarto disso. Se não consegues ler o título com 300 píxeis de largura, é pequeno demais ou longo demais.

2. 2

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

   Uma linha de tipografia grande, ou duas no máximo. Os títulos longos precisam de uma regra: encurta-os nos dados ou reduz o tamanho da fonte quando passam de um certo comprimento.

3. 3

   Mantém as margens largas

   Mantém o título e o logótipo longe das margens para que um corte mais apertado não os corte. Cerca de 60 a 80 píxeis de margem neste tamanho é um bom ponto de partida.

4. 4

   Acrescenta um dado de contexto

   Uma pequena etiqueta com a secção, o autor ou a data ajuda as pessoas a situar a ligação. Mais de uma linha extra transforma uma pré-visualização num documento.

5. 5

   Faz o fundo transportar a marca

   Um gradiente ou material coerente faz mais pelo reconhecimento do que um logótipo grande. Mantém a parte mais brilhante e carregada longe das palavras; o guia de texto sobre um gradiente explica como.

Gerar imagens OG na compilação ou a pedido

Há dois momentos para fazer a imagem. Na compilação, o teu site desenha uma imagem para cada página uma vez e serve-a como ficheiro estático: rápido, barato e ideal para artigos e documentação. A pedido, uma rota desenha a imagem da primeira vez que lha pedem: 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 a pedido têm de ficar em cache, senão cada partilha e cada visita de um rastreador repete o trabalho.

A maioria das frameworks tem uma forma de desenhar uma imagem a partir de marcação parecida com HTML. No Next.js, um ficheiro opengraph-image.tsx junto de uma rota gera a imagem dessa rota com ImageResponse, e o Next acrescenta as metaetiquetas por ti. A mesma ideia funciona noutros sítios com um navegador sem interface a fazer 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 etiquetas Open Graph que ligam a imagem

As plataformas encontram a imagem através de metaetiquetas no cabeçalho da página. O endereço da imagem tem de ser absoluto, com https:// e o domínio, porque o rastreador lê-o de fora do teu site. Declarar a largura e a altura ajuda algumas plataformas a compor a pré-visualização antes de descarregarem a imagem, e o texto alternativo descreve-a a quem usa leitores de ecrã.

<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

Ligação do LinkedIn 1200 × 627

1200 × 627

Publicação no X 1600 × 900

1600 × 900

Cache e testes de imagens OG

As plataformas guardam as pré-visualizações em cache, por vezes durante muito tempo. Se mudares uma imagem mas mantiveres o endereço, as pessoas podem continuar a ver a antiga. Acrescenta uma versão ao endereço, como ?v=2, quando o design mudar, ou pede à plataforma que volte a obter a página. Para imagens a pedido, envia cabeçalhos de cache para o teu servidor e qualquer CDN guardarem o resultado.

• Cola a página no Post Inspector do LinkedIn para ver a pré-visualização e atualizar a cache.
• Usa o Sharing Debugger da Meta para o Facebook, que também consegue voltar a obter uma página.
• Cola a ligação num rascunho de publicação no X, ou numa conversa privada no Slack ou no WhatsApp, para veres a pré-visualização real sem enviar nada.
• Abre diretamente o endereço da imagem num navegador para confirmar que devolve um PNG, no tamanho certo, sem pedir início de sessão.

Trata as imagens OG como parte de qualquer lançamento: estão na lista de verificação dos nossos gráficos para o dia de lançamento, e o conjunto completo de formatos está em tamanhos de imagens para redes sociais. Se desenhas as tuas pré-visualizações na Gradiently, a sua API pode gerar um design guardado como PNG exato de 1200 × 630, o que serve pipelines e agentes de IA que fazem imagens por ti.