Gerador de Meta Tags Open Graph

As tags Open Graph são pequenos trechos de HTML que definem a aparência da sua página quando ela é compartilhada no Facebook, LinkedIn, Slack, Discord ou X (Twitter). Preencha abaixo o título, a descrição, a URL, a imagem e algumas opções, veja a pré-visualização do cartão atualizar instantaneamente e copie as tags <meta> geradas direto para o <head> da sua página. Tudo acontece no seu navegador — nada é enviado a um servidor.

O que é esta ferramenta?

Open Graph é um protocolo, criado originalmente pelo Facebook, que permite que qualquer página web se descreva por meio de um pequeno conjunto de tags <meta property="og:..."> colocadas no <head> do HTML. Quando alguém cola seu link em um app social, cliente de chat ou ferramenta de mensagens, esse app lê essas tags para montar o cartão de pré-visualização — título, descrição e imagem em miniatura — em vez de tentar adivinhar a partir do conteúdo da página.

O Twitter (X) usa um conjunto de tags relacionado, mas separado, <meta name="twitter:...">, para controlar especificamente como um link é pré-visualizado na sua plataforma. A maioria dos sites define os dois: tags Open Graph para ampla compatibilidade e tags Twitter Card para ajustar a pré-visualização no X (por exemplo, escolhendo um cartão com imagem grande em vez de um resumo pequeno).

Sem essas tags, um link compartilhado não mostra nenhuma pré-visualização, ou a plataforma tenta adivinhar título e imagem a partir do conteúdo bruto da página — muitas vezes escolhendo o título errado, uma imagem aleatória do meio do texto, ou nada. Definir explicitamente og:title, og:description e og:image te dá controle total sobre como seu conteúdo é apresentado antes mesmo de alguém clicar.

Por que usar?

Pré-visualização em tempo real — veja exatamente como o cartão de compartilhamento vai ficar enquanto você digita, antes de publicar qualquer coisa.
Gera tanto as tags Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name) quanto as tags Twitter Card de uma só vez.
Cobre os campos que as plataformas realmente leem: título, descrição, URL canônica, imagem, nome do site, tipo de conteúdo e estilo de cartão do Twitter.
Funciona totalmente no lado do cliente — seu título, descrição e URLs nunca saem do seu navegador.
Grátis, sem login, sem limite de uso — copie o resultado e cole no seu HTML.

Como usar

