Prévias de link: o tamanho de imagem OG que funciona em toda parte

As tags que fazem funcionar

Quatro tags Open Graph fazem quase todo o trabalho, e o X lê essas mesmas tags a menos que você as substitua. O resto é refinamento opcional.

• `og:image` — uma URL absoluta, com protocolo e domínio. Um caminho relativo é o motivo isolado mais comum de uma prévia não mostrar imagem nenhuma.
• `og:title` — a manchete no cartão. Cerca de 60 caracteres antes de truncar, e ela não precisa ser idêntica ao título da sua página.
• `og:description` — uma ou duas frases, mais ou menos 150 a 160 caracteres. As plataformas truncam em pontos diferentes, então coloque o sentido na frente.
• `og:url` — a URL canônica. Isso impede que a mesma página compartilhada com parâmetros de rastreamento diferentes seja cacheada como várias prévias separadas.
• `twitter:card` com o valor summary_large_image — sem ela, o X pode renderizar uma miniatura quadrada pequena ao lado do texto em vez do cartão de largura total.

Dois detalhes respondem por boa parte das prévias quebradas. A URL da imagem precisa ser publicamente acessível sem login, porque o rastreador da plataforma a busca como visitante anônimo — uma imagem atrás de autenticação, ou num servidor de homologação protegido, simplesmente falha. E a própria página precisa ser alcançável por esse mesmo rastreador, e é por isso que prévias frequentemente funcionam num navegador e falham num aplicativo de chat.

Tamanho de arquivo e formato

Imagens de cartão têm tetos, e ultrapassá-los faz a prévia cair silenciosamente para nenhuma imagem em vez de mostrar erro. Mantenha uma imagem OG abaixo de 1 MB como alvo prático — o máximo absoluto fica em torno de 8 MB, e o limite próprio do X para imagens de cartão é 5 MB, com mínimo de 300 × 157 pixels e máximo de 4096 × 4096.

O WebP merece um alerta. A maioria das plataformas já dá conta dele, mas alguns leitores de prévia mais antigos não, e o modo de falha é uma imagem ausente em vez de um plano B. Se um link importa comercialmente, JPEG ou PNG continuam sendo a escolha segura; comprimir um JPEG direito já entrega a maior parte da economia mesmo assim. A transparência é a outra armadilha — um PNG transparente será composto sobre o fundo que a plataforma usar, o que no modo escuro pode deixar um texto escuro invisível.

Desenhar um cartão que funcione em miniatura

Uma prévia de link raramente é vista em tamanho cheio. No Slack ela tem algumas centenas de pixels de largura; num celular ela compete com todo o resto do feed. Designs que funcionam num monitor falham sistematicamente nessa escala, e as falhas são consistentes o bastante para serem evitáveis.

• Seis a oito palavras no máximo. Um cartão é um cartaz, não um parágrafo. Se a manchete precisa de três linhas a 1200 pixels de largura, ela é ilegível a 400.
• Use tipografia bem maior do que parece certo. De 60 a 90 pixels para uma manchete numa tela de 1200 pixels. Abaixo de uns 40 pixels tudo some.
• Contraste alto, sempre. Texto sobre uma fotografia precisa de um véu ou de um painel sólido atrás; cinza claro sobre branco desaparece por completo em tamanhos pequenos.
• Não repita a manchete. No Facebook, no LinkedIn e no Slack o cartão já mostra o seu og:title como texto abaixo da imagem (o X mostra no máximo um título pequeno). Colocar as mesmas palavras na figura desperdiça o espaço — use-o para um logotipo, uma categoria ou uma única ideia visual.
• Teste em tamanho pequeno. Reduza o design para 400 pixels de largura e olhe. Isso está mais perto de como a maioria vai ver do que a tela em que você desenhou.
• Mantenha um modelo. Quando um leiaute funcionar, reutilize-o com outro texto. Cartões reconhecíveis valem mais que cartões individualmente espertos.

Quando a prévia mostra a coisa errada

Você conserta a imagem, compartilha o link, e a figura antiga aparece assim mesmo. Isso é cache, não um erro nas suas tags. Toda plataforma guarda a prévia que montou na primeira vez que alguém compartilhou aquela URL, às vezes por semanas, e não vai buscá-la de novo só porque a página mudou.

Uma nota prática sobre fazer as imagens: desenho de cartão é justamente o tipo de tarefa pequena e repetida que as pessoas entregam a um gerador online sem pensar muito, e esses geradores enviam o que você der a eles — inclusive capturas de produtos não lançados e manchetes anteriores ao anúncio. As ferramentas de design e de imagem daqui — o criador de cartazes, o redimensionador e o compressor — rodam inteiramente no seu dispositivo, então um cartão para algo sob embargo é montado e exportado sem nada ser transmitido.