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

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

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.

<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" />

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.

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 e, se o fundo for um gradiente, teste o contraste onde as palavras realmente ficam. O guia de texto sobre um gradiente 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.

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 mostra a abordagem.

Como testar as suas prévias de link

1. 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. 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. 3

   Use o inspetor da plataforma

   O LinkedIn Post Inspector mostra como o LinkedIn vê uma URL e atualiza o cache dele. O Facebook tem um Depurador de Compartilhamento parecido.

4. 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. 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 trazem o checklist completo.