Tags Open Graph: como configurar o og:image e ter prévias de link limpas

Por SEOgrinder · Publicado em 4 de novembro de 2026 · 11 min de leitura

Resposta curta: as tags Open Graph são meta tags no cabeçalho de uma página que dizem às redes sociais e aos aplicativos de mensagem qual título, qual descrição e qual imagem mostrar quando alguém compartilha o seu link. O protocolo exige quatro delas (og:title, og:type, og:image e og:url), e vale a pena acrescentar o og:description. Use uma imagem de pelo menos 1200 × 630 pixels e com menos de 8 MB, informe o endereço https completo e coloque todas as tags no HTML que o seu servidor entrega, e não em um JavaScript que só roda depois. Um efeito no ranking não está comprovado: as tags controlam a aparência de um link compartilhado.

O que são as tags Open Graph?

O Open Graph é um protocolo com o qual uma página web se descreve como um objeto: com título, tipo, imagem e endereço. Segundo o ogp.me, ele foi criado originalmente no Facebook. Você o aplica com tags meta dentro do head da página. Quando alguém cola o seu link em uma publicação ou em uma conversa, a plataforma busca a página, lê essas tags e monta o cartão de prévia a partir delas. Sem as tags, a plataforma tem de adivinhar: qual título, qual texto, qual imagem?

O protocolo define quatro propriedades obrigatórias para cada página, mais uma opcional, mas geralmente recomendada:

Tag	O que ela contém	Situação
og:title	O título do objeto, como deve aparecer na prévia	Obrigatória
og:type	O tipo do objeto, por exemplo `website` ou `article`	Obrigatória
og:image	O endereço da imagem que representa a página	Obrigatória
og:url	O endereço canônico da página, seu identificador permanente	Obrigatória
og:description	Uma descrição de uma ou duas frases	Opcional, geralmente recomendada

O valor de og:type é mais do que um rótulo. Segundo o ogp.me, o tipo escolhido pode trazer outras propriedades. Para article, o protocolo lista, por exemplo, article:published_time e article:modified_time. Outras tags opcionais são og:site_name (o nome do site inteiro) e og:locale (o idioma das informações; o padrão é en_US).

O HTML mínimo das tags Open Graph

Este é um conjunto completo que você pode adaptar. (O exemplo do ogp.me também define um atributo prefix no elemento html; as grandes plataformas leem as tags mesmo sem ele.) Ele vai dentro do elemento head, ao lado da sua tag title normal:

<head>
  <title>Tags Open Graph: como configurar o og:image</title>
  <meta property="og:title" content="Tags Open Graph: como configurar o og:image">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/tags-open-graph">
  <meta property="og:image" content="https://example.com/imagens/tags-open-graph.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Cartão de prévia de um link com imagem, título e descrição">
  <meta property="og:description" content="As quatro tags obrigatórias, as regras da imagem e como testar a prévia do link.">
  <meta property="og:site_name" content="Exemplo">
</head>

Algumas observações sobre os detalhes:

O og:url é um identificador permanente. O ogp.me o define como o endereço canônico do objeto. Use o mesmo endereço do seu link canonical, sem parâmetros de rastreamento.
Escreva o endereço da imagem por inteiro. Todos os exemplos do ogp.me usam um endereço completo. Um caminho relativo como /imagens/cartao.png depende de como cada rastreador o resolve, então não confie nisso.
Largura e altura ajudam. A documentação do Facebook diz que, com essas duas tags, o rastreador consegue exibir a imagem de imediato, sem precisar baixá-la e processá-la antes.
Acrescente o og:image:alt. O ogp.me diz que uma página que informa uma imagem deve também descrever o que há nela (uma descrição, não uma legenda).

Regras do og:image: tamanho, arquivo e endereço

O Facebook publica os números mais claros, na página sobre imagens em links compartilhados. Eles servem de referência para o restante desta seção:

O tamanho mínimo permitido é 200 × 200 pixels.
O arquivo não pode passar de 8 MB.
Para a melhor exibição em dispositivos de alta resolução, use pelo menos 1200 × 630 pixels.
No mínimo 600 × 315 pixels são necessários para que as publicações com link mostrem uma imagem grande. Imagens menores ainda aparecem, mas bem menores.
Mantenha a proporção o mais próximo possível de 1,91 : 1, para que a imagem apareça inteira, sem corte. 1200 × 630 dá cerca de 1,905 : 1, e por isso esse tamanho é a escolha habitual.
O rastreador aceita apenas as codificações gzip e deflate; confira se o seu servidor ou a sua CDN responde com uma das duas.

