Meta tags Open Graph: o guia completo para prévias de links sociais

As meta tags Open Graph são tags <meta property="og:…"> que você coloca no <head> de uma página HTML. Elas controlam o título, a descrição e a imagem exibidos quando alguém compartilha seu link no Facebook, LinkedIn, Slack, Discord, WhatsApp e na maioria das outras plataformas. Defina-as uma vez e praticamente toda rede renderiza uma prévia rica em vez de uma URL crua. O X (Twitter) lê suas próprias tags Twitter Card, mas recorre às suas tags Open Graph quando a correspondente está ausente, então um único conjunto bem construído de tags cobre quase todo lugar por onde um link pode passar.

Esse único protocolo é a diferença entre um link que exibe um título, um resumo e uma imagem nítida de 1200×630, e um endereço nu que ninguém clica.

Este guia percorre o conjunto completo de meta tags para compartilhamento social: as quatro tags Open Graph obrigatórias, as regras de dimensão da og:image, o fallback do Twitter Card, como cada plataforma renderiza e faz cache das prévias, os erros que deixam os compartilhamentos em branco e como depurar o resultado depois de publicar.

O que são meta tags Open Graph?

Open Graph é um protocolo aberto, originalmente criado no Facebook e documentado em ogp.me, que permite que qualquer página web descreva a si mesma como um objeto rico. Em vez de adivinhar do que se trata o seu link, a plataforma lê um punhado de tags e as transforma em um card de prévia.

A sintaxe é uma simples meta tag HTML com um atributo property e um valor content, colocada dentro do <head> do documento:

<meta property="og:title" content="How Open Graph Tags Work">

Repare no atributo property. As meta tags HTML clássicas de SEO (a meta description, robots, viewport) usam name. O Open Graph usa property, e o Twitter Card volta a usar name. Acertar esse atributo faz diferença: um crawler que espera property="og:title" não vai ler name="og:title".

Quase toda plataforma que transforma um link em card lê Open Graph: Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest e Telegram falam essa língua. O X é a exceção notável. Ele prefere suas próprias tags twitter:*, mas recorre às suas tags og:* para tudo o que não encontrar, e é por isso que você raramente precisa duplicá-las.

O Open Graph convive com as meta tags clássicas de SEO em vez de substituí-las. O <title> e o link canônico continuam guiando a busca; a meta description continua moldando o seu snippet de resultados. As tags Open Graph não mexem no ranking; elas cuidam do card social. Um <head> completo costuma carregar as três famílias juntas.

Escrever tudo isso à mão é repetitivo e fácil de errar em detalhes sutis. O Gerador de Meta Tags monta o bloco inteiro a partir de um formulário curto, mostra uma prévia ao vivo e mantém os detalhes complicados (nomes de atributos, URLs absolutas, dimensões de imagem) consistentes para você não ter que decorá-los.

As tags Open Graph essenciais de que você realmente precisa

O Open Graph define dezenas de propriedades, mas um bom compartilhamento precisa de apenas um punhado. Comece pelas quatro obrigatórias, acrescente uma descrição e pare por aí na maioria das páginas.

As quatro tags obrigatórias: og:title, og:type, og:image, og:url

Quatro tags são obrigatórias segundo o protocolo. Esqueça uma e as plataformas ou descartam o card ou preenchem com um palpite ruim.

<meta property="og:title" content="How Open Graph Tags Work">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:url" content="https://example.com/open-graph-guide">

og:title é o título em negrito no card. og:type classifica o objeto (mais sobre isso abaixo). og:image é a imagem de prévia, e precisa ser uma URL HTTPS absoluta. og:url é o endereço canônico da página, que as plataformas usam para deduplicar compartilhamentos e agregar o engajamento.

og:description e como ela difere da meta description de SEO

og:description é o resumo curto impresso sob o título em um card de compartilhamento:

<meta property="og:description" content="A practical guide to og:title, og:image and Twitter Card tags.">

