Prévia de link: o que aparece quando alguém compartilha

Quando alguém cola o endereço de uma página no LinkedIn ou no WhatsApp, a plataforma visita a página e monta um card com título, descrição e imagem. Esses dados saem de tags og: no <head>, do padrão Open Graph (ogp.me (em inglês)). O título e a descrição que vão nessas tags eu discuto no texto sobre título e descrição da página. Aqui o foco é o resto do card: quais tags existem, que imagem usar e por que a correção às vezes não aparece.

Quais tags o card lê

O protocolo Open Graph pede quatro propriedades em toda página (ogp.me (em inglês)):

og:title, o título como deve aparecer no card;
og:type, o tipo de conteúdo, como article para um texto;
og:image, o endereço da imagem que representa a página;
og:url, o endereço canônico, que funciona como a identidade permanente da página.

A descrição, og:description, fica na lista de opcionais recomendadas, com uma ou duas frases. Na mesma lista estão og:locale, que informa o idioma, e og:site_name, o nome do site que aparece no card.

A imagem aceita detalhes próprios, como tipo, largura e altura. O protocolo diz ainda que toda página com og:image deveria ter og:image:alt, uma descrição do que a imagem mostra (ogp.me (em inglês)).

O que o LinkedIn exige

A ajuda do LinkedIn lista quatro tags que precisam existir na página: título, imagem, descrição e URL (Ajuda do LinkedIn, Tornar seu site compartilhável). Para a imagem do card, os números são estes:

no mínimo 1200 por 627 pixels;
proporção recomendada de 1,91 para 1;
arquivo de até 5 MB.

O mesmo texto avisa que imagem com menos de 401 pixels de largura aparece como miniatura, pequena ao lado do título. Ele também dá a causa mais provável quando a imagem cumpre tudo e mesmo assim não aparece: o site bloqueia o acesso do LinkedIn ao arquivo, ou o arquivo está numa pasta protegida (Ajuda do LinkedIn).

O que o Google pede da mesma imagem

O Google também lê a og:image. Ela é uma das formas de indicar a imagem preferida da página, ao lado do dado estruturado (Google, práticas de SEO para imagens). As recomendações para essa escolha cabem numa lista:

a imagem deve ser relevante e representar a página;
não deve ser genérica, como o logotipo do site;
não deve ter texto;
deve fugir de proporção extrema, estreita ou larga demais;
deve ter alta resolução, quando possível.

O Discover, a lista de sugestões de leitura do Google, tem uma régua mais exata (Google, seu conteúdo no Discover). Ele pede imagem com pelo menos 1200 pixels de largura, mais de 300 mil pixels no total e proporção 16:9. A página também precisa liberar a imagem grande com a configuração max-image-preview:large. Como o Google recorta a imagem sozinho, o que importa nela deve sobreviver ao corte.

A imagem pequena precisa dizer algo

No feed, o card disputa atenção com tudo em volta, e a imagem muitas vezes aparece pequena. O Nielsen Norman Group, o NN/g, diz que a imagem ao lado de um link deve descrever e representar o conteúdo da página. O mesmo texto critica sites que escolhem imagens genéricas, pouco ligadas ao assunto (Raluca Budiu, NN/g, 2020 (em inglês)).

Em tamanho reduzido, o detalhe some. Num artigo de 2013 sobre colunas laterais, o NN/g relata que, no rastreamento do olhar, imagens simples, com fundo limpo e objeto fácil de reconhecer, atraíram mais atenção que imagens carregadas (Hoa Loranger, NN/g (em inglês)). Quando a pessoa não decifra a imagem rápido, ela ignora o conteúdo inteiro em volta.

Um texto de 2015 sobre miniaturas em listas no celular dá um teste simples (Aurora Harley, NN/g (em inglês)). Pergunte se alguém conseguiria escolher só pela imagem. Se ela é pequena demais para mostrar o que importa, ou se é uma foto genérica de banco de imagens, ela não ajuda.

