Veja como adicionar tags Open Graph: coloque um pequeno conjunto de meta tags og: dentro do <head> da sua página, defina um título, uma descrição e uma imagem de 1200x630, depois valide o resultado antes de compartilhar. Open Graph é o protocolo que controla o que Facebook, LinkedIn, Discord, Slack e a maioria das outras plataformas mostram quando alguém cola seu link. Sem ele, seu link parece texto puro ou uma miniatura quebrada.
Este guia fornece o conjunto exato de tags para copiar e colar (sem plugin, sem CMS necessário), os tamanhos de imagem que realmente renderizam corretamente em cada plataforma e a correção para o problema mais comum: a pré-visualização que se recusa a atualizar porque a plataforma armazenou em cache a antiga. Ao final, você saberá como adicionar tags Open Graph manualmente e verificá-las em todas as principais redes.
O que as Tags Open Graph Realmente Fazem#
Open Graph (muitas vezes abreviado como OG) é um protocolo de marcação que o Facebook introduziu em 2010. Ele permite que você, o proprietário da página, decida exatamente como sua URL será representada quando for compartilhada. Em vez de um rastreador adivinhar um título e pegar uma imagem aleatória, ele lê os valores que você declarou.
Quando alguém cola seu link em uma postagem, mensagem ou chat, a plataforma acessa sua página, lê as tags og: no <head> e cria um cartão de visualização a partir delas. Esse cartão é sua primeira impressão. Um cartão limpo com uma imagem nítida é clicado. Uma URL simples é ignorada.
Ponto chave: As tags Open Graph não afetam diretamente seus rankings no Google. Elas afetam a taxa de cliques e compartilhamentos em plataformas sociais e de chat, que é um canal de tráfego diferente e muito real.
Quais plataformas leem Open Graph#
Quase todas, com uma exceção histórica. A lista abaixo cobre as oito superfícies que a maioria das pessoas se importa e qual protocolo cada uma lê.
| Plataforma | Lê Open Graph? | Notas |
|---|---|---|
| Sim | O consumidor original do OG; usa o Sharing Debugger para atualizar | |
| Sim | Lê og:title, og:description, og:image; tem seu próprio Post Inspector | |
| X (Twitter) | Sim, com fallback para Twitter Card | Prefere tags twitter:, mas usa og: como fallback |
| Discord | Sim | Cria embeds ricos a partir de tags OG |
| Slack | Sim | Expande links usando tags OG |
| Sim | Miniatura de pré-visualização de og:image | |
| iMessage | Sim | Pré-visualização de link rica do OG |
| Sim, além do seu próprio | Lê OG, mas também suporta metadados de Rich Pins |
A conclusão prática: acerte suas tags Open Graph e você cobre a grande maioria das superfícies de compartilhamento com um único bloco de marcação.
As Tags Open Graph Essenciais que Você Precisa#
Você não precisa de dezenas de tags. Cinco tags OG principais, mais um pequeno bloco do Twitter Card, resolvem quase todos os casos reais. Aqui está o conjunto mínimo e correto para colocar no seu <head>.
<!-- Open Graph core -->
<meta property="og:title" content="Título da Sua Página Aqui" />
<meta property="og:description" content="Um resumo de 1 a 2 frases que merece o clique." />
<meta property="og:image" content="https://exemplo.com/og-image.jpg" />
<meta property="og:url" content="https://exemplo.com/sua-pagina" />
<meta property="og:type" content="website" />
<!-- Twitter Card (X lê estas, usa og: se ausentes) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Título da Sua Página Aqui" />
<meta name="twitter:description" content="Um resumo de 1 a 2 frases que merece o clique." />
<meta name="twitter:image" content="https://exemplo.com/og-image.jpg" />
Algumas coisas que vale a pena entender sobre esse bloco, porque os detalhes são onde as prévias quebram:
- Tags
og:usamproperty, tags do Twitter usamname. Isso pega muita gente.<meta property="og:title">está correto;<meta name="og:title">está tecnicamente errado e alguns crawlers ignoram. og:urldeve ser a URL canônica e absoluta. Use o endereço completohttps://, não um caminho relativo. Isso se torna o link para o qual a prévia aponta.og:imagetambém deve ser uma URL absoluta. Um caminho relativo como/og.jpgnão será resolvido quando um crawler externo buscar sua página.twitter:carddefinido comosummary_large_imagete dá o card grande no estilo banner. Deixe de fora e o X mostra uma miniatura quadrada pequena.
Tags opcionais que valem a pena adicionar para artigos#
Se a página for um post de blog ou artigo, em vez de uma página genérica, duas tags extras adicionam polimento e desbloqueiam embeds mais ricos em algumas plataformas.
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Sua Marca" />
<meta property="article:published_time" content="2026-06-25T08:00:00Z" />
Defina og:type como article para posts e website para páginas iniciais, landing pages e ferramentas. O og:site_name mostra sua marca acima ou abaixo do título em várias plataformas, o que gera reconhecimento entre os compartilhamentos.
O tamanho de og:image que renderiza corretamente em todos os lugares#
A imagem é a parte que as pessoas mais erram, e é a parte que mais importa visualmente. Existe uma especificação segura que funciona em todas as principais plataformas.
Use 1200 x 630 pixels com uma proporção de 1,91:1. Este é o tamanho recomendado pelo Facebook e renderiza perfeitamente no LinkedIn, X (como cartão de imagem grande), Discord e Slack, sem cortes estranhos. Mantenha textos importantes e rostos longe das bordas, pois algumas plataformas aplicam um leve corte.
Aqui está uma folha de dicas rápida para as plataformas com expectativas mais restritas ou diferentes.
| Caso de uso | Tamanho recomendado | Proporção | Observações |
|---|---|---|---|
| Imagem OG universal | 1200 x 630 | 1,91:1 | O padrão que funciona em quase todos os lugares |
| Cartão grande do X | 1200 x 628 | ~1,91:1 | Efetivamente o mesmo que o tamanho universal |
| Cartão pequeno do X | 144 x 144 mínimo | 1:1 | Apenas se você definir twitter:card como summary |
| 1200 x 627 | ~1,91:1 | Trate 1200 x 630 como seguro | |
| Discord / Slack | 1200 x 630 | 1,91:1 | Redimensiona a imagem universal perfeitamente |
Algumas regras de imagem que evitam prévias quebradas ou borradas:
- Mantenha o arquivo abaixo de cerca de 5 MB. Facebook e outras plataformas podem ignorar imagens muito grandes, deixando você sem imagem de prévia.
- Use JPG ou PNG. O suporte a WebP é inconsistente entre os crawlers, então, para imagens OG especificamente, use os formatos seguros, mesmo que seu site use WebP em outros lugares.
- Sirva via HTTPS. Uma imagem
http://de conteúdo misto dentro de uma página HTTPS pode ser descartada. - Torne as dimensões explícitas. Adicionar
og:image:widtheog:image:heightajuda as plataformas a reservar o espaço correto e renderizar mais rápido.
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Se você quiser criar um cartão personalizado no tamanho certo sem abrir uma ferramenta de design, o gerador gratuito de meta tags e Open Graph constrói o bloco completo de tags e mostra exatamente como a imagem de 1200x630 ficará na prévia.
Como Adicionar Tags Open Graph Passo a Passo#
Este procedimento funciona para qualquer site onde você possa editar o HTML <head>: um site codificado manualmente, um gerador de site estático, um template personalizado ou um framework como Next.js ou Astro. Nenhum plugin é necessário. Siga estas etapas para adicionar tags Open Graph do zero e confirmar que funcionam.
Etapa 1: Escreva seu título e descrição#
Decida o texto exato primeiro. Seu og:title pode ser diferente da sua tag <title> e da sua meta description de SEO, e muitas vezes deve ser. O título e a descrição OG são escritos para uma pessoa rolando um feed social, então sejam impactantes e focados no benefício.
Mantenha og:title com aproximadamente 60 a 90 caracteres para não ser truncado, e og:description com cerca de 110 a 200 caracteres, dependendo da plataforma. Mais curto é mais seguro. Se você quiser ver como o comprimento afeta o snippet de busca também, nosso guia sobre comprimento da meta description e largura em pixels cobre os limites de truncamento em detalhes.
Etapa 2: Crie e hospede sua og:image#
Crie uma imagem de 1200x630 com seu título, logotipo e um fundo limpo. Exporte como JPG ou PNG e faça upload para um local com uma URL HTTPS estável e pública. Pode ser seu próprio servidor, uma pasta /images/ ou uma CDN.
Copie a URL absoluta completa da imagem enviada. Você a colará tanto em og:image quanto em twitter:image. Abra a URL diretamente no navegador para confirmar que carrega sem tela de login ou redirecionamento, pois os crawlers não podem fazer login.
Etapa 3: Cole as tags no seu head#
Insira o bloco completo de tags da seção acima no <head> da sua página, idealmente perto do topo junto com suas outras meta tags. Substitua os valores de placeholder pelo seu título real, descrição, URL da imagem e URL canônica da página.
<head>
<meta charset="utf-8" />
<title>Título da Sua Página Aqui</title>
<meta property="og:title" content="Título da Sua Página Aqui" />
<meta property="og:description" content="Um resumo que merece o clique." />
<meta property="og:image" content="https://exemplo.com/og-image.jpg" />
<meta property="og:url" content="https://exemplo.com/sua-pagina" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://exemplo.com/og-image.jpg" />
</head>
Se você usa um framework, defina-os na API de head ou metadados do framework em vez de editar HTML bruto. Os nomes das tags permanecem idênticos independentemente de como você os injeta.
Etapa 4: Valide antes de compartilhar#
Não presuma que funciona. Cada plataforma expõe uma ferramenta de depuração que busca sua página e mostra o card exato que será renderizado. Execute sua URL através delas antes de postar em qualquer lugar:
- Facebook Sharing Debugger para Facebook e a maioria dos consumidores OG genéricos.
- LinkedIn Post Inspector para prévias do LinkedIn.
- A prévia do X (Twitter) Card, visível ao colar o link em um rascunho de post.
Esses validadores também reportam tags ausentes ou mal formatadas, então funcionam como verificadores de erros. Se o card parecer errado, corrija a tag que eles sinalizam e execute novamente.
Etapa 5: Prévia em todas as plataformas de uma vez#
Executar três depuradores separados para cada link fica tedioso rapidamente. Para ver como uma URL ficará em todas as principais plataformas em uma única visualização, cole-a em uma ferramenta de prévia multiplataforma. A ferramenta de prévia SERP e social renderiza seu título, descrição e imagem OG lado a lado para que você possa detectar uma imagem cortada ou título truncado em segundos, não após uma postagem falha.
Corrigindo o Problema de Cache "Imagem Não Atualizada"#
Este é o problema mais frustrante do Open Graph, e quase ninguém documenta a solução real. Você atualizou sua og:image, compartilhou o link novamente, e a imagem antiga (ou nenhuma imagem) ainda aparece. As tags estão corretas. Então por que está quebrado?
A resposta é o cache. Quando uma plataforma busca sua URL pela primeira vez, ela armazena os dados OG em seus próprios servidores para não precisar rastrear novamente toda vez que alguém compartilha o link. Mude as tags depois e a plataforma continua servindo sua cópia desatualizada até que o cache expire, o que pode levar dias.
A solução é forçar a plataforma a rastrear sua página novamente. Você não espera; você diz ao cache para atualizar.
Veja como limpar o cache nas plataformas que o mantêm:
- Facebook: Abra o Facebook Sharing Debugger, cole sua URL e clique em "Scrape Again." Isso força uma nova busca e atualiza a prévia em cache imediatamente.
- LinkedIn: Use o LinkedIn Post Inspector. Executar sua URL por ele aciona uma nova busca. O LinkedIn historicamente armazena em cache por cerca de 7 dias, caso contrário.
- X (Twitter): O X expira os caches de cartão por conta própria, geralmente em alguns dias. Não há mais um botão público de atualização manual, então mudar a URL da imagem é a solução alternativa confiável.
- Discord e Slack: Ambos armazenam embeds em cache. O truque confiável é alterar o nome do arquivo da imagem ou adicionar uma string de consulta (por exemplo
og-image.jpg?v=2), que a plataforma trata como uma URL totalmente nova, sem cache.
O truque da string de consulta (?v=2, ?v=3) é a solução alternativa universal. Como o cache é vinculado à URL exata da imagem, uma nova URL ignora a entrada desatualizada em todas as plataformas de uma vez. Combine isso com um novo rastreamento manual no Facebook e LinkedIn e sua prévia será atualizada em todos os lugares.
Por que sua imagem pode nunca ter aparecido#
Se a prévia estava quebrada desde o primeiro compartilhamento, o cache não é a causa. Verifique estes itens em ordem:
- URL de imagem relativa.
og:imagedeve ser absoluta (https://...), não/og.jpg. - Imagem atrás de autenticação ou redirecionamento. Os rastreadores não podem seguir logins. Abra a URL da imagem em uma janela anônima para confirmar.
- Arquivo muito grande ou formato errado. Fique abaixo de ~5 MB e use JPG ou PNG.
- Tag usando
nameem vez deproperty. Lembre-se: tagsog:precisam deproperty, nãoname. - Tags injetadas por JavaScript após o carregamento. Muitos rastreadores não executam JS, então as tags OG devem estar no HTML renderizado pelo servidor, não adicionadas no lado do cliente.
Esse último pega muitos aplicativos de página única. Se suas tags só aparecem depois que o React ou Vue hidrata, renderize-as no servidor ou pré-renderize a página para que o rastreador as veja na resposta HTML inicial.
Gerando o Bloco Completo de Tags Sem Codificação Manual#
Escrever as tags manualmente uma vez é bom para entender. Fazer isso para cada página é repetitivo e fácil de errar sutilmente (uma property faltando, uma URL relativa, um Twitter Card esquecido). Um gerador elimina o trabalho braçal enquanto mantém você no controle dos valores.
O gerador de tags Open Graph e meta tags permite que você digite seu título, descrição e URL da imagem, e então gera o bloco completo e correto com as tags og: e twitter: prontas para colar. Ele usa property e name corretamente, torna as URLs absolutas e inclui as tags de dimensão da imagem para que as plataformas renderizem mais rápido.
Em seguida, execute o resultado através da ferramenta de pré-visualização social e SERP para confirmar se o card parece correto antes de ir ao ar. Esse ciclo de duas etapas, gerar e depois pré-visualizar, é como você envia prévias de links que funcionam na primeira vez, em vez de depurá-las em público depois que uma postagem já foi ao ar parecendo quebrada.
Conclusão#
Aprender a adicionar tags Open Graph se resume a uma rotina curta e repetível: insira as cinco tags og: principais mais um bloco Twitter Card no seu <head>, aponte og:image para uma imagem absoluta de 1200x630 em JPG ou PNG, e valide com o depurador de cada plataforma antes de compartilhar. Quando a prévia se recusa a atualizar, a causa quase sempre é uma cópia em cache, e a solução é um re-escaneamento forçado ou uma nova URL de imagem, não paciência.
Acertando esses fundamentos, todo link que você compartilhar, no Facebook, LinkedIn, X, Discord, Slack e além, exibirá um card limpo e com a marca que gera cliques. Gere as tags, visualize o card e publique com confiança.
Perguntas Frequentes#
Onde as tags Open Graph vão no meu HTML?
As tags Open Graph vão dentro da seção <head> da sua página, junto com outras meta tags. Elas devem estar presentes no HTML renderizado pelo servidor para que rastreadores externos possam lê-las, pois a maioria dos rastreadores não executa JavaScript que adiciona tags após o carregamento da página.
Qual é o tamanho correto de og:image? Use 1200 x 630 pixels, com proporção de 1,91:1. Esse tamanho único renderiza bem no Facebook, LinkedIn, X, Discord e Slack, sem cortes estranhos. Mantenha o arquivo abaixo de 5 MB, use JPG ou PNG e sirva via HTTPS com URL absoluta.
Por que a pré-visualização do meu link não está mostrando uma imagem?
As causas mais comuns são: URL relativa em og:image em vez de absoluta https://, imagem atrás de login ou redirecionamento, arquivo muito grande ou uso de name em vez de property nas tags og:. Se a imagem estava correta, mas mudou e não atualiza, a plataforma armazenou a versão antiga em cache e você precisa forçar um novo rastreamento.
Como atualizar uma pré-visualização Open Graph em cache?
Use o Sharing Debugger do Facebook e clique em "Scrape Again", e execute a URL no Post Inspector do LinkedIn para acionar uma nova busca. Para Discord, Slack ou qualquer cache teimoso, altere o nome do arquivo da imagem ou adicione uma string de versão na query, como ?v=2, que a plataforma trata como uma nova URL sem cache antigo.
Preciso de tags Twitter Card se já tenho tags Open Graph?
Não estritamente, pois o X usa suas tags og: como fallback quando as tags Twitter Card estão ausentes. Mas adicionar twitter:card definido como summary_large_image vale a pena, pois força o cartão de imagem grande no estilo banner, em vez de uma miniatura pequena, o que tem desempenho visivelmente melhor no feed.
As tags Open Graph ajudam no ranking do Google? Não, as tags Open Graph não influenciam diretamente o ranking do Google. Elas controlam como seus links aparecem em redes sociais e plataformas de chat, o que gera cliques e compartilhamentos. Esse tráfego de referência e reconhecimento de marca é valioso por si só, mas é um canal separado dos sinais de ranking de busca orgânica.
