Como configurar a prévia de links no WhatsApp e nas redes sociais

O que forma a prévia de um link

As plataformas acessam a URL compartilhada e leem informações disponíveis no HTML. Em vez de tentar adivinhar o melhor texto e a melhor imagem entre todos os elementos, elas procuram metadados criados para descrever aquele endereço. O padrão mais usado é o Open Graph Protocol.

O cartão costuma reunir o domínio, um título curto, uma descrição e uma imagem. A composição varia: o WhatsApp pode cortar o texto de um jeito, enquanto LinkedIn e Facebook usam outro enquadramento. Por isso, a configuração precisa continuar clara quando parte do conteúdo é truncada.

Open Graph: a linguagem da prévia social

Open Graph transforma uma página da web em um objeto que redes e aplicativos conseguem representar. As propriedades ficam dentro do elemento head do HTML e começam com og:. A especificação oficial considera essenciais og:title, og:type, og:image e og:url.

Esses dados não desenham o cartão dentro do site. Eles oferecem informações para que cada aplicativo monte sua própria prévia. O objetivo é entregar uma descrição consistente, não controlar cada pixel da interface de terceiros.

• og:title: título compreensível sem o restante da conversa;
• og:type: natureza da página, como article ou website;
• og:image: URL pública da imagem de compartilhamento;
• og:url: endereço canônico daquela página;
• og:description: resumo específico e fiel ao conteúdo.

Como escrever título e descrição

O título precisa dizer com precisão o que a pessoa encontrará. Em vez de uma chamada vaga como “Você não vai acreditar nesta estratégia”, prefira “Como configurar a prévia de links no WhatsApp”. O segundo exemplo responde a uma dúvida real e continua claro quando aparece sozinho.

A descrição deve completar o título, não repeti-lo. Explique o que o visitante aprenderá ou conseguirá fazer em uma ou duas frases. Para uma empresa de Betim compartilhando uma página em um grupo de parceiros, informar etapas, prazos e critérios é mais útil do que acumular localidades e serviços para chamar atenção.

É possível usar textos diferentes no title do navegador e no og:title, mas variações sem propósito dificultam a manutenção. Para pequenos negócios, uma boa regra é preservar a mesma intenção e ajustar apenas o comprimento. A promessa do cartão deve ser cumprida pela página.

A imagem precisa estar pública e acessível

Uma prévia sem imagem muitas vezes é um problema de acesso, não de design. O arquivo deve estar disponível por HTTPS, sem login, cookies, JavaScript ou autorização. A URL de og:image precisa abrir diretamente no navegador e responder sem redirecionamentos problemáticos.

Use uma arte horizontal, com assunto central e margem para cortes. A dimensão de 1200 por 630 pixels é uma referência prática comum, mas não é garantia universal. Interfaces mudam e cada plataforma pode recortar de forma diferente. Evite texto pequeno e não coloque informações essenciais somente na imagem.

O protocolo permite informar og:image:width, og:image:height, og:image:type e og:image:alt. Largura e altura ajudam o robô a entender o arquivo; o tipo declara o formato. O texto alternativo descreve a arte, mas não substitui o atributo alt das imagens visíveis no corpo da página.

Use uma capa específica para cada conteúdo importante

Repetir a mesma imagem em todas as páginas simplifica a produção, mas torna os links difíceis de distinguir em uma conversa. Artigos, serviços e campanhas prioritárias merecem capas próprias, alinhadas ao assunto e à identidade visual. Páginas secundárias podem usar um modelo consistente com pequenas variações.

A imagem deve apoiar o cartão; título e descrição continuam responsáveis por explicar o conteúdo. Assim, mesmo que a plataforma recorte parte da capa ou mostre uma versão compacta, o sentido permanece.

Use URLs absolutas e consistentes

Muitos erros surgem quando o HTML entrega somente um caminho como /imagens/capa.jpg. Navegadores resolvem esse endereço no contexto do site, mas robôs podem precisar da URL completa, como https://exponha.com/imagens/capa.jpg.

No Next.js com App Router, metadataBase permite combinar caminhos relativos com o domínio. Sem essa base, metadados que dependem de URL podem falhar no build ou produzir endereços incorretos. Confira se og:image aponta para o domínio público, nunca para localhost ou um ambiente temporário.

A propriedade og:url deve identificar a versão permanente da página, preferencialmente a mesma declarada em rel=canonical. Escolha uma versão oficial entre www e sem www, HTTP e HTTPS ou endereços com parâmetros. Compartilhe a URL final e evite cadeias longas de redirecionamento.

Metadados de artigo e datas corretas

Quando og:type é article, o protocolo permite incluir publicação, modificação, seção, autor e tags. Essas informações ajudam a descrever o conteúdo, mas precisam ser reais. Não atualize a data apenas para fazer um texto antigo parecer novo.

Um artigo efetivamente revisado pode receber nova data de modificação e preservar a publicação original. Em orientações sobre ferramentas digitais, essa transparência é útil porque interfaces e regras mudam. O leitor entende quando a recomendação foi verificada.

Como configurar no Next.js

