Tamanho da imagem OG: pré-visualizações de 1200×630 que funcionam

O tamanho da imagem OG que funciona em quase todo o lado é 1200×630 píxeis, uma proporção horizontal de cerca de 1,91 para 1. O Facebook, o LinkedIn, o X, o Slack, o Discord e a maioria das aplicações de mensagens constroem as pré-visualizações de ligações a partir desta única imagem, declarada na etiqueta og:image da tua página. O LinkedIn indica 1200×627 para a imagem de ligação, suficientemente perto para que um só ficheiro de 1200×630 sirva os dois.

Open Graph 1200×630

1200 × 630

Imagem de ligação do LinkedIn 1200×627

1200 × 627

Quadrado central 630×630

630 × 630

O que é uma imagem Open Graph e como são obtidas as pré-visualizações

O Open Graph é um conjunto de etiquetas meta no head de uma página web. Quando alguém cola a tua ligação numa publicação ou numa conversa, a plataforma envia um rastreador à página, lê essas etiquetas, descarrega a imagem e desenha o cartão de pré-visualização. Fá-lo uma vez e depois guarda o resultado em cache, às vezes durante dias.

Três pormenores apanham a maioria das pessoas. O endereço da imagem tem de ser um URL completo, a começar por https://, e não um caminho relativo. Tem de carregar para qualquer pessoa, sem sessão iniciada nem um aviso de cookies pelo meio. E as etiquetas têm de estar no HTML que o teu servidor envia, porque a maioria dos rastreadores não executa JavaScript, por isso as etiquetas acrescentadas por um script depois de a página carregar 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" />

Desenhar uma imagem OG que se lê em tamanho de miniatura

Uma imagem de 1200×630 raramente é vista a 1200 píxeis. Num feed no telemóvel encolhe até uma faixa com a largura do ecrã, e numa conversa pode ser ainda mais pequena. Desenha para a versão pequena: um título curto, letra grande, contraste forte e nada de importante nos cantos.

• Três a sete palavras. O título da página reduzido ao essencial, não o título completo.
• Letra grande. Na tela de 1200×630, um título com cerca de 64 a 96 píxeis de altura continua legível quando a pré-visualização encolhe.
• Margens de cerca de 60 píxeis ou mais, para que nada toque numa margem que uma plataforma possa arredondar ou recortar.
• Uma pequena assinatura da marca, como um logótipo em texto ou o nome do teu site, sempre no mesmo sítio em todas as imagens.
• Um fundo coerente, para que as pessoas reconheçam as tuas ligações antes de as lerem.

O contraste importa mais em tamanhos pequenos, não menos. Confirma que o teu título cumpre as proporções de contraste de cor e, se o fundo for um gradiente, testa o contraste onde as palavras ficam de facto. Texto sobre gradiente mostra como encontrar a zona calma.

Uma imagem OG para o site inteiro, ou uma por página

Todos os sites precisam de uma imagem por omissão para as páginas que não têm nada melhor. Mas uma imagem por omissão em todas as páginas faz com que todas as ligações partilhadas pareçam iguais, e ninguém percebe pela pré-visualização de que página se trata. As páginas que as pessoas mais partilham merecem a sua própria imagem.

Fazer à mão uma imagem separada para cada artigo não escala. A maioria das frameworks modernas consegue gerar uma imagem OG a partir de um modelo quando a página é construída ou pedida pela primeira vez; imagens OG dinâmicas explica a abordagem.

Como testar as tuas pré-visualizações de ligações

1. 1

   Verifica as etiquetas

   Abre a página, vê o código-fonte e procura og:image. Se não estiver no código-fonte, os rastreadores não a veem.

2. 2

   Abre o endereço da imagem

   Cola o URL de og:image numa janela privada do navegador. Deve carregar diretamente, por https, sem sessão iniciada.

3. 3

   Usa o inspetor da plataforma

   O LinkedIn Post Inspector mostra como o LinkedIn vê um URL e atualiza a sua cache. O Facebook tem um Sharing Debugger semelhante.

4. 4

   Envia-a a ti próprio

   Cola a ligação numa aplicação de conversa e num rascunho de publicação. Vê a pré-visualização num telemóvel, onde fica mais pequena.

5. 5

   Força a atualização da cache depois de mudanças

   Se uma imagem antiga continuar a aparecer, dá à imagem nova um endereço novo, por exemplo acrescentando ?v=2 ao URL, e inspeciona de novo.

Formato e peso do ficheiro

Usa PNG para cartões desenhados com texto e cor lisa, e JPEG para imagens fotográficas. Evita o SVG, que a maioria dos rastreadores não aceita para pré-visualizações, e tem cuidado com formatos mais recentes que algumas plataformas podem não ler. Mantém o ficheiro leve para que o rastreador o obtenha depressa; um cartão desenhado raramente precisa de ser grande. Um toque de grão evita que um gradiente crie faixas quando uma plataforma o volta a comprimir.

Na Gradiently, a Pré-visualização de ligação (Open Graph) 1200×630 é um dos tamanhos incluídos, por isso podes voltar a compor uma publicação como pré-visualização com copiar para tamanhos e manter um só visual entre a publicação e a ligação. Num lançamento, a imagem OG é um item de uma lista mais longa; gráficos para o dia de lançamento tem a lista completa.