O que é Open Graph e por que importa
Open Graph (OG) é um protocolo criado pelo Facebook em 2010 que permite controlar como seu conteúdo aparece quando é compartilhado em redes sociais. Sem OG tags, as redes sociais tentam “adivinhar” o título, descrição e imagem — e frequentemente erram.
Com OG tags corretas, você controla exatamente:
- O título que aparece no preview do link.
- A descrição que acompanha o título.
- A imagem que é exibida (a parte mais impactante do compartilhamento).
- A URL canônica do conteúdo.
Impacto real no tráfego
Estudos mostram que posts com imagem preview recebem 2-3x mais cliques que posts sem imagem. E a qualidade da imagem e do título no preview afeta diretamente o engajamento. Investir 5 minutos em OG tags pode multiplicar o tráfego de cada compartilhamento.
As tags Open Graph essenciais
og:title
<meta property="og:title" content="Heading Tags: Guia Completo de H1 a H6 para SEO" />O título exibido no preview do link. Pode ser diferente do <title> da página — otimize para o contexto social (mais emocional, mais direto).
Limite: 60-90 caracteres (Facebook corta após ~88 caracteres).
og:description
<meta property="og:description" content="Aprenda a usar heading tags corretamente. Hierarquia, erros comuns e checklist completo para melhorar seu SEO." />A descrição no preview. Mais curta que a meta description.
Limite: 150-200 caracteres (Facebook mostra ~100-150 dependendo do layout).
og:image
<meta property="og:image" content="https://seusite.com/imagens/og-heading-tags.jpg" />A tag mais importante. A imagem é o que chama atenção no feed.
Especificações por rede social:
| Rede | Tamanho ideal | Proporção | Formato |
|---|---|---|---|
| 1200x630px | 1.91:1 | JPG, PNG | |
| 1200x628px | 1.91:1 | JPG, PNG, GIF | |
| 1200x627px | 1.91:1 | JPG, PNG | |
| 300x200px (mínimo) | 1.5:1 | JPG, PNG |
Tamanho ideal universal: 1200x630px funciona bem em todas as redes.
Regras importantes:
- Use URL absoluta (começando com
https://). - Tamanho mínimo: 200x200px (Facebook rejeta imagens menores).
- Tamanho de arquivo: máximo 8MB.
- Não use imagens com muito texto — Facebook pode limitar o alcance.
og:url
<meta property="og:url" content="https://seusite.com/blog/heading-tags-guia-completo/" />A URL canônica do conteúdo. Deve ser a mesma da canonical tag. Garante que compartilhamentos de diferentes URLs (com parâmetros UTM, por exemplo) consolidem as métricas sociais.
og:type
<meta property="og:type" content="article" />Define o tipo de conteúdo:
| Tipo | Uso |
|---|---|
website | Homepage, páginas de ferramenta |
article | Posts de blog, artigos, notícias |
product | Páginas de produto |
profile | Páginas de perfil |
og:site_name
<meta property="og:site_name" content="fabiosantiago.dev.br" />O nome do site. Aparece em alguns layouts de preview.
og:locale
<meta property="og:locale" content="pt_BR" />O idioma do conteúdo. Importante para sites multilíngues.
Tags adicionais para artigos
Para páginas do tipo article, existem tags adicionais:
<meta property="article:author" content="https://seusite.com/sobre/" />
<meta property="article:published_time" content="2026-02-24T10:00:00Z" />
<meta property="article:modified_time" content="2026-02-24T15:30:00Z" />
<meta property="article:section" content="SEO Técnico" />
<meta property="article:tag" content="SEO" />
<meta property="article:tag" content="Heading Tags" />Essas tags ajudam as redes sociais a categorizar e recomendar seu conteúdo.
Twitter Cards
O Twitter usa seu próprio sistema (Twitter Cards), mas aceita OG tags como fallback:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@seuusuario" />
<meta name="twitter:creator" content="@seuusuario" />
<meta name="twitter:title" content="Heading Tags: Guia Completo" />
<meta name="twitter:description" content="Aprenda a usar heading tags corretamente para SEO." />
<meta name="twitter:image" content="https://seusite.com/imagem.jpg" />Tipos de Twitter Card:
| Tipo | Descrição | Imagem |
|---|---|---|
summary | Card pequeno com imagem quadrada | 120x120px mínimo |
summary_large_image | Card com imagem grande (recomendado) | 800x418px mínimo |
Na prática: sempre use summary_large_image para máximo impacto visual.
Como implementar Open Graph
Em HTML estático
Adicione as tags no <head> de cada página:
<head>
<!-- Open Graph -->
<meta property="og:title" content="Título da Página" />
<meta property="og:description" content="Descrição do conteúdo." />
<meta property="og:image" content="https://seusite.com/imagem-og.jpg" />
<meta property="og:url" content="https://seusite.com/pagina/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Meu Site" />
<meta property="og:locale" content="pt_BR" />
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Título da Página" />
<meta name="twitter:description" content="Descrição do conteúdo." />
<meta name="twitter:image" content="https://seusite.com/imagem-og.jpg" />
</head>Em WordPress
Plugins como Yoast SEO e Rank Math adicionam OG tags automaticamente. Verifique as configurações e personalize para cada post.
Em Astro / Next.js / frameworks modernos
Adicione no componente de layout. Exemplo em Astro:
---
const { title, description, image } = Astro.props;
const ogImage = image || '/og-default.jpg';
---
<head>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={`https://seusite.com${ogImage}`} />
</head>Como testar Open Graph
Facebook Sharing Debugger
developers.facebook.com/tools/debug — Cole a URL e veja exatamente como o Facebook vai renderizar o preview. Também limpa o cache do Facebook.
Twitter Card Validator
cards-dev.twitter.com/validator — Teste como seu link aparece no Twitter.
LinkedIn Post Inspector
linkedin.com/post-inspector — Veja o preview no LinkedIn e force atualização do cache.
Nossa ferramenta
Use nosso Gerador de Open Graph para criar as tags corretas com preview visual de cada rede social.
Erros comuns de Open Graph
1. og:image com URL relativa
<!-- Errado -->
<meta property="og:image" content="/imagens/og.jpg" />
<!-- Correto -->
<meta property="og:image" content="https://seusite.com/imagens/og.jpg" />URLs relativas não funcionam — as redes sociais precisam da URL completa para baixar a imagem.
2. Imagem muito pequena
Facebook ignora imagens menores que 200x200px. Use pelo menos 1200x630px para qualidade boa em todas as redes.
3. Mesmo og:image para todo o site
Cada página deve ter uma imagem OG única e relevante. Compartilhar artigos diferentes com a mesma imagem confunde o usuário e reduz cliques.
4. Não limpar cache após atualização
Redes sociais cacheiam as OG tags. Após atualizar, use os debuggers de cada plataforma para forçar a atualização do cache.
5. og:url diferente da canonical
O og:url deve ser idêntico à canonical tag. Inconsistência pode causar problemas de consolidação de métricas sociais.
Checklist rápido de Open Graph
-
og:titlepresente e otimizado (60-90 chars) -
og:descriptionpresente e atrativa (150-200 chars) -
og:imagecom URL absoluta e pelo menos 1200x630px -
og:urlidêntica à canonical -
og:typedefinido (article, website, product) -
og:localedefinido (pt_BR) - Twitter Card tags presentes
- Testado no Facebook Sharing Debugger
- Imagem sem muito texto (regra do Facebook)
- Cada página tem OG tags únicas
Perguntas frequentes
Open Graph afeta o SEO?
Não diretamente. OG tags não são fatores de ranking do Google. Mas conteúdo bem compartilhado em redes sociais gera tráfego, visibilidade e potencialmente backlinks — que afetam indiretamente o SEO.
Preciso de OG tags E Twitter Cards?
O Twitter aceita OG tags como fallback. Mas para máximo controle, inclua ambos. Se precisar economizar, priorize OG tags — são usadas por Facebook, LinkedIn, WhatsApp e como fallback do Twitter.
O WhatsApp usa Open Graph?
Sim. O WhatsApp usa og:title, og:description e og:image para gerar o preview do link. Sem essas tags, o preview fica sem imagem ou com informações erradas.
Conclusão
Open Graph tags são simples de implementar e impactam significativamente o resultado de cada compartilhamento. Uma imagem atrativa, um título claro e uma descrição que gera curiosidade podem dobrar ou triplicar os cliques vindos de redes sociais.
Use nosso Gerador de Open Graph para criar as tags corretas e teste com os debuggers de cada plataforma antes de publicar. São 5 minutos de trabalho que pagam dividendos em cada compartilhamento.