# Tamanho da imagem OG: prévias de link 1200×630 que funcionam

[Canonical HTML page](https://gradiently.design/pt-br/guide/open-graph-image-size)

Toda vez que alguém cola o seu link, uma pequena imagem decide se alguém vai clicar. Veja o tamanho, as tags e o layout que fazem essa imagem funcionar.

## The short version

- O tamanho de imagem Open Graph que funciona em quase todas as plataformas é 1200×630 pixels, uma proporção de cerca de 1,91 para 1.
- As plataformas leem a tag og:image no HTML da sua página quando um link é compartilhado e depois guardam a imagem em cache, então as mudanças podem não aparecer até a prévia ser atualizada.
- O endereço do og:image precisa ser uma URL https completa que carregue sem login, e as tags precisam estar no HTML que o servidor envia, não acrescentadas depois por JavaScript.
- As prévias de link costumam aparecer pequenas, então uma imagem OG precisa de um título curto em letras grandes, centralizado, com margens generosas.
- Alguns apps de mensagem cortam as prévias num quadrado, então as palavras mais importantes devem ficar no meio da imagem.

O **tamanho da imagem OG** que funciona quase em todo lugar é **1200×630 pixels**, uma proporção de paisagem de cerca de 1,91 para 1. Facebook, LinkedIn, X, Slack, Discord e a maioria dos apps de mensagem montam as prévias de link a partir dessa única imagem, declarada na tag `og:image` da sua página. O LinkedIn indica 1200×627 para a imagem de link, perto o bastante para que um único arquivo de 1200×630 sirva aos dois.

- Open Graph 1200×630: 1200 × 630
- Imagem de link do LinkedIn 1200×627: 1200 × 627
- Quadrado central 630×630: 630 × 630

A prévia de link padrão, a imagem de link quase idêntica do LinkedIn e o quadrado central que sobrevive quando um app corta a prévia.

## O que é uma imagem Open Graph e como as prévias são buscadas

O Open Graph é um conjunto de tags `meta` no `head` de uma página web. Quando alguém cola o seu link num post ou num chat, a plataforma envia um robô até a página, lê essas tags, baixa a imagem e desenha o cartão de prévia. Ela faz isso uma vez e depois guarda o resultado em cache, às vezes por dias.

Três detalhes pegam a maioria das pessoas. O endereço da imagem precisa ser uma **URL completa**, começando com `https://`, e não um caminho relativo. Ela precisa carregar para qualquer pessoa, sem login nem banner de cookies no caminho. E as tags precisam estar no HTML que o seu servidor envia, porque a maioria dos robôs não executa JavaScript, então tags acrescentadas por um script depois que a página carrega nunca são vistas.

```html
<meta property="og:title" content="How to design a launch post" />
<meta property="og:description" content="A short, specific summary of the page." />
<meta property="og:image" content="https://example.com/og/launch-post.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words Launch post design on a violet gradient" />
<meta property="og:url" content="https://example.com/guide/launch-post" />
<meta name="twitter:card" content="summary_large_image" />
```

As tags de que uma prévia de link precisa. O X lê as tags Open Graph quando as dele faltam, mas `twitter:card` definido como `summary_large_image` pede a prévia grande.

> **Largura e altura ajudam** Declarar `og:image:width` e `og:image:height` permite que algumas plataformas desenhem a prévia já no primeiro compartilhamento, em vez de esperar até baixar e medir a imagem.

## Como criar uma imagem OG que se lê em tamanho de miniatura

Uma imagem de 1200×630 raramente é vista com 1200 pixels. Num feed no celular, ela encolhe para uma faixa da largura da tela e, num chat, pode ficar menor ainda. Crie para a versão pequena: um título curto, letras grandes, contraste forte e nada importante nos cantos.

- **De três a sete palavras.** O título da página reduzido ao essencial, não o título completo.
- **Letras grandes.** Na tela de 1200×630, um título de cerca de 64 a 96 pixels de altura continua legível quando a prévia encolhe.
- **Margens de uns 60 pixels** ou mais, para que nada encoste numa borda que uma plataforma possa arredondar ou cortar.
- **Uma pequena assinatura de marca**, como um logotipo ou o nome do seu site, sempre no mesmo lugar em todas as imagens.
- **Um fundo consistente**, para que as pessoas reconheçam os seus links antes de lê-los.

Uma prévia de link de 1200 por 630 com a frase Como criar um post de lançamento sobre um fundo em gradiente

Uma prévia de link feita para a versão pequena: uma linha curta, grande e centralizada, com uma pequena assinatura acima.

### Evite

- O título completo da página em letras pequenas
- Um print da própria página
- Palavras nos cantos, onde os cortes quadrados as cortam
- Texto sobre uma foto carregada sem nenhuma área calma

### Faça

- Um título encurtado que se lê num relance
- Um cartão desenhado com uma ideia
- As palavras principais no quadrado central
- Um fundo calmo com contraste alto atrás do texto

O contraste importa mais em tamanhos pequenos, não menos. Confira se o seu título atinge as razões do guia de [contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility) e, se o fundo for um gradiente, teste o contraste onde as palavras realmente ficam. O guia de [texto sobre um gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) mostra como encontrar a zona calma.

## Uma imagem OG para o site todo ou uma por página

Todo site precisa de uma imagem padrão para as páginas que não têm nada melhor. Mas uma imagem padrão em todas as páginas faz todo link compartilhado parecer idêntico, e ninguém consegue saber pela prévia de que página se trata. As páginas mais compartilhadas merecem uma imagem própria.

| Tipo de página | O que a imagem deve dizer | Como fazer |
| --- | --- | --- |
| Página inicial | O seu nome e uma promessa de uma linha | Criada uma vez, à mão |
| Artigo ou guia | O título curto do artigo | Gerada a partir do título |
| Página de produto | Nome do produto, com o produto à mostra | Gerada, com a imagem do produto |
| Página de evento | Nome e data do evento | Criada com o visual do evento |
| Todo o resto | O seu nome e o seu fundo característico | A imagem padrão do site |

Onde uma imagem OG por página se justifica e onde a padrão basta.

Fazer uma imagem separada para cada artigo à mão não escala. A maioria dos frameworks modernos consegue renderizar uma imagem OG a partir de um template quando a página é gerada ou pedida pela primeira vez; o guia de [imagens OG dinâmicas](https://gradiently.design/pt-br/guide/dynamic-og-images) mostra a abordagem.

- Guias: violeta profundo: `linear-gradient(135deg, #140c2e 0%, #3b1f7a 55%, #7c4dff 100%)`
- Produto: verde-azulado escuro: `linear-gradient(135deg, #07201f 0%, #0e4d4a 55%, #2dd4bf 100%)`
- Eventos: brasa: `linear-gradient(135deg, #2a0f0a 0%, #7a2a14 55%, #ff8a4c 100%)`

Uma família, três seções: a mesma estrutura do escuro ao claro e o mesmo ângulo, com um matiz diferente por seção, para que as prévias sejam consistentes e ainda digam às pessoas para onde o link vai.

## Como testar as suas prévias de link

1. **Confira as tags** Abra a página, veja o código-fonte e procure por `og:image`. Se não estiver no código-fonte, os robôs não vão ver.
2. **Abra o endereço da imagem** Cole a URL do `og:image` numa janela anônima do navegador. Ela deve carregar direto, por https, sem login.
3. **Use o inspetor da plataforma** O [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/) mostra como o LinkedIn vê uma URL e atualiza o cache dele. O Facebook tem um Depurador de Compartilhamento parecido.
4. **Envie para você mesmo** Cole o link num app de chat e num rascunho de post. Veja a prévia no celular, onde ela fica menor.
5. **Limpe o cache depois de mudanças** Se uma imagem antiga continuar aparecendo, dê à nova imagem um novo endereço, por exemplo acrescentando `?v=2` à URL, e inspecione de novo.

## Formato e peso do arquivo

Use **PNG** para cartões desenhados com texto e cor chapada e **JPEG** para imagens fotográficas. Evite SVG, que a maioria dos robôs não aceita para prévias, e tenha cuidado com formatos mais novos que algumas plataformas podem não ler. Mantenha o arquivo leve para que o robô o busque rápido; um cartão desenhado raramente precisa ser grande. Um toque de grão evita que um gradiente crie faixas quando uma plataforma o recomprime.

No Gradiently, a **Prévia de link (Open Graph) 1200×630** é um dos tamanhos prontos, então você pode diagramar um post de novo como prévia com o **copiar para tamanhos** e manter um só visual no post e no link. Num lançamento, a imagem OG é um item de uma lista mais longa; as [artes de lançamento](https://gradiently.design/pt-br/guide/launch-day-graphics) trazem o checklist completo.

## FAQ

### Qual é o melhor tamanho de imagem OG?

1200×630 pixels, uma proporção de cerca de 1,91 para 1. Funciona no Facebook, no LinkedIn, no X, no Slack e na maioria dos apps de mensagem.

### Por que a minha prévia de link mostra uma imagem antiga?

As plataformas guardam as prévias em cache. Atualize a página no inspetor da plataforma, como o LinkedIn Post Inspector, ou dê à nova imagem uma nova URL para que ela seja buscada de novo.

### Por que a minha imagem OG não aparece de jeito nenhum?

Normalmente a URL do og:image é relativa, está bloqueada por um login ou é acrescentada por JavaScript depois que a página carrega. Use uma URL https completa no HTML renderizado pelo servidor.

### O X usa imagens Open Graph?

Usa. O X recorre às tags Open Graph quando as dele faltam. Acrescente uma tag twitter:card definida como summary_large_image para ter a prévia grande.

### Toda página deve ter a sua própria imagem OG?

As páginas muito compartilhadas, como artigos, produtos e eventos, ganham com uma imagem própria. Todo o resto pode usar uma boa imagem padrão para o site.