É uma tag diferente da <meta name="description"> de SEO, e atende a um leitor diferente. A meta description disputa cliques em uma página de resultados do Google e é medida contra cerca de 155 caracteres. A descrição Open Graph é lida em um card social, onde o espaço é mais apertado e a primeira frase é que carrega o peso. Se você omitir a og:description, a maioria das plataformas recorre à sua meta description, então muitas vezes dá para pulá-la. Escreva uma dedicada só quando o gancho social precisar ser diferente do snippet de busca.

og:type e o que ela libera

og:type diz às plataformas que tipo de coisa é a sua página. Os valores comuns são website, article, product e profile. Uma home ou landing page é um website; um post de blog é um article.

Escolher article libera propriedades e recursos extras que um tipo website comum não consegue usar:

<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-07-16T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">

Essas tags article:* alimentam os cards com datas de publicação e créditos de autoria, e qualificam a página para os Rich Pins do Pinterest, que extraem dados estruturados direto da sua marcação Open Graph. Defina og:type como article nos posts e como website em todo o resto, e os campos correspondentes vêm junto.

Aqui vai uma referência das tags que a maioria das páginas realmente usa:

Tag	O que ela controla	Valor de exemplo
`og:title`	Título exibido no card	`How Open Graph Tags Work`
`og:type`	Tipo de objeto: `website`, `article`, `product`, `profile`	`article`
`og:image`	Imagem de prévia (URL HTTPS absoluta)	`https://example.com/og/cover.png`
`og:url`	URL canônica da página	`https://example.com/open-graph-guide`
`og:description`	Resumo sob o título	`A practical guide to social meta tags.`
`og:site_name`	Nome do site como um todo	`Example`
`og:locale`	Idioma e região do conteúdo	`en_US`

og:image — tamanhos, proporção e as regras que quebram compartilhamentos

A imagem é a parte da prévia que as pessoas veem primeiro, e é onde a maioria dos compartilhamentos desmorona. Acerte o tamanho e o formato da og:image e um único arquivo funciona em todo lugar.

O padrão universal de 1200×630 (1.91:1)

O tamanho recomendado da og:image é 1200×630 pixels, uma proporção de 1.91:1. Essa única imagem renderiza corretamente no Facebook, LinkedIn, Slack, Discord e no card summary_large_image do X, então você não precisa de um arquivo diferente por plataforma.

Os limites mínimos de tamanho também importam. O Facebook ignora qualquer imagem menor que 200×200 e exibe uma miniatura quadrada apertada para tudo abaixo de 600×315. Abaixo de 1200 pixels de largura, os cards grandes começam a ficar embaçados. Mire em 1200×630 e você passa por todos os limiares de uma vez.

Por que og:image:width e og:image:height importam

Quando uma plataforma encontra o seu link pela primeira vez, ela ainda não baixou a imagem; isso é buscado de forma assíncrona. Se você declara as dimensões de antemão, a plataforma consegue reservar o espaço certo e montar o card imediatamente:

<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Graph guide cover with the title in large type">

Pule essas tags e o primeiríssimo compartilhamento de uma página pode aparecer em branco enquanto o crawler não se atualiza. Adicione-as e o card fica correto já na primeira colagem. A tag og:image:alt descreve a imagem para leitores de tela nas plataformas que a suportam.

Formato e tamanho do arquivo

Use JPG ou PNG. Ambos são decodificados de forma confiável em todos os crawlers, e é justamente esse o objetivo de uma og:image: ela tem que renderizar em servidores que você não controla. Mantenha o arquivo abaixo de 1 MB como regra prática, e abaixo de 300 KB para o WhatsApp, que é mais rígido que o restante. Se a sua exportação ficar mais pesada, passe-a pelo compressor de imagens para trazê-la para menos de 1 MB sem prejudicar a qualidade de forma visível.

É tentador apelar para um formato moderno aqui, mas este é o único lugar onde vale resistir. Formatos mais novos economizam bytes para navegadores, mas alguns crawlers sociais os decodificam de maneira inconsistente, então uma og:image em WebP ou AVIF pode voltar em branco numa plataforma incapaz de lê-la. Os prós e contras estão no guia WebP vs AVIF vs JPEG; para imagens de compartilhamento especificamente, fique no JPG ou PNG. Como cada plataforma corta as bordas de um jeito, mantenha seu logo e seu título dentro de uma zona segura centralizada de 1080×600 para que nada importante seja cortado.

