O que são as og tags (Open Graph) e como configurar
As og tags são meta tags colocadas no <head> da página que definem como o link aparece quando é compartilhado em redes sociais e aplicativos de mensagem. Elas fazem parte do protocolo Open Graph, criado pelo Facebook em 2010 para padronizar o cartão de pré-visualização. Quatro propriedades são obrigatórias: og:title, og:type, og:image e og:url. Com elas, você controla o título, a imagem e a descrição que plataformas como Facebook, LinkedIn, WhatsApp, Slack e X exibem no lugar do link cru.
O que são as og tags?
As og tags são meta tags do protocolo Open Graph que transformam uma página web em um objeto estruturado que outras plataformas conseguem ler e exibir como cartão. O nome vem de "grafo social": a ideia original do Facebook, em 2010, era permitir que qualquer página tivesse a mesma riqueza de exibição que um objeto nativo da rede. O protocolo é baseado em RDFa, o que na prática significa apenas adicionar tags <meta> no <head> do documento, cada uma com os atributos property e content.
O objetivo das og tags é remover a adivinhação da plataforma. Sem elas, ao compartilhar um link, a rede social tenta escolher sozinha um título e uma imagem do corpo da página, e o resultado costuma ser inconsistente ou errado. Ao declarar og:title, og:image e og:description, você determina exatamente o que aparece no cartão. Essas tags não são visíveis para quem lê a página; elas existem no código-fonte, dentro do <head>, e são consumidas por crawlers das plataformas quando o link é postado.
As quatro og tags obrigatórias
O protocolo Open Graph define quatro propriedades obrigatórias para qualquer página, segundo a especificação oficial em ogp.me. Sem elas, o cartão pode não ser gerado ou ficar incompleto.
| Propriedade | Função | Exemplo |
|---|---|---|
og:title | Título do objeto como deve aparecer no cartão | Guia de meta tags |
og:type | Tipo do objeto (website, article, etc.) | article |
og:image | URL da imagem que representa o conteúdo | https://exemplo.com.br/capa.jpg |
og:url | URL canônica, usada como ID permanente do objeto | https://exemplo.com.br/guia |
Na prática, essas quatro linhas ficam assim no <head>:
<meta property="og:title" content="Guia de meta tags para SEO" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://exemplo.com.br/imagens/capa.jpg" />
<meta property="og:url" content="https://exemplo.com.br/guia-meta-tags" />O og:url merece atenção: ele deve apontar para a versão canônica da página, não para variações com parâmetros de rastreamento. Isso ajuda as plataformas a consolidar contagens de compartilhamento em uma única URL. O og:title é independente da tag <title> do HTML e pode ser redigido de forma diferente, já que serve ao cartão social, não à página de resultados do Google. A recomendação da Meta é escrever o og:title sem elementos de marca, como o nome do site.
og tags opcionais e a og:image em detalhe
Além das obrigatórias, o protocolo prevê propriedades opcionais recomendadas para quase toda página: og:description (um resumo de uma a duas frases), og:site_name (o nome do site como um todo, por exemplo "IMDb") e og:locale (o idioma no formato language_TERRITORY, com padrão en_US). Para conteúdo em português do Brasil, declarar og:locale como pt_BR evita que a plataforma assuma o idioma errado.
<meta property="og:description" content="Resumo direto do conteúdo da página em uma ou duas frases." />
<meta property="og:site_name" content="Nome do Site" />
<meta property="og:locale" content="pt_BR" />A og:image aceita propriedades estruturadas, declaradas logo após a tag raiz. As mais úteis são og:image:width, og:image:height, og:image:type (o MIME type, como image/jpeg) e og:image:alt, uma descrição textual do que está na imagem. A especificação recomenda declarar og:image:alt sempre que houver og:image, por acessibilidade. Declarar largura e altura permite que a plataforma reserve o espaço sem precisar baixar o arquivo primeiro.
<meta property="og:image" content="https://exemplo.com.br/imagens/capa.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Capa do guia de meta tags com o título em destaque" />Sobre o tamanho da imagem, um ponto importante: a especificação do Open Graph não define dimensões recomendadas. Os números vêm de cada plataforma. A documentação oficial do Facebook recomenda imagens de pelo menos 1200x630 pixels para boa exibição em telas de alta resolução, aceita a partir de 200x200 pixels no mínimo (abaixo de 600x315 o preview ainda aparece, porém reduzido) e limita o arquivo a 8 MB. A orientação de manter a proporção o mais próxima possível de 1,91:1 existe justamente para o feed exibir a imagem inteira sem corte. Duas regras valem para qualquer plataforma: a URL da imagem deve ser absoluta (começando com https://), pois caminhos relativos costumam falhar, e a imagem precisa respeitar os limites de cada serviço. No X, por exemplo, o cartão grande pede no mínimo 300x157 pixels, em JPG, PNG, WEBP ou GIF.
og:type: como marcar um artigo de blog
O og:type informa a categoria do objeto e muda quais propriedades adicionais estão disponíveis. Para um artigo de blog, o valor correto é article; para a home ou uma página institucional, use website. Qualquer página sem marcação deve ser tratada como website, que é o tipo padrão e não exige propriedades extras além das básicas.
Ao declarar og:type como article, o protocolo libera propriedades específicas do vertical de artigo: article:published_time e article:modified_time (datas no formato datetime), article:author (o autor), article:section (a seção de alto nível, como "SEO Técnico") e article:tag (palavras-chave associadas). Elas descrevem o conteúdo editorial de forma que as plataformas entendam a natureza da página.
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-07-13T09:00:00-03:00" />
<meta property="article:modified_time" content="2026-07-13T09:00:00-03:00" />
<meta property="article:section" content="SEO Técnico" />
<meta property="article:author" content="https://exemplo.com.br/sobre" />O article:modified_time espelha o dateModified do schema JSON-LD e reforça o sinal de frescor do conteúdo. Como o Open Graph e o Schema.org são complementares, o ideal é manter título, descrição e datas consistentes entre os dois. Sobre por que a atualização importa para visibilidade em sistemas de busca com IA, veja o que torna um conteúdo citável por IAs.
Twitter Cards (X) e o fallback para as og tags
O X usa um protocolo próprio, os Twitter Cards, mas o parser da plataforma recorre às og tags quando não encontra a tag equivalente com prefixo twitter:. Isso significa que, se a página já tem Open Graph configurado, você não precisa duplicar tudo. Basta declarar twitter:card para escolher o formato do cartão, e o X reaproveita og:title, og:description, og:image e og:url.
Há dois formatos principais. O summary mostra uma miniatura quadrada ao lado do texto; o summary_large_image exibe uma imagem larga em destaque acima do título. Para optar pelo cartão grande, basta uma linha:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@seuperfil" />
<meta name="twitter:creator" content="@autor" />Repare que os Twitter Cards usam name e content, enquanto o Open Graph usa property e content. As propriedades twitter:site e twitter:creator atribuem o cartão a perfis do X, permitindo que o leitor siga a conta diretamente do cartão. Apenas um tipo de cartão por página é suportado; se houver mais de um valor twitter:card, o último prevalece.
Como testar as og tags antes de publicar
Antes de divulgar um link, teste as og tags nos validadores oficiais das plataformas para evitar cartões quebrados. O Facebook oferece o Sharing Debugger, que mostra exatamente o que o crawler leu e permite forçar uma nova leitura com a ação "Scrape Again". O LinkedIn tem o Post Inspector com função semelhante. Esses depuradores existem porque as plataformas fazem cache agressivo dos dados: uma vez lida, a página fica em cache e uma imagem trocada depois pode não atualizar sozinha.
O cache é a causa mais comum de cartão desatualizado. O X, por exemplo, mantém o conteúdo em cache por sete dias após o primeiro compartilhamento de um link. Muitas equipes contornam isso usando nomes de arquivo versionados na imagem ao trocar o og:image, forçando uma URL nova.
Um detalhe técnico costuma passar despercebido: os crawlers das plataformas respeitam o robots.txt. O crawler do Facebook se identifica como facebookexternalhit e o do X como Twitterbot, que segue a especificação do Google para robots.txt. Se a página ou a imagem estiver bloqueada para esses agentes, nenhum cartão ou miniatura será exibido. Ao configurar bloqueios, confirme que os agentes de rede social continuam liberados. Sobre a sintaxe correta dessas regras, veja o artigo sobre robots.txt.
Perguntas frequentes sobre og tags
Preciso das tags twitter: se já tenho as og tags?
Não necessariamente. O parser do X recorre às og tags quando não encontra a versão com prefixo twitter:, então og:title, og:description e og:image já são aproveitados. A única tag que vale sempre adicionar é twitter:card, para escolher entre o cartão pequeno (summary) e o grande (summary_large_image).
As og tags influenciam o ranking no Google?
Não diretamente. O Google usa suas próprias tags <title> e meta description para os resultados de busca, não as og tags. O efeito das og tags no SEO é indireto: cartões bem configurados aumentam cliques e compartilhamentos nas redes, o que pode gerar tráfego e menções. Para o título e a descrição de busca, veja title tag e meta description.
Qual é o tamanho ideal da og:image?
A especificação do Open Graph não define dimensões. Na prática, 1200x630 pixels (proporção 1,91:1) é o padrão recomendado pelo Facebook e funciona bem na maioria das plataformas. O X aceita a partir de 300x157 pixels para o cartão grande e recomenda proporção próxima de 16:9. Use sempre uma URL absoluta e mantenha o arquivo dentro do limite de tamanho de cada plataforma.
Por que meu cartão não atualiza depois que troquei a imagem?
Porque as plataformas fazem cache dos dados da página. Depois de alterar as og tags, use o Sharing Debugger do Facebook ou o Post Inspector do LinkedIn e force uma nova leitura. No X, o cache dura cerca de sete dias; versionar o nome do arquivo da imagem ajuda a forçar a atualização.
Onde as og tags ficam no código?
Sempre dentro do <head> do documento HTML, como tags <meta> com os atributos property e content. Em sites feitos com CMS, plugins de SEO costumam gerar essas tags automaticamente a partir dos campos de título, descrição e imagem de destaque de cada página.
Próximo passo
Para começar, garanta as quatro obrigatórias em toda página e ajuste o og:type conforme o conteúdo. Um template mínimo para um artigo de blog:
<meta property="og:title" content="Título do artigo" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://exemplo.com.br/imagens/capa.jpg" />
<meta property="og:image:alt" content="Descrição da imagem" />
<meta property="og:url" content="https://exemplo.com.br/artigo" />
<meta property="og:description" content="Resumo direto em uma ou duas frases." />
<meta property="og:site_name" content="Nome do Site" />
<meta property="og:locale" content="pt_BR" />
<meta name="twitter:card" content="summary_large_image" />Para uma home ou página institucional, troque og:type por website e remova as propriedades article:. As og tags são um dos elos do conjunto de meta tags on-page; para o mapa completo, volte ao hub de meta tags.