Por que a prévia do seu link está errada e como corrigi-la com Open Graph

Você compartilha o link da sua nova página de destino e a prévia aparece sem imagem, com o título da página inicial ou com um banner de duas campanhas atrás. A página em si está boa. A prévia é montada a partir de outra coisa: algumas linhas de código no cabeçalho (head) da página que a maioria das pessoas nunca vê.

Este post cobre as seis causas por trás da maioria das prévias quebradas, na ordem em que vale checá-las. Se você quiser que as tags sejam escritas para você, o gerador de Open Graph gratuito cria as tags, escapa os caracteres corretamente e as verifica contra os limites abaixo.

Como uma prévia de link é feita

Quando um link é colado em um post ou em uma mensagem, o app envia um rastreador à página. O rastreador lê as tags <meta> no <head> e desenha o cartão a partir delas. Essas tags vêm do protocolo Open Graph, que define quatro como obrigatórias:

• og:title: o título da página, como deve aparecer no cartão.
• og:type: o que a página é, geralmente website ou article.
• og:image: a imagem.
• og:url: a URL canônica da página, que o protocolo chama de ID permanente.

Acrescente og:description e você tem o cartão. Um conjunto completo e mínimo fica assim:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Causa 1: as tags estão ausentes

Sem tags og:, cada app precisa recorrer ao que encontrar na página, como o <title> ou a primeira imagem, e o que ele escolhe depende do app. É por isso que um link pode parecer certo em um lugar e quebrado em outro. A correção é declarar as quatro tags obrigatórias mais uma descrição em toda página que as pessoas devem compartilhar, e não só na página inicial. Uma página de produto compartilhada com as tags da página inicial mostra o cartão da página inicial.

Causa 2: a URL da imagem é relativa

Essa é fácil de deixar passar, porque a página parece normal no seu próprio navegador. content="/images/og.jpg" funciona para um navegador que já está no seu site, mas o rastreador está fora dele. Escreva o endereço completo, começando com https:// e o seu domínio. O mesmo vale para og:url.

Causa 3: a imagem tem o tamanho ou o formato errado

Cada plataforma diz o que quer, e elas por acaso concordam em uma imagem larga:

• O LinkedIn diz no seu guia para tornar um site compartilhável que a imagem deve ter pelo menos 1200 × 627 pixels, na proporção recomendada de 1.91:1, e no máximo 5 MB.
• Meta: as suas boas práticas de compartilhamento recomendam imagens com pelo menos 1080 pixels de largura para telas de alta resolução, e pelo menos 600 de largura para exibir anúncios de link com imagem.
• O cartão de imagem grande do X aceita proporção 2:1, de 300 × 157 até 4096 × 4096 pixels, com menos de 5MB, em JPG, PNG, WEBP ou GIF, e não aceita SVG, segundo a sua documentação para desenvolvedores (a página original agora redireciona, então este link passa pelo Internet Archive).

Um tamanho serve para as três: 1200 × 630. Ele passa do mínimo de 1200 × 627 do LinkedIn, é mais largo que os 1080 da Meta, e sua proporção é 1200 ÷ 630 = 1.905, a menos de 5% das 2:1 do X. Uma imagem quadrada ou alta será recortada para caber em um cartão largo, então mantenha a parte importante no centro. A calculadora de proporção mostra o que um recorte central preserva.

Informe também o tamanho nas tags. A Meta pede og:image:width e og:image:height para que o rastreador consiga renderizar a imagem de imediato, em vez de baixá-la e processá-la antes. O guia para webmasters dela diz de forma simples: especifique altura e largura para que a imagem carregue direito já na primeira vez que a página for compartilhada.

Causa 4: as tags são adicionadas por JavaScript

Alguns construtores de sites e apps de página única adicionam tags meta depois que a página carrega, no navegador. Um rastreador que lê o HTML enviado pelo seu servidor pode nunca executar esse código e, assim, nunca ver as tags. Verifique o código-fonte da página (Ver código-fonte, não o inspetor, que mostra a página depois que os scripts rodaram). Se as tags não estiverem no código-fonte, o rastreador provavelmente também não as enxerga. A correção fica nas configurações do seu site ou no template do servidor.

Causa 5: caracteres especiais quebraram a tag