A regra da URL HTTPS absoluta

og:image e og:url precisam ser URLs https://… completas, não caminhos relativos. Um caminho como /cover.png resolve numa boa no seu editor e na sua página no ar, mas um crawler que busca a sua URL não tem uma base para resolvê-lo, então o compartilhamento volta vazio. A imagem também precisa ser acessível publicamente: se o robots.txt bloqueia o crawler ou o arquivo fica atrás de autenticação, a prévia continua em branco.

Mais uma restrição decide tudo o que foi dito acima: crawlers não executam JavaScript. Facebook, LinkedIn, WhatsApp, Telegram e Discord buscam o seu HTML bruto e leem o que estiver lá. Tags injetadas no cliente por um framework depois do carregamento da página são invisíveis para eles, então as suas tags Open Graph precisam estar em HTML renderizado no servidor ou estático.

Cards do Twitter/X: uma tag, e depois o fallback para o Open Graph

O X usa suas próprias meta tags Twitter Card, mas a sobreposição com o Open Graph faz você escrever bem menos do que imaginaria. Na prática, você adiciona uma tag e deixa o resto cair no fallback.

twitter:card é a única tag do Twitter obrigatória

O X não renderiza card nenhum a menos que twitter:card esteja presente, mesmo quando você tem um conjunto completo de tags Open Graph. É a única tag Twitter Card obrigatória:

<meta name="twitter:card" content="summary_large_image">

O valor escolhe o layout. summary_large_image gera o card grande em formato de banner, feito para uma imagem de 1200×630. summary gera um card compacto com uma pequena miniatura quadrada ao lado do texto:

<meta name="twitter:card" content="summary">

Repare no atributo name. As tags Twitter Card usam name, não o property que o Open Graph usa.

Como o X recorre a og:* para título, descrição e imagem

Para o título, a descrição e a imagem, o X lê suas og:title, og:description e og:image quando a tag twitter:* correspondente está ausente. É por isso que você quase nunca escreve twitter:title ou twitter:image. Defina twitter:card, mantenha suas tags Open Graph em ordem, e o X monta o card a partir delas.

A armadilha da twitter:image vazia

O fallback tem uma aresta afiada: uma tag vazia conta como presente. Se você emite twitter:image com um valor em branco, o X usa esse valor vazio em vez de recorrer à og:image, e o seu card perde a imagem.

<!-- Errado: bloqueia o fallback e deixa o card sem imagem -->
<meta name="twitter:image" content="">

<!-- Certo: omita a tag por completo e o X lê og:image -->

A regra é simples: nunca gere uma tag social vazia. Deixe-a de fora quando não tiver valor.

Particularidades do Slack e do Discord

O Slack lê primeiro o Twitter Card, depois o Open Graph, e pode expor dois campos extras via twitter:label e twitter:data:

<meta name="twitter:label1" content="Reading time">
<meta name="twitter:data1" content="11 minutes">
<meta name="twitter:label2" content="Written by">
<meta name="twitter:data2" content="Ada Lovelace">

Eles aparecem como pequenos detalhes rotulados sob o unfurl do Slack. O Discord lê Open Graph e adiciona um floreio que ninguém mais usa: ele colore a barra de destaque à esquerda do embed com o theme-color da sua página.

<meta name="theme-color" content="#5865F2">

Como as prévias de link renderizam em cada plataforma

As mesmas tags produzem prévias de link diferentes nas redes sociais dependendo de quem as lê. Cada plataforma escolhe seu próprio subconjunto de tags, faz cache pela sua própria janela de tempo e acrescenta uma mania ou outra. Esta tabela é a referência rápida.