Por que a prévia velha não some

A plataforma guarda o card depois de ler o endereço. Segundo a ajuda do LinkedIn, se o link já foi compartilhado antes, a janela de prévia pode mostrar a imagem antiga, que ficou em cache (Ajuda do LinkedIn, Post Inspector). Para forçar uma leitura nova, cole o endereço no Post Inspector (em inglês) e confira o card que ele devolve.

Há um limite nessa correção. Ela vale só para publicações novas com aquele link. Os posts que já saíram continuam com a prévia antiga (Ajuda do LinkedIn).

Como fiz no kahue.net

Cada página do site declara as quatro tags do protocolo e mais a descrição. O idioma vai em og:locale, e os outros dois idiomas do site vão em og:locale:alternate. A imagem sai com endereço completo, com domínio, porque o arquivo é servido da raiz do site, e não do caminho de cada página. Tipo, largura e altura da imagem também vão declarados.

Cada post tem três capas, uma por idioma, em 1200 por 630 pixels. Um script lê o título do próprio texto para desenhar a capa, então a versão em espanhol nunca carrega o título em português. O título fica no centro de propósito, porque a lista do blog recorta a capa em 4:3 e corta as laterais. A medida de 1200 por 630 passa no mínimo do LinkedIn e fica a um fio da proporção de 1,91 para 1 (Ajuda do LinkedIn).

O formato do arquivo mudou no caminho. Em PNG, uma capa chegava a 720 KB, e deixei anotado no código que esse peso atrasava a prévia no WhatsApp e no X. Convertidas para JPEG com qualidade 86, elas ficaram abaixo de 110 KB. As capas deste texto têm entre 20 e 30 KB.

Há também um script para rodar depois do build, que abre cada página gerada e reprova o que sair da regra. Ele confere se a imagem existe, se ela mede 1200 por 630, se o tipo é article nos posts e se o idioma do card bate com o da página. Hoje ele está desatualizado. Espera en nas páginas em inglês, mas o site usa en_US, no formato idioma e país que o protocolo pede (ogp.me (em inglês)), e por isso reprova páginas que estão certas.

Comparando com as fontes, ainda faltam três coisas:

og:image:alt, a descrição da imagem que o protocolo pede;
og:site_name, o nome do site no card;
max-image-preview:large, a configuração que o Discover pede para usar a imagem grande.

Onde as fontes divergem

A primeira diferença está no que é obrigatório. O Open Graph exige og:type e deixa a descrição como opcional (ogp.me (em inglês)). O LinkedIn exige a descrição e não cita o tipo (Ajuda do LinkedIn). Quem declara as cinco tags atende os dois.

A segunda é o formato da imagem. O LinkedIn recomenda 1,91 para 1, e o Discover pede 16:9, que é um retângulo um pouco mais alto (Google, Discover). Um arquivo só não acerta as duas medidas. A capa de 1200 por 630 segue o LinkedIn e deixa o Discover cortar as laterais, o que funciona aqui porque o texto está no centro.

A terceira pega o kahue.net em cheio. O Google pede og:image sem texto (Google), e as capas do blog são exatamente o título escrito sobre um fundo escuro. Para o LinkedIn, que só fala de medida e peso, elas estão certas. Para o Google, a recomendação aponta para uma imagem que mostre o assunto em vez de escrever o nome dele. Por enquanto, as capas continuam como estão.

Como conferir antes de divulgar

Abra o código da página e procure as tags og:. Veja se título, descrição e imagem são os desta página, e não os da página inicial.
Abra o endereço da imagem numa janela anônima. Se ela pede login, o card não vai mostrar.
Cole o link no Post Inspector e olhe o card que o LinkedIn monta.
Mudou título ou capa depois de publicar? Passe o link no inspetor de novo antes de postar outra vez.
Imagine a capa cortada nas laterais. O que importa precisa estar no meio.