# Imagens OG dinâmicas: pré-visualizações automáticas [Canonical HTML page](https://gradiently.design/pt-pt/guide/dynamic-og-images) Fazer à mão uma imagem de pré-visualização para cada página não escala, e uma imagem genérica para o site inteiro desperdiça a imagem mais vista que tens. Gera-as em vez disso. ## The short version - Uma imagem OG dinâmica é uma imagem de pré-visualização Open Graph gerada automaticamente para cada página, normalmente a partir do título, da categoria e de um fundo de marca coerente. - O tamanho padrão é 1200 × 630 píxeis, e a página tem de apontar para a imagem com um URL absoluto na etiqueta og:image. - Podes gerar imagens OG uma vez na compilação, o que é mais barato, ou a pedido, o que serve páginas cujos dados mudam, desde que o resultado fique em cache. - As plataformas guardam em cache as imagens de pré-visualização por URL, por isso mudar uma imagem costuma implicar mudar o seu endereço ou pedir à plataforma que volte a obter a página. - Desenha o modelo para uma miniatura: um título curto em tipografia grande, margens generosas e um fundo que continue reconhecível em pequeno. 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](https://gradiently.design/pt-pt/guide/open-graph-image-size). ## 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. Uma imagem de pré-visualização de ligação com o texto Como corrigir faixas em gradientes sobre um fundo em gradiente Um modelo, preenchido com o título de um artigo… O mesmo modelo de pré-visualização de ligação com o texto Escolher as cores da marca …e com o de outro. Coerente o bastante para reconhecer, específico o bastante para clicar. ## 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. **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. **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. **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. **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. **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](https://gradiently.design/pt-pt/guide/text-on-gradient) explica como. ### Pré-visualização fraca - O mesmo cartão de logótipo em todas as páginas - Título e descrição completos espremidos em letra pequena - Texto a tocar nas margens - Uma fotografia carregada por trás de palavras brancas ### Pré-visualização forte - O título da própria página, em grande - Uma etiqueta curta para dar contexto - Margens largas que sobrevivem a um corte - Um fundo de marca calmo com contraste claro ## 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. | Abordagem | Melhor para | Cuidado com | | --- | --- | --- | | Na compilação | Artigos, documentação, páginas de destino | O tempo de compilação cresce com o número de páginas | | A pedido, em cache | Perfis, produtos, conteúdo de utilizadores | Define cabeçalhos de cache; os primeiros desenhos são mais lentos | | Feita à mão | Um punhado de páginas essenciais | Não escala e fica desatualizada | 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. ```ts // 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( (
Field Guide
40 ? 60 : 76, lineHeight: 1.1 }}> {article.title}
), { ...size, fonts: [{ name: 'Inter', data: font, weight: 600, style: 'normal' }] }, ) } ``` Uma imagem OG por artigo no Next.js. O título reduz de tamanho quando é longo, e a fonte é carregada como ficheiro TTF. > **Os geradores de imagem só falam parte do CSS** As bibliotecas que transformam marcação em imagens, como a que está por trás do `ImageResponse`, suportam flexbox e um subconjunto do CSS. Os layouts em grelha não funcionam, e as fontes têm de ser TTF, OTF ou WOFF, não WOFF2. Confirma a lista da tua framework antes de desenhares algo que ela não consegue desenhar. ## 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ã. ```html ``` As etiquetas de que uma página precisa para uma pré-visualização grande. O `twitter:card` pede ao X o formato de imagem grande. - Open Graph 1200 × 630: 1200 × 630 - Ligação do LinkedIn 1200 × 627: 1200 × 627 - Publicação no X 1600 × 900: 1600 × 900 As pré-visualizações de ligações ficam perto de 1,91:1. Uma imagem de 1200 × 630 cobre os casos comuns; uma imagem separada para o anexo de uma publicação é outro trabalho. ## 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](https://www.linkedin.com/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](https://gradiently.design/pt-pt/guide/launch-day-graphics), e o conjunto completo de formatos está em [tamanhos de imagens para redes sociais](https://gradiently.design/pt-pt/guide/social-media-image-sizes). 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. ## FAQ ### O que é uma imagem OG dinâmica? É uma imagem de pré-visualização de ligação Open Graph gerada automaticamente para cada página, normalmente a partir do título e dos dados da página num modelo de marca coerente, em vez de desenhada à mão. ### Que tamanho deve ter uma imagem OG? 1200 × 630 píxeis é o padrão. Mantém as palavras importantes longe das margens, porque algumas apps mostram uma versão mais pequena ou cortada. ### Porque é que a pré-visualização antiga continua a aparecer depois de eu mudar a imagem OG? As plataformas guardam em cache as imagens de pré-visualização por URL. Muda o endereço da imagem, por exemplo com uma versão na query, ou usa o inspetor ou depurador da plataforma para voltar a obter a página. ### Devo gerar as imagens OG na compilação ou a pedido? A compilação é mais barata e serve páginas que raramente mudam. Gera a pedido para páginas cujos dados mudam e guarda o resultado em cache para não ser redesenhado a cada visita. ### O og:image precisa de um URL absoluto? Sim. Usa o endereço completo com https e o domínio, porque os rastreadores leem a etiqueta de fora do teu site.