Plataforma	Tags que lê	Cache	Comportamento notável
Facebook	Open Graph	~30 dias	Ignora imagens abaixo de 200×200; exibe um quadradinho abaixo de 600×315
LinkedIn	Open Graph	~7 dias	Limpe uma prévia desatualizada com o Post Inspector
X (Twitter)	`twitter:card` + recorre a `og:*`	curto	Sem `twitter:card` não há card algum
Slack	Twitter Card, depois Open Graph	por mensagem	Renderiza `twitter:label`/`twitter:data` como campos extras
Discord	Open Graph	por mensagem	Usa `theme-color` na barra de destaque do embed
WhatsApp	`og:title` + `og:image`	por mensagem	Quer os metadados perto do topo; mantenha a imagem abaixo de 300 KB
Telegram	Open Graph	por mensagem	Só renderiza de forma confiável a partir de JPEG ou PNG
Pinterest	Open Graph ou Schema.org	—	Os Rich Pins de artigo precisam de `og:type=article`

A coluna de cache explica uma surpresa comum: você corrige suas tags, compartilha de novo e o Facebook continua exibindo o título antigo por semanas. O Facebook guarda os dados Open Graph por cerca de 30 dias e o LinkedIn por cerca de 7, então uma edição não aparece até o cache expirar ou você forçar uma atualização. Os depuradores abaixo fazem exatamente isso.

Erros comuns de Open Graph (e como detectá-los)

A maioria das prévias quebradas remonta a uma lista curta de erros. Cada um parece estar tudo certo localmente e só falha quando um crawler busca a página no ar.

Caminho relativo na og:image

Um caminho relativo renderiza no seu navegador e quebra ao ser compartilhado, porque o crawler não tem uma URL base para resolvê-lo.

<!-- Fica em branco ao compartilhar -->
<meta property="og:image" content="/cover.png">

<!-- Renderiza em todos os lugares -->
<meta property="og:image" content="https://example.com/cover.png">

og:url ausente ou canônico que diverge dela

Sem og:url, as contagens de compartilhamento e o engajamento se espalham por variantes da URL (com e sem www, com parâmetros de rastreamento, com barra no final). Aponte tanto o seu link canônico quanto a og:url para uma única e mesma URL, para que os sinais fiquem juntos.

Imagem pequena demais ou com a proporção errada

Uma imagem abaixo de 200×200 é ignorada de cara, e uma bem distante de 1.91:1 acaba cortada de formas que você não planejou. Publique 1200×630 e o enquadramento fica previsível em toda plataforma.

Esquecer a twitter:card

Um conjunto completo de tags Open Graph ainda assim não produz card no X sem a twitter:card. Este é o motivo mais comum de um link ficar ótimo no LinkedIn e não mostrar nada no X.

Tags renderizadas no cliente que um crawler não enxerga

Se uma single-page app injeta tags Open Graph depois do carregamento, os crawlers que não executam JavaScript nunca as veem. Renderize as tags no servidor ou pré-renderize o HTML.

charset colocado depois dos primeiros 1024 bytes

A declaração <meta charset="utf-8"> precisa aparecer dentro dos primeiros 1024 bytes do documento, ou o navegador a ignora e pode embaralhar os caracteres não-ASCII do seu título e da sua descrição. Coloque-a em primeiro lugar dentro do <head>:

<head>
  <meta charset="utf-8">
  <!-- todo o resto vem em seguida -->
</head>

Como testar e depurar suas tags Open Graph

Nunca confie em uma prévia que você não verificou contra uma URL no ar. Três ferramentas cobrem as plataformas que importam, e todas elas conseguem forçar uma atualização de cache.

O Facebook Sharing Debugger busca sua URL no ar, mostra exatamente o que o Facebook interpretou e lista quaisquer tags ausentes ou malformadas. Seu botão mais útil é o “Scrape Again”, que atualiza o cache de ~30 dias do Facebook sob demanda, e é a forma mais rápida de fazer uma correção aparecer sem esperar um mês.

LinkedIn Post Inspector

O LinkedIn Post Inspector faz o mesmo trabalho para o LinkedIn. Cole uma URL e ele busca a página de novo e limpa o cache de ~7 dias do LinkedIn, para que um título ou imagem atualizados apareçam no seu próximo compartilhamento em vez de dias depois.

A validação de cards do X foi para o portal de desenvolvedores

