Imagens Open Graph para o site do seu app

Atualizado em 30 de outubro de 2026

Uma imagem Open Graph é a imagem que aparece quando alguém compartilha um link do seu site no X, LinkedIn, Facebook, Slack, iMessage e na maioria dos outros apps. Faça-a com 1200 × 630 pixels (1,91:1), defina-a com a tag og:image, adicione twitter:card com o valor summary_large_image para o X mostrá-la grande, mantenha o texto longe das bordas e teste antes de compartilhar o link.

O que é uma imagem Open Graph

O Open Graph é um conjunto de meta tags, criado pelo Facebook, que diz a outros apps como mostrar um link da sua página: título, descrição, URL e imagem. Quando você cola um link em um post ou um chat, o app busca a página, lê essas tags e monta um card de prévia.

Sem uma tag de imagem, o app tenta adivinhar. Pode escolher seu logo, uma imagem qualquer da página ou nada. Para o site de um app, esse card costuma ser a primeira coisa que as pessoas veem do seu produto, então vale a pena controlá-lo.

O tamanho: 1200 × 630

O protocolo Open Graph em si não define um tamanho em pixels. Na prática, 1200 × 630, uma proporção de 1,91:1, aparece como um card de largura total em quase todas as plataformas, e os 1200 × 627 do LinkedIn são próximos o bastante para a mesma imagem funcionar lá. Use esse tamanho e exporte em JPEG ou PNG com menos de alguns megabytes, para carregar rápido quando o app buscar a imagem.

Mantenha uma área segura

Cada app corta a imagem de um jeito um pouco diferente, e alguns a mostram menor, como miniatura. Para ela ficar legível em todo lugar:

Mantenha o texto e o dispositivo a pelo menos 60 a 80 pixels de cada borda.
Coloque a parte importante nos dois terços centrais.
Use letras grandes: um título de no máximo cinco palavras, com pelo menos 60 pixels de altura.
Não repita o título da página na imagem. O card já mostra o título embaixo dela.

As tags a adicionar

Coloque estas tags no <head> de cada página. O protocolo Open Graph lista og:title, og:type, og:image e og:url como obrigatórias e pede og:image:alt sempre que você definir uma imagem.

Tag	Exemplo de valor
`og:title`	SeuApp – Acompanhe seus hábitos
`og:description`	Uma frase sobre o que o app faz.
`og:type`	website
`og:url`	https://seuapp.com/
`og:image`	https://seuapp.com/og.jpg (uma URL completa, não um caminho relativo)
`og:image:width` / `og:image:height`	1200 / 630
`og:image:alt`	A tela inicial do app em um iPhone, sobre um fundo azul.
`twitter:card`	summary_large_image

Em HTML, fica assim:

<meta property="og:image" content="https://yourapp.com/og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The app's home screen on an iPhone">
<meta name="twitter:card" content="summary_large_image">

O X lê as tags Open Graph para o título, a descrição e a imagem quando as versões twitter: dele não existem, então twitter:card costuma ser a única tag específica do X de que você precisa. Sem ela, o X pode mostrar um card pequeno ou nenhum.

Uma imagem por página

A página inicial fica com a imagem principal. Outras páginas podem ter a sua:

Páginas de recursos: a tela daquele recurso, emoldurada.
Posts de blog e guias: o título do post sobre o fundo da sua marca, ou a captura de tela de que o post trata.
Changelog ou notas de versão: a tela nova daquela versão.

Uma imagem específica da página faz um link compartilhado parecer feito para aquela conversa, e recebe mais cliques do que o mesmo card com logo em todas as páginas.

Teste a prévia

Os apps guardam as prévias em cache, às vezes por dias, então teste antes de espalhar um link.

Abra a URL da imagem em um navegador. Se ela não carregar publicamente, nenhum app vai mostrá-la.
O Depurador de Compartilhamento do Facebook mostra o que o Facebook lê da sua página, e o botão Extrair Novamente atualiza uma prévia em cache.
O Post Inspector do LinkedIn faz o mesmo para o LinkedIn.
X: cole o link em um novo post sem enviar. O editor mostra o card que o X vai usar.
Mensagens e Slack: mande o link para você mesmo.

Se uma imagem antiga continuar aparecendo, mude o nome do arquivo da imagem (por exemplo, og-2.jpg) e atualize a tag. Uma URL nova escapa da maioria dos caches.

Erros comuns

Um caminho de imagem relativo. /og.jpg funciona no navegador, mas não em um card de prévia. Use a URL completa com https://.
Uma imagem bloqueada para robôs. Se o seu robots.txt ou uma página de login bloquear a imagem, os apps não conseguem buscá-la.
Texto pequeno. Em uma conversa, o card pode aparecer com um terço do tamanho. Qualquer coisa com menos de uns 40 pixels de altura no original fica ilegível.
Uma captura de celular alta sozinha. Cortada em 1,91:1, uma captura de celular mostra uma fatia da barra de status e pouco mais. Coloque-a em um quadro largo.

Crie uma com um dispositivo emoldurado

Para um app, a imagem Open Graph mais forte costuma ser o próprio app: sua melhor tela em uma moldura de dispositivo, sobre a cor da sua marca, com um título curto. Como 1,91:1 é largo, um único celular no meio deixa muito espaço. Use-o para um título ao lado do celular, ou mostre duas ou três telas em linha.

O FeatureFrame tem um quadro predefinido 1,91:1. No Mac:

Solte sua captura de tela. O FeatureFrame detecta o iPhone ou iPad pelo tamanho e o emoldura em um modelo 3D daquele dispositivo.
Escolha o quadro 1,91:1 e, como fundo, uma cor sólida, um gradiente ou uma imagem sua.
Incline um pouco o dispositivo, ou adicione até três capturas de tela no layout Linha.
Exporte em 720p como JPEG. Um quadro 1,91:1 sai com 1376 × 720, o mesmo formato de 1200 × 630 e um pouco mais nítido. Use assim mesmo ou redimensione para o tamanho exato.

Deixe o título para uma ferramenta de design ou para o template do seu site, se precisar de um; o dispositivo emoldurado é a parte difícil de fazer à mão.

Use a mesma imagem como a principal dos posts de lançamento: veja o checklist de imagens de lançamento. Para os outros tamanhos de que você vai precisar, veja tamanhos de imagem para compartilhar capturas de tela de apps e, para molduras de dispositivos avulsas, a biblioteca de molduras de dispositivos.