Prévia do Open Graph — veja seus cards de link antes de compartilhar

O que é uma Prévia do Open Graph?

Uma Prévia do Open Graph (ओपन ग्राफ़ प्रीव्यू) mostra como uma página web vai aparecer quando o link é compartilhado em redes sociais e apps de mensagens. Quando você cola um link no WhatsApp, Facebook, LinkedIn, X ou Telegram, o app busca a página e monta um card a partir das meta tags Open Graph e de card do Twitter: um título, uma descrição curta, uma imagem e o nome do site. Um bom card ganha cliques; um quebrado — sem imagem, com o título cortado ou com o texto errado — é ignorado.

Esta ferramenta grátis permite conferir os cards antes de compartilhar. Cole o HTML do head da sua página, ou apenas as meta tags, e ela renderiza prévias aproximadas para Facebook, X, LinkedIn e WhatsApp. Aplica as mesmas alternativas que as plataformas usam quando faltam tags, carrega seu og:image para verificar o tamanho real em pixels e a proporção, e lista exatamente o que corrigir. Nada é enviado e nenhum script do HTML colado é executado.

Principais recursos

• Quatro prévias — Facebook, X (Twitter), LinkedIn e WhatsApp.
• Alternativas realistas — tag title, meta description e canonical usadas quando faltam tags og:.
• Verificações da imagem — carrega a imagem e informa tamanho, proporção e uso de https.
• Inventário de tags — quais tags Open Graph e Twitter foram encontradas.
• Avisos de tamanho para títulos e descrições longos.
• Troca de imagem — teste outra URL de imagem sem editar o seu HTML.
• Análise segura com DOMParser.
• Funciona para páginas não publicadas — cole o HTML do seu editor ou do site de teste.

Como visualizar seus cards de link — passo a passo

1. Abra sua página e veja o código-fonte dela (Ctrl + U, ou clique direito → Ver código-fonte da página).
2. Copie a seção head — ou apenas as linhas que começam com <meta property=“og: e <meta name=“twitter:.
3. Cole na caixa. As prévias e as verificações se atualizam na hora.
4. Corrija os avisos no seu HTML ou CMS — por exemplo, adicione um og:image ou encurte o título.
5. Teste de novo colando as tags atualizadas.
6. Atualize os caches das plataformas depois de publicar, usando o Facebook Sharing Debugger, o LinkedIn Post Inspector ou compartilhando de novo.

As tags que importam

Acertando a imagem de compartilhamento

• Tamanho: 1200 × 630 pixels (1.91:1). A ferramenta mede sua imagem e sinaliza outras proporções.
• Mínimo: abaixo de cerca de 600 px de largura, várias plataformas mostram apenas uma miniatura pequena.
• Formato e peso: JPG ou PNG, de preferência algumas centenas de KB — imagens muito pesadas podem não carregar em apps de mensagens.
• Área segura: mantenha texto e logotipos longe das bordas; alguns apps cortam para um quadrado ou uma proporção mais estreita.
• URL https absoluta: o og:image deve ser um endereço completo como https://example.com/og.jpg, acessível publicamente sem login.
• Legível em tamanhos pequenos: texto grande e em negrito funciona melhor nos celulares.

Precisa redimensionar ou cortar uma imagem para 1200 × 630? Use nossas ferramentas Redimensionador de imagens ou Cortar imagem.

Diferenças entre as plataformas

O Facebook mostra uma imagem grande com o domínio em maiúsculas, o título e muitas vezes a descrição. O X mostra uma imagem grande apenas quando twitter:card é summary_large_image; caso contrário, uma miniatura quadrada pequena, e os designs recentes muitas vezes mostram apenas o domínio sobre a imagem. O LinkedIn enfatiza a imagem e o título, geralmente sem a descrição. O WhatsApp mostra um card compacto dentro do balão da conversa com a imagem, o título, a descrição e o domínio. Esses layouts mudam de tempos em tempos, então trate as prévias como guias aproximados e faça um compartilhamento real final em campanhas importantes.

Por que prévias antigas persistem

As plataformas guardam prévias de links em cache — às vezes por dias — para evitar buscar a mesma página repetidamente. Se você muda o og:image e ainda vê o antigo, é o cache, não as suas tags. O Sharing Debugger do Facebook e o Post Inspector do LinkedIn permitem «buscar de novo». No WhatsApp, acrescentar uma query string inofensiva (por exemplo, ?v=2) à URL compartilhada força uma nova busca. O X atualiza os cards periodicamente. Mudar o nome do arquivo da imagem ao atualizá-la também ajuda.

Por que os cards de link importam

