Visualizador de Open Graph

Visualize como sua página ficará quando compartilhada no Facebook, Twitter/X, LinkedIn e Slack. Gere meta tags Open Graph e Twitter Card a partir de um formulário.

39/70
119/160

Use an absolute URL. Ideal: 1200×630px JPG/PNG under 1MB.

Facebook

example.com

My Awesome Blog Post — A Complete Guide

Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike.

Generated Meta Tags

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/my-post" />
<meta property="og:title" content="My Awesome Blog Post — A Complete Guide" />
<meta property="og:description" content="Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike." />
<meta property="og:site_name" content="My Website" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Blog Post — A Complete Guide" />
<meta name="twitter:description" content="Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike." />

OG Tag Checklist

✓og:title set (50–70 chars)
✓og:description set (120–160 chars)
○Missing or not absolute
✓og:url is absolute HTTPS URL
✓og:site_name set
✓og:type selected

Como Usar Visualizador de Open Graph

  1. 1Digite o título, descrição, URL e URL da imagem da sua página.
  2. 2Visualize como o link aparecerá no Facebook, Twitter/X, LinkedIn e Slack.
  3. 3Copie os meta tags gerados para sua <head> HTML.
ZenovayAnalytics

Saiba o que seus visitantes realmente fazem.

  • Acompanhamento de visitantes em tempo real
  • Privacidade em primeiro lugar, modo sem cookies disponível
  • Configurado em dois minutos
Conheça o Zenovay

Perguntas Frequentes

O que são tags Open Graph?▾
As tags Open Graph (OG) são meta tags HTML que controlam como as URLs aparecem quando compartilhadas em plataformas de mídia social como Facebook, LinkedIn, Twitter/X, Slack e Discord. Desenvolvido pelo Facebook em 2010, o protocolo OG é agora o padrão para pré-visualizações de links em toda a web. Tags principais: og:title (título), og:description (descrição), og:image (imagem de pré-visualização), og:url (URL canônica).
Qual é a diferença entre Open Graph e Twitter Cards?▾
Open Graph é o padrão geral usado pelo Facebook, LinkedIn, Slack, Discord e pela maioria das plataformas. Twitter Cards são meta tags específicas do Twitter/X (twitter:card, twitter:title, twitter:description, twitter:image). A maioria das implementações precisa de ambos. Boa notícia: se as tags específicas do Twitter estiverem ausentes, o Twitter usará as tags og:* como fallback.
Qual é o tamanho de imagem ideal para Open Graph?▾
Tamanho OG recomendado: 1200×630px (proporção 1,91:1). Mínimo: 600×315px. Tamanho máximo do arquivo: abaixo de 8 MB (limite do Facebook), idealmente abaixo de 1 MB para carregamento rápido. O LinkedIn prefere 1200×627px. Twitter/X summary_large_image: 1200×675px (proporção 16:9). Sempre use URLs absolutas (https://) para og:image.
Como valido minhas tags Open Graph?▾
Ferramentas de teste: Facebook Sharing Debugger (developers.facebook.com/tools/debug) — cole sua URL, varre e mostra a pré-visualização + erros. LinkedIn Post Inspector (linkedin.com/post-inspector) — mesmo para LinkedIn. Twitter Card Validator (cards-dev.twitter.com/validator) — para Twitter cards. Observação: o Facebook armazena em cache agressivamente — use 'Scrape Again' para forçar uma atualização.
O que é og:type e quando devo usar valores diferentes?▾
og:type informa às plataformas que tipo de conteúdo é a página. Valores mais comuns: website (padrão — página inicial ou páginas gerais). article (posts de blog, artigos de notícias — habilita article:published_time, article:author). product (itens de e-commerce). video.movie / video.episode (conteúdo de vídeo). O tipo padrão é website se não especificado.