Um título com aspas duplas, como O "único" linho que você precisa, encerra o atributo content="..." antes da hora e o resto do título se perde. Caracteres que importam dentro de um atributo precisam ser escapados: " vira ", & vira &, e < vira <. Navegadores e rastreadores os convertem de volta nos caracteres originais ao ler a tag. O gerador faz isso por você, e esse é metade do motivo para usar um.

Causa 6: o app guardou a versão antiga

Você corrigiu as tags, compartilhou de novo, e o cartão antigo continua lá. Esse é o cache. Os apps guardam o que coletaram e reaproveitam, e as duas grandes redes oferecem uma ferramenta para pedir uma nova leitura:

• Facebook: cole a URL no Sharing Debugger da Meta. O guia para webmasters da Meta diz que ele mostra quais tags o rastreador leu, com eventuais erros ou avisos, e dispara uma nova leitura. As boas práticas da Meta acrescentam que o conteúdo coletado de outra forma se atualiza em um ciclo padrão de 24 horas.
• LinkedIn: passe a URL pelo Post Inspector. A página de ajuda do LinkedIn é clara sobre o limite: a atualização só muda a prévia de posts novos. Posts que já incluem a URL mantêm a antiga.

Essa observação sobre o LinkedIn é a que vale guardar antes de um lançamento. Confira a prévia antes de sair o primeiro post, porque você não consegue corrigir um post antigo corrigindo a página.

A tag twitter:card: uma linha, não quatro

O X também lê Open Graph. Sua referência de marcação de cards lista um fallback para cada tag: twitter:title cai para og:title, twitter:description para og:description, twitter:image para og:image, e twitter:image:alt para og:image:alt. Então você não precisa repetir tudo. A única linha a acrescentar é twitter:card: summary_large_image para uma imagem em largura total, ou summary para uma miniatura quadrada pequena. Se você omiti-la, a mesma referência diz que o X pode mostrar um card de resumo pequeno, o que explica por que uma imagem grande às vezes chega como miniatura. A mesma referência limita o título a 70 caracteres, a descrição a 200 e o texto alternativo a 420.

Uma checagem de cinco minutos antes do lançamento

1. Veja o código-fonte da página e encontre as tags og:. As quatro obrigatórias, mais uma descrição.
2. Confirme que og:image e og:url começam com https://.
3. Abra a URL da imagem sozinha em um navegador. Ela deve carregar, em 1200 × 630 ou próximo disso.
4. Cole a URL no Sharing Debugger e no Post Inspector e leia os cards.
5. Só então compartilhe.

Onde o Hermoso se encaixa

A Hermoso é um agente de marketing com IA: pesquisa os anúncios que já funcionam no seu mercado, cria anúncios de imagem e vídeo alinhados à sua marca, agenda os posts nas suas próprias contas e roda campanhas pagas nas suas contas de anúncios. Uma boa prévia de link é o que faz esses posts valerem o clique. A Hermoso funciona no app web ou dentro do Claude, do ChatGPT e do Cursor, pelo seu servidor MCP.

Perguntas frequentes

Por que meu link não mostra imagem no Facebook ou no LinkedIn?

Geralmente a tag og:image está faltando, usa um caminho relativo em vez de um endereço https:// completo, ou aponta para uma imagem pequena demais. O LinkedIn pede pelo menos 1200 × 627 pixels. Depois de corrigir, passe a URL pelo Sharing Debugger da Meta ou pelo Post Inspector do LinkedIn para que eles a busquem de novo.

Qual deve ser o tamanho de uma imagem Open Graph?

1200 × 630 pixels funciona nas grandes redes. Atende ao mínimo de 1200 × 627 do LinkedIn com cerca de 1.91:1, é mais largo que os 1080 pixels recomendados pela Meta e fica perto das 2:1 que o X aceita em cards de imagem grande.

Como atualizo a prévia de um link no LinkedIn?

Corrija as tags na página e depois informe a URL no Post Inspector do LinkedIn. A prévia atualizada vale só para posts novos. Posts que já contêm a URL mantêm a prévia antiga.

Preciso das tags twitter: se já tenho as og:?

Só a twitter:card. O X recorre a og:title, og:description, og:image e og:image:alt quando as versões twitter: estão ausentes.