Digite o título da sua página e uma descrição curta (procure manter o título abaixo de ~60 caracteres e a descrição entre ~155–160).
Digite a URL canônica da página e a URL absoluta da imagem de pré-visualização (as URLs de imagem precisam ser completas, como https://example.com/imagem.jpg, e não um caminho relativo).
Se quiser, defina o nome do site, escolha um og:type (website, article, product, profile, video, music) e um tipo de Twitter Card (summary ou summary_large_image).
Confira o cartão de pré-visualização em tempo real para conferir se título, descrição e imagem combinam bem.
Clique em "Copiar" e cole as tags <meta> geradas no <head> da sua página, logo antes da tag de fechamento </head>.

Exemplo

Entrada

Título: "10 ferramentas gratuitas para devs que você vai usar de verdade"
Descrição: "Uma lista selecionada de ferramentas no navegador para JSON, regex, UUIDs e mais — sem instalação."
URL: https://example.com/blog/dev-tools
Imagem: https://example.com/images/dev-tools-cover.jpg

Resultado

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Só entram no resultado os campos que você preencheu — deixar o nome do site em branco simplesmente omite og:site_name da saída.

Erros comuns a evitar

Não definir og:image de jeito nenhum — sem ela, a maioria das plataformas não mostra nenhuma imagem de pré-visualização ou pega uma imagem aleatória da página, o que geralmente parece quebrado ou pouco profissional.
Usar um caminho de imagem relativo como /images/capa.jpg em vez de uma URL completa como https://example.com/images/capa.jpg — rastreadores sociais geralmente não conseguem resolver caminhos relativos.
Proporção de imagem errada — uma imagem quadrada ou vertical fica cortada de forma estranha quando a plataforma força o formato paisagem de 1,91:1; sempre projete sua imagem de compartilhamento perto de 1200×630.
Títulos ou descrições que ficam cortados — mantenha og:title abaixo de ~60 caracteres e og:description abaixo de ~155–160 para que não sejam cortados com reticências na maioria das plataformas.
Esquecer de atualizar as pré-visualizações em cache — depois de mudar as tags og em uma página já publicada, a pré-visualização antiga pode continuar no cache do Facebook ou LinkedIn até você forçar manualmente um novo rastreamento com as ferramentas de depuração deles.

Onde cada tag é usada

og:title, og:description e og:image são as três tags que quase todas as plataformas leem para montar uma pré-visualização. og:url informa aos rastreadores o link canônico ao qual associar a pré-visualização, o que importa quando o mesmo conteúdo pode ser acessado por várias URLs. og:site_name mostra um pequeno rótulo (como o nome da publicação ou da marca) acima do título em algumas plataformas, como o Facebook.

og:type muda que tipo de objeto a página representa para rastreadores que suportam o modelo de objeto mais rico do Open Graph — por exemplo, article habilita og:article:published_time e og:article:author em plataformas que as leem, embora a maioria das pré-visualizações sociais ignore esses campos extras e use apenas o trio principal título/descrição/imagem.

twitter:card controla o layout especificamente no X: summary mostra uma pequena miniatura quadrada ao lado do texto, enquanto summary_large_image mostra uma imagem em largura total acima do texto — essa última é quase sempre a melhor escolha para conteúdo com uma imagem de capa relevante.

Perguntas frequentes

Que tamanho minha og:image deveria ter?

1200×630px é o tamanho recomendado — grande o suficiente para telas de alta densidade e próximo da proporção de aproximadamente 1,91:1 usada por Facebook, LinkedIn e X ao cortar a imagem. Mantenha o arquivo abaixo de 5–8MB, use JPG ou PNG, e garanta que a URL da imagem seja absoluta e completa, não um caminho relativo — a maioria dos rastreadores não resolve caminhos relativos corretamente.

Por que minha pré-visualização não aparece ao compartilhar o link?

As causas mais comuns são: og:image ausente, URL de imagem relativa em vez de absoluta, o rastreador bloqueado pelo robots.txt, ou a plataforma mostrando uma versão em cache de uma pré-visualização antiga. Facebook e LinkedIn fazem cache agressivo das pré-visualizações — use o Sharing Debugger do Facebook ou o Post Inspector do LinkedIn para forçar um novo rastreamento depois de atualizar suas tags.

Qual a diferença entre tags og: e twitter:?

As tags og: (og:title, og:description, og:image etc.) fazem parte do padrão Open Graph, lido por Facebook, LinkedIn, Slack, Discord, WhatsApp e a maioria das outras plataformas. As tags twitter: são o formato próprio do Twitter/X. Se twitter:title ou twitter:image estiverem ausentes, o X recorre automaticamente à tag og: equivalente — mas definir as duas explicitamente te dá mais controle, incluindo a opção de escolher summary_large_image para uma imagem de pré-visualização grande.

Qual og:type devo usar?

"website" é a opção padrão mais segura para a maioria das páginas, incluindo páginas iniciais e conteúdo geral. Use "article" para posts de blog e notícias (isso libera tags adicionais específicas de artigo, como a data de publicação), "product" para páginas de e-commerce e "profile" para páginas de perfil pessoal ou de usuário. O tipo afeta principalmente quais propriedades extras do Open Graph são válidas, não a aparência básica do cartão de pré-visualização.

Essa ferramenta armazena ou envia meus dados para algum lugar?

Não. Toda a geração acontece localmente no seu navegador, usando JavaScript puro. Nada do que você digita é transmitido, registrado ou armazenado — ao fechar a aba, tudo é apagado.