O X aposentou seu Card Validator independente. A partir de 2026, a validação de cards vive dentro do portal de desenvolvedores do X, e não em uma URL pública, então a maioria das equipes verifica os cards do X de outro jeito: como o X recorre a og:*, os depuradores do Facebook e do LinkedIn já confirmam as tags que o X vai ler, e uma ferramenta de prévia de terceiros preenche a lacuna do próprio layout twitter:card.

Faça a prévia antes de publicar

Os depuradores só conseguem inspecionar uma URL que já está no ar, o que é um péssimo momento para descobrir uma imagem em branco. Faça a prévia do card enquanto ainda está editando. O Gerador de Meta Tags renderiza prévias de Google, Facebook, X, LinkedIn, Slack e Discord a partir dos valores que você digita, lê as dimensões reais da sua og:image no navegador para pegar uma proporção errada e consegue importar um <head> existente para você diagnosticar um compartilhamento quebrado antes que ele vá para produção.

Checklist rápido

Aqui está o mínimo que toda página deveria carregar. Copie, troque pelos seus valores e você tem uma prévia que renderiza em todos os cantos:

<meta charset="utf-8">
<title>Your page title</title>
<meta name="description" content="Your 150-character summary.">
<link rel="canonical" href="https://example.com/page">

<meta property="og:title" content="Your page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og/page.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Your 150-character summary.">

<meta name="twitter:card" content="summary_large_image">

Passe pelos itens essenciais antes de publicar: uma og:image HTTPS absoluta em 1200×630, og:url batendo com o seu canônico, twitter:card presente e as tags renderizadas no servidor. Se você quiser um tour mais completo pelos utilitários que aceleram isso, o guia de ferramentas para desenvolvedores reúne o restante. Quando estiver pronto para gerar e pré-visualizar o bloco inteiro de uma vez, o Gerador de Meta Tags escreve, verifica e mostra cada card antes de você publicar.

Perguntas frequentes

Qual é a diferença entre as tags Open Graph e as Twitter Card?

Open Graph é um protocolo multiplataforma lido por Facebook, LinkedIn, Slack e mais; as tags Twitter Card (twitter:*) são específicas do X. O X recorre às suas tags OG quando a tag twitter:* correspondente está ausente, então você geralmente precisa das OG mais um único valor de twitter:card.

As tags Open Graph afetam o ranking de busca do Google?

Não. As tags Open Graph e Twitter Card não influenciam o ranking do Google; elas controlam a aparência dos links quando compartilhados e geram tráfego social. As clássicas <title> e as tags canônicas importam para o SEO; a meta description molda o seu snippet e a taxa de cliques, mas não é um fator de ranking direto.

Onde ficam as tags Open Graph no HTML?

Dentro do elemento <head>, no HTML renderizado no servidor ou estático. Os crawlers do Facebook, LinkedIn, WhatsApp e Telegram não executam JavaScript, então tags injetadas no cliente não serão vistas. Coloque <meta charset> primeiro para que caia dentro dos primeiros 1024 bytes.

Uma única imagem pode servir para Facebook, X e LinkedIn?

Sim. Uma única imagem de 1200×630 (1.91:1) renderiza corretamente no Facebook, LinkedIn, Slack, Discord e no card summary_large_image do X. Sirva-a por HTTPS em uma URL pública e declare og:image:width/og:image:height para que o primeiro compartilhamento não fique em branco.

Por que a prévia do meu link não mostra imagem?

Causas comuns: um caminho og:image relativo em vez de uma URL HTTPS absoluta, uma imagem abaixo de 200×200, uma twitter:card ausente no X, ou tags injetadas por JavaScript que o crawler não consegue executar. Faça um novo scrape com o Facebook Sharing Debugger depois de corrigir.

Todas as páginas precisam das suas próprias tags Open Graph?

O ideal é que sim: cada página deveria ter og:title, og:description, og:image e uma og:url canônica refletindo aquela página específica, para que os links compartilhados mostrem prévias relevantes. Um fallback para o site inteiro é melhor que nada, mas tags por página conquistam muito mais cliques sociais.