Tamanho da Imagem Open Graph: Um Arquivo para Todas as Plataformas

Uma imagem em 1200 por 630 pixels, em PNG ou JPEG, abaixo de aproximadamente 1 MB, com o conteúdo importante dentro da área central de 1080 por 600. Esse arquivo é renderizado corretamente no Facebook, LinkedIn, X, Slack, Discord, WhatsApp e iMessage, o que é a resposta completa para a pergunta sobre o tamanho da imagem Open Graph em quase todos os sites.

As dimensões são a parte fácil. Normalmente também não são o que quebra. O que quebra é um texto posicionado perto demais de uma borda que uma plataforma corta, uma imagem que nunca atualiza porque um rastreador guardou a antiga em cache meses atrás, ou um cartão que é renderizado sem imagem nenhuma porque o arquivo tinha 4 MB em uma origem lenta. A pergunta sobre o tamanho da imagem OG é na verdade três perguntas, e apenas uma delas é sobre pixels. Este guia cobre a especificação, a zona segura, o comportamento de cache que faz as pessoas pensarem que suas tags estão erradas, e como as prévias se resolvem quando o que está sendo compartilhado é um link curto. Se sua prévia está totalmente ausente em vez de mal cortada, prévia de link não aparece é o guia de diagnóstico.

O Tamanho, e Por Que É Esse Tamanho

A proporção 1.91:1 vem do cartão de link do Facebook, e ela pegou porque todos os outros adotaram um layout compatível em vez de inventar o próprio. O próprio protocolo Open Graph não diz nada sobre pixels; ele define og:image como uma URL e deixa a renderização a cargo do consumidor, o que é exatamente por que um padrão de fato se formou em torno de um tamanho conveniente.

As próprias orientações do Facebook sobre compartilhamento de imagens colocam o mínimo em 200 por 200 e recomendam o arquivo maior para telas de alta resolução, e o X documenta a marcação do cartão separadamente, que é o único lugar onde você precisa de uma tag específica da plataforma em vez de um arquivo específico da plataforma.

A Zona Segura Que Ninguém Menciona

Um cartão raramente é exibido na proporção em que você o projetou. Aplicativos de chat cortam para quase quadrado na miniatura, alguns feeds cortam as laterais em viewports estreitos, e um canto arredondado consome os últimos pixels de um logo no canto.

Mantenha tudo que precisa sobreviver dentro da área central de 1080 por 600, centralizado, e trate a faixa externa como decoração que você pode se dar ao luxo de perder. Na prática, isso significa que o título fica centralizado à esquerda em vez de encostado na borda, o logo vive dentro da margem em vez do canto, e não há borda fina, porque uma borda é o único elemento de design que parece quebrado no instante em que é cortado.

O contraste importa mais do que parece também. Os cartões são renderizados em branco em um cliente e em quase preto em outro, então uma imagem que depende do fundo ao redor para se separar perde suas bordas em metade deles.

As Tags Ao Redor da Imagem

Quatro tags fazem o trabalho. Duas delas são as que as pessoas pulam.

<meta property="og:image" content="https://example.com/og/spring-launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
  property="og:image:alt"
  content="Spring launch: 30 percent off through May"
/>
<meta name="twitter:card" content="summary_large_image" />

A URL precisa ser absoluta, incluindo o esquema e o host, porque o rastreador lê a tag sem nenhum contexto de página para resolver um caminho relativo. Largura e altura permitem que a plataforma reserve o espaço certo antes que o arquivo chegue, o que é a diferença entre um cartão que aparece instantaneamente e um que se reorganiza depois. E og:image:alt é a tag de acessibilidade que não custa nada e está ausente em quase todo lugar.

Por Que Sua Nova Imagem Não Vai Aparecer

Esse é o problema que gera tickets de suporte. Você corrigiu a imagem, consegue ver o novo arquivo na URL dela, e o cartão ainda mostra o design do trimestre passado.

Rastreadores sociais armazenam em cache de forma agressiva, e não são nada sutis quanto a isso. Uma vez que uma URL foi rastreada, a versão armazenada é o que é renderizado nos compartilhamentos seguintes, às vezes por semanas, e nada em editar seu HTML avisa a eles para olhar de novo. Três saídas, na ordem em que eu tentaria:

• Force um novo rastreamento com a ferramenta da própria plataforma: o Facebook Sharing Debugger e o LinkedIn Post Inspector, ambos buscam a página novamente sob demanda.
• Publique a imagem em um novo nome de arquivo, que é uma URL diferente e, portanto, não tem nenhuma entrada em cache. Essa é a confiável.
• Mude a própria URL compartilhada, o que é extremamente fácil quando o que você está compartilhando é um link curto que você controla, em vez de um endereço de página permanente.

Antes de publicar qualquer coisa, o verificador de Open Graph mostra o cartão exatamente como um rastreador o construiria, o que leva dez segundos e evita o constrangimento de um novo compartilhamento.

Prévias Quando Você Compartilha um Link Curto

Um link curto não tem tags Open Graph próprias e não precisa de nenhuma. O rastreador segue o redirecionamento, pousa no destino, e constrói o cartão a partir das tags de lá, o que significa que uma URL encurtada herda qualquer prévia que a página de destino tenha. Se o cartão está errado, as tags no destino estão erradas.

Duas coisas dependem da camada do link. O redirecionamento precisa ser seguível por um rastreador, o que é o caso normal para um salto no lado do servidor, mas não para um redirecionamento em JavaScript, mais um motivo para manter a cadeia curta e no lado do servidor. E como a prévia pertence ao destino, redirecionar um link curto para outro lugar também muda sua prévia, o que é uma propriedade discretamente útil quando uma página de campanha é substituída depois que o link já foi compartilhado.

Se você quer o link, o cartão e os dados de cliques em um só lugar, comece um workspace no seu próprio domínio e verifique o cartão com a ferramenta antes do envio, não depois.

Uma Lista de Verificação Que Vale a Pena Guardar

• 1200 por 630, PNG ou JPEG, abaixo de 1 MB, URL absoluta em HTTPS. Essa é toda a decisão sobre o tamanho da imagem OG.
• Nada que importe fora da área central de 1080 por 600, sem bordas finas.
• og:image:width, og:image:height e og:image:alt presentes.
• twitter:card definido como summary_large_image se você quiser o cartão grande no X.
• Nova imagem, novo nome de arquivo, e então um novo rastreamento antes de anunciar qualquer coisa.

Acerte essas cinco coisas uma vez, transforme-as em um modelo no head da sua página, e as imagens Open Graph param de ser algo em que você pensa. O que é a quantidade certa de atenção para dar a elas.

Leia a série cornerstone

Este artigo está no cluster de tutoriais. Para prévias que falham completamente em vez de serem mal cortadas, prévia de link não aparece é a correção plataforma por plataforma, e como criar um link clicável cobre a camada por baixo disso.

Relacionados no Blog

• Prévia de Link Não Aparece? Causas e Como Corrigir
• Encurtar um Link para X (Twitter): O Que o t.co Faz com Ele
• Como rastrear links de redes sociais: cliques por canal
• O que é um link com marca própria, e por que ele converte melhor
• Como redirecionar um URL: seis formas, e quando cada uma é a certa
• Domínios personalizados para links curtos: DNS, TLS e a borda