Essas são as regras do Facebook. Outros aplicativos e mensageiros leem as mesmas tags, mas este artigo não documenta os limites deles. Por isso, teste nos lugares que importam para você. Para comparar: as páginas do blog do SEOgrinder usam uma imagem de prévia de 1200 × 630 pixels.

Duas outras condições dizem respeito ao acesso, não ao tamanho. A imagem precisa ser pública: sem login na frente e sem regra de robots.txt que bloqueie a pasta onde ela está. Se um rastreador não consegue buscar o arquivo, a prévia fica sem imagem, por melhor que seja o arquivo.

Dê a cada página as suas próprias tags Open Graph

Como o og:url é o identificador permanente de um objeto, ele precisa ser diferente em cada página. O mesmo vale para o resto:

og:title diz do que trata aquela página, e não o nome do site inteiro.
og:description resume aquela página em uma ou duas frases.
og:image mostra algo que combina com a página. Tenha uma imagem padrão para as páginas que não têm a sua.
og:type também pode variar: website para a página inicial, article para um post do blog ou uma notícia.

Seja qual for a sua tecnologia, gere as tags a partir dos dados de cada página, em vez de digitá-las à mão. Um pequeno exemplo em Node:

const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');

function openGraphTags(pagina) {
  return [
    ['og:title', pagina.titulo],
    ['og:type', pagina.tipo || 'website'],
    ['og:url', `https://example.com${pagina.caminho}`],
    ['og:image', pagina.imagem || 'https://example.com/imagens/cartao-padrao.png'],
    ['og:description', pagina.descricao],
  ].filter(([, content]) => content != null && content !== '').map(([property, content]) => `<meta property="${property}" content="${esc(content)}">`).join('\n');
}

A função esc é importante: um título com aspas encerraria o atributo antes da hora e quebraria a tag. Se você usa um CMS, procure o campo que define a imagem de compartilhamento de cada página. O que você confere no fim continua igual: as tags no HTML entregue.

As tags Open Graph precisam estar no HTML entregue

Muitos sites modernos enviam uma casca de HTML quase vazia e deixam o JavaScript montar a página no navegador. O Google lida com isso: segundo a documentação sobre JavaScript, a Busca renderiza as páginas com uma versão “evergreen” do Chromium. A mesma página também diz que a renderização no servidor ou a pré-renderização continua sendo uma boa ideia, porque nem todos os bots conseguem executar JavaScript.

Para os rastreadores de IA existe uma medição: em dezembro de 2024, a Vercel e a MERJ constataram que nenhum dos principais rastreadores de IA que analisaram executava JavaScript. É um retrato de 2024, não confirmado de novo desde então. Para prévias de link, daí sai uma regra segura: se as suas tags só aparecem depois que um script rodou, um rastreador que não executa scripts nunca as vê. O SEOgrinder aponta essas páginas como “A página só é montada no navegador”, com o aviso de que muitos rastreadores de IA não executam JavaScript e veem uma página quase vazia.

Você pode testar isso em dez segundos:

curl -sL https://example.com/ | grep -io '<meta[^>]*og:[^>]*>'

Se as tags voltarem, elas estão no HTML entregue. Se não voltar nada, mas as tags aparecerem nas ferramentas do desenvolvedor do navegador, algum script as insere tarde demais. O mesmo teste funciona com “Ver código-fonte” no navegador: ele mostra o HTML entregue, e não o estado da página depois que todos os scripts rodaram (que é o que as ferramentas do desenvolvedor mostram). A solução é renderizar no servidor ou gerar as páginas antecipadamente, para que título, texto e tags já estejam na primeira resposta.

Como testar a prévia do link

O Sharing Debugger do Facebook mostra quais tags o rastreador leu e aponta erros. Ele pede login no Facebook. Segundo a documentação de imagens do Facebook, ao consultar um endereço ele também busca os metadados antecipadamente, e isso importa por causa do cache:

O Facebook guarda cada imagem em cache pelo endereço dela. Se você trocar uma imagem, use uma URL nova para a nova; do contrário, a antiga continua aparecendo.
Não apague a imagem antiga, porque publicações existentes ainda podem apontar para ela.
Trocar a imagem de uma URL não atualiza a prévia de compartilhamentos antigos. Esses precisam ser atualizados.
O rastreador precisa ver a imagem pelo menos uma vez antes de conseguir exibi-la. Sem a busca antecipada, a primeira pessoa que compartilhar o link pode não ver a imagem.

Antes de publicar, percorra esta lista:

Busque a página com curl e confirme que as cinco tags estão na primeira resposta.
Abra o endereço da imagem sozinho. Ele precisa carregar sem login, com status 200.
Confira o tamanho: pelo menos 1200 × 630 pixels, menos de 8 MB.
Passe a página pelo Sharing Debugger e leia os erros e avisos.
Repita para uma página de cada tipo: a página inicial, um post, um produto.

Como o SEOgrinder verifica as tags Open Graph

Digite o endereço de uma página pública no SEOgrinder e o relatório inclui uma “Pré-visualização social”, que mostra como a página fica quando é compartilhada. A ferramenta lê as suas tags, carrega a imagem e informa o que encontra. Não exige cadastro e não custa nada. Estes são os achados que importam aqui:

Pré-visualização de partilha incompleta diz o que falta entre imagem, título e descrição.
A imagem de pré-visualização não carrega aparece quando a imagem responde com um status de erro. O achado informa esse status e aponta as causas habituais: um endereço errado, um login na frente do arquivo ou um bloqueio no robots.txt. Segundo o achado, os links aparecem então no LinkedIn, no WhatsApp e no X sem imagem.
A imagem de pré-visualização é muito pequena aparece abaixo de 600 × 315 pixels (o Facebook então a mostra só como uma miniatura pequena); imagens abaixo do mínimo de 200 × 200 são sinalizadas à parte.
A página só é montada no navegador é o achado para páginas que montam a interface no navegador.

O SEOgrinder não consegue mostrar como cada rede desenha o cartão. Ele verifica as tags e o arquivo, que é a parte que você controla. Para o visual final, use o depurador.

Erros comuns

Um caminho de imagem relativo. Use o endereço completo com https://.
Uma imagem que não pode ser buscada. Um login, uma regra de firewall ou uma linha de robots.txt sobre a pasta da imagem deixam a prévia sem imagem.
Uma imagem pequena demais. Abaixo de 600 × 315 pixels ela aparece pequena; abaixo de 200 × 200, talvez nem apareça.
Nenhuma descrição. O og:description é opcional no protocolo, mas sem ele a plataforma adivinha.
As mesmas tags em todas as páginas. Assim, todo post, ao ser compartilhado, parece a página inicial, e o og:url deixa de identificar qualquer coisa.
Trocar a imagem mantendo o mesmo endereço. O Facebook guarda em cache pela URL, então publique o novo arquivo com um nome novo.
Tags que só existem depois que o JavaScript roda. Coloque-as no HTML entregue.
Aspas sem escape nos valores. Elas encerram o atributo e cortam a tag.
Um endereço com rastreamento no og:url. A tag deve conter o endereço canônico.

Perguntas frequentes

As tags Open Graph são um fator de ranking?

Não há evidência disso. O Open Graph controla a aparência de um link compartilhado nas redes sociais e nos aplicativos de mensagem. Nada nas fontes usadas aqui o liga ao ranking.

Que tamanho o og:image deve ter?

1200 × 630 pixels, com proporção próxima de 1,91 : 1 e menos de 8 MB. Isso atende à recomendação do Facebook e é o tamanho da imagem de prévia nas páginas do blog do SEOgrinder.

Preciso do og:description?

O protocolo o lista como opcional e geralmente recomendado. Sem a tag, a plataforma precisa inventar uma descrição a partir da sua página; portanto, escreva uma.

Por que a minha imagem antiga continua aparecendo?

O Facebook guarda as imagens em cache pelo endereço. Publique a nova imagem em uma URL nova e passe a página pelo Sharing Debugger. Os compartilhamentos antigos não são atualizados sozinhos.

E o twitter:card?

Essa tag não faz parte do protocolo Open Graph. A dica de correção do SEOgrinder para uma prévia incompleta também sugere definir twitter:card como summary_large_image. Este artigo não trata das regras do X; consulte-as na documentação do próprio X.

Um agente de código pode inserir as tags para mim?

Ele pode fazer a parte mecânica: escrever as tags nos seus templates e conferi-las com curl. No relatório, Entregar à IA gera os achados como uma ordem de trabalho em Markdown, com uma condição verificável (“Pronto quando”) para cada tarefa. Escolher a imagem e redigir o texto continua sendo trabalho seu. O fluxo completo está em como corrigir erros de SEO com um agente de IA para programação.

Seu próximo passo

Faça a análise gratuita da sua página inicial e veja a pré-visualização social e os achados citados acima. Corrija-os em ordem, publique uma imagem nova em um endereço novo se precisar trocar uma e passe a página pelo Sharing Debugger. Depois analise de novo para confirmar que a prévia está completa. Para os demais pontos de uma revisão geral, use a checklist de auditoria SEO.