A maioria das pessoas decide em um segundo se vai tocar em um link compartilhado. Uma imagem clara, um título específico e um nome de marca reconhecível facilitam essa decisão; uma caixa cinza com um título cortado facilita passar direto. Para empresas que dependem de grupos de WhatsApp, publicações do LinkedIn ou páginas do Facebook, cards bem feitos podem aumentar visivelmente os cliques sem mudar mais nada no conteúdo. Eles também geram confiança — um card consistente e com a marca parece mais legítimo que uma URL pura.

Por que colar o HTML em vez de uma URL?

Os navegadores impedem que páginas leiam o HTML de outros sites (a política de mesma origem), então uma ferramenta no navegador não pode buscar sua página pela URL sem passá-la por um servidor. Colar o código-fonte mantém tudo privado, funciona para páginas que ainda não estão no ar — no localhost, em um site de teste ou no editor do seu CMS — e permite experimentar com as tags antes de publicar.

Exemplo resolvido

As tags de exemplo desta página incluem og:title, og:description, og:image, og:url, og:site_name e twitter:card. A ferramenta conta as tags og: que encontrou (title, description, image, url e site_name) e uma tag do Twitter, mostra o og:title como título do card em todas as plataformas e carrega a imagem de compartilhamento para informar as dimensões. Apague a linha do og:image e os cards passam para «Sem imagem» com um aviso; apague o og:title e o título volta para o título da página «Free Online PDF Tools | Prompt Minds». Experimentar assim é o jeito mais rápido de entender como as plataformas escolhem o que mostrar.

Lista de conferência antes de compartilhar

• og:title com menos de cerca de 60–70 caracteres e específico para a página.
• og:description com uma frase clara, com menos de cerca de 200 caracteres.
• og:image de 1200 × 630, URL https absoluta, carrega em uma janela privada.
• og:url definido como o endereço canônico da página.
• twitter:card definido como summary_large_image.
• Um compartilhamento de teste real no WhatsApp ou LinkedIn antes de uma campanha.

Usos comuns

• Conferir posts de blog antes de compartilhá-los em grupos de WhatsApp.
• Revisar páginas de produtos para compartilhamento em e-commerce.
• Testar landing pages para campanhas de anúncios e sociais.
• Diagnosticar problemas de «sem imagem» ou de título errado.
• Comparar várias imagens de compartilhamento rapidamente com o campo de troca.
• Ensinar clientes por que as imagens e os títulos de compartilhamento importam.
• Conferir se um CMS ou plugin de SEO gera as tags esperadas em todo tipo de página.

Erros comuns a evitar

• Caminhos relativos de og:image como /assets/og.png — use sempre a URL https completa.
• Imagens atrás de logins ou proteção contra hotlink que os rastreadores não conseguem baixar.
• A mesma imagem em todas as páginas — imagens específicas da página recebem mais cliques.
• Títulos muito longos que são cortados nos celulares.
• Esquecer o twitter:card — o X recorre a um card pequeno.

Solução de problemas

• «Não foi possível carregar a imagem» — confira se a URL abre em uma janela privada do navegador; alguns servidores impedem que outros sites carreguem imagens.
• Nenhuma tag encontrada — confira se você colou a seção head e não o texto visível da página.
• O título difere do esperado — confira qual tag é usada: o og:title vence a tag title.

Glossário rápido

• Open Graph: o protocolo de meta tags og: para prévias de links.
• Card do Twitter: o formato de prévia do X definido com tags twitter:.
• og:image: a imagem mostrada no card.
• Scraper / rastreador: o bot que uma plataforma usa para ler a sua página.
• Cache: uma cópia guardada da prévia reutilizada em compartilhamentos posteriores.
• Proporção: largura dividida pela altura; 1.91:1 para cards padrão.
• Sharing Debugger: a ferramenta do Facebook para inspecionar e atualizar prévias de links.
• Post Inspector: a ferramenta equivalente do LinkedIn para conferir e atualizar prévias.
• URL canônica: o endereço preferido de uma página, muitas vezes repetido no og:url.

Por que usar esta Prévia do Open Graph?

Ela mostra a prévia de quatro grandes plataformas de uma vez, aplica alternativas reais, mede sua imagem de compartilhamento, explica cada aviso e mantém páginas não publicadas privadas — grátis e instantâneo.

Prévia do Open Graph — Informações principais

Perguntas frequentes

Conheça mais ferramentas da Prompt Minds

A Prévia do Open Graph funciona muito bem junto com nossas outras ferramentas grátis. Todas as ferramentas do Prompt Minds rodam inteiramente no seu navegador — sem cadastro, sem uploads, sem marca d’água. Ver todas as ferramentas grátis.