# Imagens OG dinâmicas: gere prévias de link automaticamente [Canonical HTML page](https://gradiently.design/pt-br/guide/dynamic-og-images) Fazer à mão uma imagem de prévia para cada página não escala, e uma imagem genérica para o site inteiro desperdiça a imagem mais vista que você tem. Gere-as. ## The short version - Uma imagem OG dinâmica é uma imagem de prévia Open Graph gerada automaticamente para cada página, em geral a partir do título, da categoria e de um fundo de marca consistente. - O tamanho padrão é 1200 × 630 pixels, e a página precisa apontar para a imagem com uma URL absoluta na tag og:image. - Você pode gerar imagens OG uma vez na hora do build, que é o mais barato, ou sob demanda, que serve a páginas cujos dados mudam, desde que o resultado fique em cache. - As plataformas guardam em cache as imagens de prévia por URL, então trocar uma imagem costuma significar trocar o endereço dela ou pedir à plataforma que busque a página de novo. - Desenhe o modelo pensando numa miniatura: um título curto em tipografia grande, margens generosas e um fundo que continue reconhecível quando pequeno. 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](https://gradiently.design/pt-br/guide/open-graph-image-size). ## 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. Uma imagem de prévia de link com o texto Como corrigir o banding em gradientes sobre um fundo de gradiente Um modelo, preenchido com o título de um artigo… O mesmo modelo de prévia de link com o texto Como escolher as cores da marca …e com o de outro. Consistente o bastante para reconhecer, específico o bastante para clicar. ## 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. **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. **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. **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. **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. **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](https://gradiently.design/pt-br/guide/text-on-gradient) explica como. ### Prévia fraca - O mesmo cartão com o logotipo em toda página - Título e descrição inteiros espremidos em fonte pequena - Texto encostado nas bordas - Uma foto agitada atrás de palavras brancas ### Prévia forte - O título da própria página, grande - Uma etiqueta curta de contexto - Margens largas que sobrevivem a um recorte - Um fundo de marca calmo e com contraste claro ## 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. | Abordagem | Melhor para | Atenção a | | --- | --- | --- | | No build | Artigos, documentação, páginas de destino | O tempo de build cresce com o número de páginas | | Sob demanda, com cache | Perfis, produtos, conteúdo de usuários | Defina cabeçalhos de cache; renderizações a frio são mais lentas | | Feita à mão | Um punhado de páginas principais | Não escala e fica desatualizada | 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. ```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 diminui de tamanho quando é longo, e a fonte é carregada como um arquivo TTF. > **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`, aceitam flexbox e um subconjunto do CSS. Layouts em grid não funcionam e as fontes devem ser TTF, OTF ou WOFF, não WOFF2. Confira a lista do seu framework antes de desenhar algo que ele não sabe desenhar. ## 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. ```html ``` As tags de que uma página precisa para uma prévia grande. O `twitter:card` pede ao X o layout de imagem grande. - Open Graph 1200 × 630: 1200 × 630 - Link do LinkedIn 1200 × 627: 1200 × 627 - Post do X 1600 × 900: 1600 × 900 As prévias de link ficam perto de 1,91:1. Uma imagem de 1200 × 630 cobre os casos comuns; uma imagem separada para o anexo de um post é outro trabalho. ## 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](https://www.linkedin.com/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](https://gradiently.design/pt-br/guide/launch-day-graphics), e o conjunto completo de formatos está em [tamanhos de imagem para redes sociais](https://gradiently.design/pt-br/guide/social-media-image-sizes). 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ê. ## FAQ ### O que é uma imagem OG dinâmica? É uma imagem de prévia de link Open Graph gerada automaticamente para cada página, em geral a partir do título e dos dados da página, num modelo consistente da marca, e não desenhada à mão. ### Qual deve ser o tamanho de uma imagem OG? 1200 × 630 pixels é o padrão. Mantenha as palavras importantes longe das bordas, porque alguns apps mostram uma versão menor ou recortada. ### Por que a prévia antiga continua aparecendo depois que troquei a imagem OG? As plataformas guardam em cache as imagens de prévia por URL. Mude o endereço da imagem, por exemplo com uma query de versão, ou use o inspetor ou o debugger da plataforma para buscar a página de novo. ### Devo gerar imagens OG no build ou sob demanda? O build é mais barato e serve a páginas que raramente mudam. Gere sob demanda para páginas cujos dados mudam e guarde o resultado em cache para não redesenhá-lo a cada visita. ### A og:image precisa de uma URL absoluta? Precisa. Use o endereço completo, com https e o domínio, porque os rastreadores leem a tag de fora do seu site.