Gerador de Meta Tags OG Online
Gere tags Open Graph e Twitter Card. Veja o preview de como seu link vai aparecer nas redes sociais.
<!-- Open Graph --> <meta property="og:title" content="My Website — Main Title"> <meta property="og:description" content="My website description for social media."> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com"> <meta property="og:image" content="https://example.com/og-image.jpg"> <meta property="og:site_name" content="My Site"> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="My Website — Main Title"> <meta name="twitter:description" content="My website description for social media."> <meta name="twitter:image" content="https://example.com/og-image.jpg">
Por que usar
Controle como seu site aparece ao ser compartilhado nas redes sociais
Preview real
Veja exatamente como seu link vai aparecer antes de publicar.
Todas as plataformas
Facebook, LinkedIn, Twitter, WhatsApp e Telegram em uma única etapa.
Código pronto para copiar
Tags HTML geradas corretamente. Cole no seu head e pronto.
Sem cadastro
Gere e teste suas meta tags sem criar nenhuma conta.
Como funciona
Três passos, sem complicação
Insira os dados da sua página
Preencha o título, a descrição, a URL e a imagem da sua página. São os detalhes que os usuários verão quando seu link for compartilhado.
Escolha as redes sociais
Selecione se você precisa de Open Graph (Facebook, LinkedIn, WhatsApp), Twitter Card ou ambos. Personalize os campos específicos de cada plataforma.
Copie o código HTML
Copie as meta tags geradas e cole dentro do head do seu HTML. Verifique com o Facebook Debugger ou o Twitter Card Validator.
Perguntas frequentes
Ficou com dúvidas?
O Open Graph Protocol é um protocolo web criado pelo Facebook (apresentado na F8 em 2010) que permite que qualquer página web se torne um objeto rico no grafo social. Ao incluir tags meta og: no head do seu HTML, você controla exatamente qual título, descrição e imagem aparecem quando alguém compartilha seu link no Facebook, LinkedIn, WhatsApp, Telegram e na maioria das plataformas sociais. Sem essas tags, as plataformas tentam adivinhar o conteúdo com resultados imprevisíveis.
As quatro propriedades básicas obrigatórias são: og:title (título do objeto), og:type (tipo do objeto: website, article, product...), og:image (URL da imagem de preview) e og:url (URL canônica da página). Propriedades opcionais importantes: og:description, og:site_name, og:locale (por exemplo, pt_BR), og:image:width e og:image:height (para evitar refluxos durante o carregamento). Para artigos, og:type=article habilita propriedades adicionais: article:author, article:published_time e article:section.
O Facebook tem o Sharing Debugger (developers.facebook.com/tools/debug) que mostra exatamente como sua URL aparecerá quando compartilhada e permite forçar uma atualização de cache. O Twitter tem o Card Validator (cards-dev.twitter.com/validator). O LinkedIn tem o Post Inspector (linkedin.com/post-inspector). Para desenvolvimento local, ferramentas como ngrok ou localtunnel expõem seu localhost para que depuradores externos possam acessá-lo. Lembre-se que as plataformas armazenam metadados em cache: se você alterar as tags, use as ferramentas de depuração para invalidar o cache.
As dimensões recomendadas pelo Facebook e pela maioria das plataformas são 1200x630 pixels (proporção 1,91:1). Essa resolução é suficiente para telas Retina e se adapta bem a todos os tamanhos de preview. O tamanho mínimo aceito é 200x200 px. O Facebook rejeita imagens menores que 200x200 ou maiores que 8 MB. O Twitter exige no mínimo 300x157 px para summary_large_image e no máximo 4096x4096 px com limite de 5 MB. Para o WhatsApp, a imagem deve ser quadrada (1:1) para previews em chats de grupo.
Open Graph (og:) é um protocolo aberto adotado pela maioria das plataformas sociais. Twitter Cards (twitter:) são específicas do Twitter e oferecem tipos adicionais: summary, summary_large_image, app e player. Se você definir tags og:, o Twitter as usa como fallback quando as tags twitter: estiverem ausentes. A recomendação é definir ambos os conjuntos para máxima compatibilidade. Os campos-chave do Twitter Card são twitter:card (tipo de card), twitter:site (conta do Twitter do site), twitter:creator (conta do autor) e twitter:image (pode ser diferente de og:image para otimizar as dimensões).
Open Graph Protocol: história, Schema.org e rastreadores de redes sociais
O Open Graph Protocol foi introduzido pelo Facebook na conferência F8 em 21 de abril de 2010. O objetivo era transformar qualquer página web em um objeto de primeira classe no grafo social do Facebook, de forma análoga a como as páginas de artistas, filmes e locais já tinham estrutura de dados rica. O protocolo foi inspirado no RDFa (Resource Description Framework in Attributes), uma extensão HTML para dados estruturados, mas simplificado para adoção em massa. O nome e o domínio ogp.me foram registrados no mesmo dia. Desde seu lançamento, o Open Graph foi adotado pelo LinkedIn (2011), pelo Twitter como fallback (2012), pelo WhatsApp (2013) e por praticamente todas as plataformas sociais e de mensagens relevantes.
A relação entre Open Graph e Schema.org é complementar, mas às vezes confusa. O Schema.org (lançado em 2011 pelo Google, Bing e Yahoo) define um vocabulário de dados estruturados para mecanismos de busca, implementado via JSON-LD (recomendado), Microdata ou RDFa. O Open Graph é otimizado para previews de links em redes sociais. Uma página deve ter ambos: Schema.org para SEO e Featured Snippets, e Open Graph para compartilhamento social. O Google usa og:title e og:description como sinais secundários de indexação, mas o Schema.org em JSON-LD tem mais peso. Os rastreadores sociais (facebookexternalhit, Twitterbot, LinkedInBot) leem apenas as tags og:, não o JSON-LD.
Os rastreadores de redes sociais têm características técnicas importantes para desenvolvedores. O user-agent facebookexternalhit/1.1 indica que o Facebook está processando a URL para gerar um preview. Esses rastreadores NÃO executam JavaScript: processam apenas o HTML estático do servidor. Isso significa que aplicações React, Vue ou Angular com Client-Side Rendering (CSR) sem SSR ou SSG não terão metadados OG corretos, pois as meta tags são geradas dinamicamente no cliente. A solução é usar Server-Side Rendering (Next.js, Nuxt), Static Site Generation ou um serviço de pré-renderização (Prerender.io, rendertron) que sirva HTML pré-renderizado aos bots de redes sociais.