Tags Open Graph: O Guia Completo para Pré-visualizações em Redes Sociais
· 12 min de leitura
Índice
- O Que É Open Graph?
- Como Funcionam as Tags Open Graph
- Tags Open Graph Obrigatórias
- Tags Open Graph Opcionais
- Twitter Cards e Plataforma X
- Especificações de Imagem e Melhores Práticas
- Diferenças Específicas de Plataforma
- Guia de Implementação
- Ferramentas de Depuração e Teste
- Erros Comuns a Evitar
- Dicas Avançadas de Otimização
- Perguntas Frequentes
Quando você compartilha um link no Facebook, LinkedIn, Twitter ou aplicativos de mensagens, o cartão de pré-visualização que aparece é gerado a partir de tags Open Graph (OG) no HTML da sua página. Acertar essas tags significa a diferença entre uma pré-visualização envolvente e clicável e um link quebrado ou com aparência genérica.
Este guia abrangente cobre tudo o que você precisa saber sobre tags Open Graph, Twitter Cards e otimização de pré-visualização em redes sociais. Seja você um desenvolvedor implementando tags OG pela primeira vez ou um profissional de marketing buscando melhorar o engajamento social, você encontrará insights acionáveis e exemplos práticos ao longo do texto.
O Que É Open Graph?
Open Graph é um protocolo originalmente criado pelo Facebook em 2010 que permite que páginas web se tornem objetos ricos em um grafo social. Ao adicionar meta tags OG ao seu HTML, você controla exatamente como seu conteúdo aparece quando compartilhado em plataformas de redes sociais.
Sem tags Open Graph, as plataformas tentam extrair o conteúdo da sua página automaticamente, frequentemente produzindo pré-visualizações ruins ou incorretas. O resultado? Imagens quebradas, títulos ausentes ou descrições genéricas que falham em capturar atenção em feeds sociais lotados.
O protocolo usa meta tags na seção <head> do seu HTML com o atributo property prefixado com og:. Essas tags fornecem dados estruturados que as plataformas sociais podem analisar e exibir de forma confiável.
Plataformas Que Suportam Open Graph
Open Graph se tornou o padrão de facto para pré-visualizações em redes sociais. As principais plataformas que suportam o protocolo incluem:
- Facebook – O criador original e principal implementador
- LinkedIn – Usa tags OG para compartilhamento de conteúdo profissional
- Pinterest – Depende de imagens OG para pré-visualizações de pins
- WhatsApp – Exibe pré-visualizações ricas em conversas de chat
- Telegram – Mostra cartões de pré-visualização com dados OG
- Slack – Expande links usando informações Open Graph
- Discord – Cria cartões incorporados a partir de tags OG
- iMessage – Gera pré-visualizações de links em dispositivos iOS
Dica profissional: Use nosso Verificador de Open Graph para validar instantaneamente como suas tags aparecem em diferentes plataformas antes de publicar.
Como Funcionam as Tags Open Graph
Quando alguém compartilha sua URL em uma plataforma social, o rastreador da plataforma (frequentemente chamado de "bot" ou "scraper") visita sua página e procura por meta tags Open Graph na seção <head> do HTML. Essas tags fornecem informações estruturadas sobre seu conteúdo.
O rastreador extrai esses dados e os usa para gerar um cartão de pré-visualização, também chamado de "rich snippet" ou "pré-visualização de link". Este cartão normalmente inclui um título, descrição, imagem e URL.
O Processo de Rastreamento
Aqui está o que acontece nos bastidores quando você compartilha um link:
- Envio de URL – Um usuário cola ou compartilha sua URL em uma plataforma social
- Envio de rastreador – A plataforma envia um bot para buscar sua página
- Análise de HTML – O bot lê o HTML da sua página e extrai as tags OG
- Armazenamento em cache – A plataforma armazena em cache os dados extraídos (geralmente por 24-48 horas)
- Geração de pré-visualização – Um cartão de pré-visualização é renderizado usando os dados em cache
- Exibição – A pré-visualização aparece no feed ou mensagem do usuário
Entender este processo é crucial porque explica por que mudanças nas suas tags OG não aparecem imediatamente. A maioria das plataformas armazena dados de pré-visualização em cache de forma agressiva para reduzir a carga do servidor.
Dica rápida: Após atualizar suas tags OG, use ferramentas de depuração específicas da plataforma para forçar uma atualização do cache. Cobriremos essas ferramentas na seção de depuração.
Tags Open Graph Obrigatórias
Quatro tags OG são consideradas obrigatórias para um objeto Open Graph adequadamente definido. Embora páginas sem essas tags ainda possam gerar pré-visualizações, os resultados são imprevisíveis e frequentemente de baixa qualidade.
Aqui está a implementação mínima que você precisa:
<meta property="og:title" content="Your Page Title">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">og:title
O título do seu conteúdo como deve aparecer na pré-visualização de redes sociais. Esta é indiscutivelmente a tag mais importante porque é a primeira coisa que os usuários veem.
Melhores práticas:
- Mantenha abaixo de 60 caracteres para evitar truncamento na maioria das plataformas
- Torne-o atraente e descritivo – este é seu título
- Não inclua o nome do seu site (use
og:site_namepara isso) - Coloque palavras-chave importantes no início para melhor visibilidade
- Teste como fica quando truncado em 40 caracteres (visualização móvel)
Exemplo:
<meta property="og:title" content="10 Proven Strategies to Double Your Email Open Rates">og:type
O tipo de conteúdo que sua página representa. Isso ajuda as plataformas a entender a natureza do seu conteúdo e pode afetar como ele é exibido ou categorizado.
Valores comuns:
website– Sites genéricos e páginas de destinoarticle– Posts de blog, artigos de notícias e conteúdo editorialvideo.movie– Páginas de filmes e conteúdo cinematográficovideo.episode– Episódios de programas de TVmusic.song– Músicas individuaismusic.album– Álbuns musicaisprofile– Perfis pessoais ou empresariaisbook– Páginas de livros e literatura
Para a maioria dos sites e posts de blog, você usará website ou article. O tipo article habilita tags adicionais como article:published_time e article:author.
Exemplo:
<meta property="og:type" content="article">og:image
A URL da imagem que deve aparecer no cartão de pré-visualização. Isso é crítico para engajamento – posts com imagens recebem significativamente mais cliques e compartilhamentos do que pré-visualizações apenas com texto.
Requisitos:
- Deve ser uma URL absoluta (não relativa)
- Deve ser servida via HTTPS
- Deve ser publicamente acessível (sem autenticação necessária)
- Tamanho mínimo recomendado: 1200×630 pixels
- Proporção: 1.91:1 (paisagem) funciona melhor em todas as plataformas
Exemplo:
<meta property="og:image" content="https://example.com/images/social-preview.jpg">Vamos nos aprofundar nas especificações e otimização de imagens na seção dedicada abaixo.
og:url
A URL canônica da sua página. Esta deve ser a URL permanente e preferida que você deseja associar a este conteúdo.
Melhores práticas:
- Use a URL canônica (sem parâmetros de rastreamento)
- Inclua o protocolo (https://)
- Combine com sua tag de link canônico se você tiver uma
- Use minúsculas para consistência
- Não inclua IDs de sessão ou parâmetros temporários
Exemplo:
<meta property="og:url" content="https://example.com/pt/blog/email-marketing-guide">Dica profissional: O valor de og:url deve corresponder à sua URL canônica. Isso ajuda a consolidar sinais sociais e previne problemas de conteúdo duplicado. Use nosso Gerador de Meta Tags para garantir consistência em todas as suas meta tags.
Tags Open Graph Opcionais
Além das quatro tags obrigatórias, Open Graph suporta numerosas tags opcionais que fornecem contexto adicional e melhoram como seu conteúdo aparece em plataformas sociais.
og:description
Uma breve descrição do seu conteúdo. Isso aparece abaixo do título na maioria dos cartões de pré-visualização.
Melhores práticas:
- Mantenha entre 150-160 caracteres para exibição ideal
- Torne-a atraente e acionável
- Inclua palavras-chave relevantes naturalmente
- Não duplique o título
- Termine com uma chamada para ação quando apropriado
Exemplo:
<meta property="og:description" content="Learn proven email marketing strategies that top marketers use to achieve 40%+ open rates. Includes templates and real examples.">og:site_name
O nome do seu site ou marca. Isso aparece separadamente do título da página e ajuda no reconhecimento da marca.
Exemplo:
<meta property="og:site_name" content="SEO-IO">og:locale
O idioma e formatação regional do seu conteúdo. O padrão é en_US se não especificado.
Exemplo:
<meta property="og:locale" content="en_GB">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="es_ES">Tags Específicas de Artigo
Ao usar o valor article em og:type, você pode incluir metadados adicionais:
<meta property="article:published_time" content="2026-03-31T09:00:00Z">
<meta property="article:modified_time" content="2026-03-31T14:30:00Z">
<meta property="article:author" content="https://example.com/author/john-doe">
<meta property="article:section" content="Email Marketing">
<meta property="article:tag" content="email">
<meta property="article:tag" content="marketing">
<meta property="article:tag" content="conversion">Essas tags ajudam as plataformas a entender o contexto do seu conteúdo e podem influenciar como ele é categorizado ou exibido.
Tags de Aprimoramento de Imagem
Forneça informações adicionais sobre sua imagem OG:
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Infographic showing email open rate statistics">
<meta property="og:image:type" content="image/jpeg">Incluir largura e altura ajuda as plataformas a renderizar pré-visualizações mais rapidamente sem baixar a imagem primeiro. O texto alternativo melhora a acessibilidade e fornece contexto de fallback.
Twitter Cards e Plataforma X
O Twitter (agora X) desenvolveu seu próprio sistema de meta tags chamado Twitter Cards antes do Open Graph se tornar amplamente difundido. Embora os Twitter Cards usem nomes de tags diferentes, eles servem ao mesmo propósito que as tags Open Graph.
A boa notícia: o Twitter recorre às tags Open Graph se as tags Twitter Card não estiverem presentes. No entanto, usar tags específicas do Twitter lhe dá mais controle sobre como seu conteúdo aparece na plataforma.
Tipos de Twitter Card
O Twitter suporta vários tipos de cartão, mas você usará principalmente estes dois:
| Tipo de Cartão | Caso de Uso | Tamanho da Imagem |
|---|---|---|
summary |
Cartão padrão com imagem quadrada pequena | Proporção 1:1 (ex: 400×400) |
summary_large_image |
Cartão de imagem grande (recomendado para a maioria dos conteúdos) | Proporção 2:1 (ex: 1200×600) |
app |
Promoção de aplicativo móvel | Varia |
player |
Conteúdo de vídeo ou áudio | Varia |
Para a maioria dos sites e posts de blog, use summary_large_