No App Router, exporte um objeto metadata para páginas estáticas ou use generateMetadata quando os dados dependem da rota, como em artigos identificados por slug. O Next.js transforma os valores em tags no head. Centralizar essa configuração reduz divergências entre o conteúdo e a prévia.

Cada artigo deve fornecer título, descrição, URL, imagem e datas ao gerador. Defina metadataBase no layout principal com o domínio de produção e monte openGraph com os dados da página. Configure também twitter para plataformas que usam Card metadata.

Robôs de compartilhamento nem sempre executam a aplicação como um navegador completo. Se as tags forem inseridas somente depois que o JavaScript roda no cliente, a plataforma pode capturar um HTML vazio. Use a API de Metadata para entregar os dados na resposta do servidor.

• Defina metadataBase com a URL pública;
• gere os metadados pelo slug da página;
• use textos e imagens específicos;
• inclua largura, altura e alt da imagem;
• confira o HTML renderizado antes do merge.

Por que o WhatsApp mostra uma prévia antiga

Plataformas armazenam dados em cache para não visitar a mesma página a cada compartilhamento. Depois de trocar uma imagem ou título, o aplicativo pode continuar exibindo a versão anterior por algum tempo. Isso não prova que o código atual esteja errado.

Primeiro confirme que a página pública contém os novos metadados. Depois use uma ferramenta oficial de inspeção, como o Sharing Debugger da Meta, para solicitar nova leitura quando aplicável. Alterar a URL com parâmetros apenas para driblar o cache pode criar duplicações e não corrige a causa.

Diagnóstico passo a passo

Comece pela URL em produção, não pela tela do editor. Abra a página em janela anônima e depois acesse diretamente a imagem informada em og:image. Confira HTTPS, resposta do servidor e bloqueios. Em seguida, inspecione o HTML e procure título, descrição, imagem e URL do Open Graph.

Se os campos estiverem corretos, teste em uma ferramenta de depuração e compare o que o robô recebeu. Se estiverem ausentes, corrija o template. Se funcionam localmente e falham na internet, investigue deploy, cache da CDN e domínio. Essa ordem evita trocar a arte repetidamente sem tocar no problema real.

Faça ainda um teste com uma página que nunca foi compartilhada. Se ela funciona e a página antiga não, o cache ganha força como hipótese. Se nenhuma funciona, volte à resposta do servidor, ao acesso dos robôs e à geração dos metadados.

• A página pública abre sem login?
• A imagem possui URL absoluta e HTTPS?
• As tags estão no HTML inicial?
• og:url corresponde à URL canônica?
• O deploy mais recente está em produção?
• O robô conseguiu buscar a página?

Prévia social, SEO e texto alternativo são diferentes

Open Graph não substitui title, meta description, conteúdo visível ou dados estruturados. O Google pode formar títulos e snippets usando diferentes sinais. A prévia social atende principalmente ao compartilhamento em aplicativos e redes.

Da mesma forma, og:image:alt não elimina a necessidade de alt nas imagens da página. Trate cada camada conforme sua função: metadados sociais para compartilhamento, HTML para conteúdo e acessibilidade, e sinais técnicos adequados para mecanismos de busca.

Também não confunda a imagem social com a imagem indexada na busca. Elas podem ser o mesmo arquivo, mas cada canal aplica critérios próprios. A implementação deve servir ao usuário antes de tentar forçar uma aparência específica.

O que medir depois

A configuração evita cartões quebrados, mas não garante cliques ou vendas. Use parâmetros UTM de forma organizada quando precisar distinguir campanhas e acompanhe visitas, conversões e contatos. Não confunda apresentação correta com resultado comercial automático.

Se um link recebe cliques, mas não gera contatos, o gargalo pode estar na oferta, no formulário ou no próximo passo. A prévia abre a porta; a experiência após o clique precisa continuar coerente. Compare páginas semelhantes e registre mudanças relevantes.

Checklist antes de publicar

Inclua a verificação social no mesmo processo de SEO, acessibilidade e responsividade. Uma revisão curta antes do deploy custa menos do que corrigir uma capa errada depois que o link circulou em grupos, propostas e redes.

Teste a home, páginas de serviço, landing pages e artigos principais. O atendimento pode acontecer em Betim, na Grande BH ou online em todo o Brasil; em qualquer caso, o cartão deve explicar com clareza qual página está sendo compartilhada.

Registre o título, a descrição e a capa aprovados junto ao conteúdo. Isso ajuda quem atualizar a página no futuro a entender o que precisa ser revisto e evita que um componente genérico sobrescreva metadados específicos.

• Título e descrição correspondem ao conteúdo;
• imagem horizontal, legível e com margem;
• URL da imagem pública e absoluta;
• og:url igual à canônica;
• datas corretas no artigo;
• teste feito após o deploy.

Conclusão: trate o compartilhamento como parte da página

Configurar a prévia de links é um trabalho pequeno com impacto direto na apresentação. A base é simples: Open Graph completo, imagem acessível, URLs consistentes e informações geradas no servidor. O restante é disciplina de teste.

Comece pelas páginas mais compartilhadas. Corrija o modelo, valide no ambiente público e torne a checagem obrigatória no lançamento. Assim, cada artigo ou serviço nasce pronto para circular com contexto, identidade e uma promessa honesta.