InícioFerramentasGerador de Open Graph
Gerador de Open Graph com prévia do link
Preencha título, descrição, URL e imagem — a ferramenta gera as meta tags Open Graph e Twitter Cards, mostra como o link vai aparecer num feed e numa conversa, e pega os erros comuns: og:image relativa, SVG, imagem minúscula, og:locale mal formatado.
—
Card grande num feed
Card compacto
Prévia numa conversa
As maquetes são aproximadas: cada rede social e cada app de mensagens (WhatsApp, Telegram, Slack) corta o texto e a imagem do seu jeito e guarda o card em cache depois que o link é compartilhado pela primeira vez.
Tags para o <head>
Tudo é calculado no seu navegador — nada do que você digita é enviado para lugar nenhum.
Como usar
- Preencha os camposEscreva título e descrição para quem rola um feed ou recebe o link no WhatsApp, não para o buscador: eles podem ser diferentes do title e da meta description da página.
- Verifique a imagemInforme a URL completa da og:image e clique em “Verificar imagem”, ou escolha um arquivo — a ferramenta mostra o tamanho e a proporção.
- Confira as préviasO card grande, o compacto e a prévia numa conversa mostram onde o texto é cortado e como a imagem é recortada.
- Copie as tagsCole o bloco no <head>. Se o link já foi compartilhado antes, atualize o cache no depurador da rede — senão ela continua mostrando o card antigo.
O que é Open Graph e quais tags são obrigatórias
Open Graph é um protocolo de marcação criado pelo Facebook: meta tags no <head> dizem aos serviços qual título, descrição e imagem mostrar quando alguém compartilha um link. Hoje quase tudo lê essas tags: redes sociais, WhatsApp e outros apps de mensagens, chats de equipe e buscadores.
A especificação do ogp.me lista quatro propriedades obrigatórias: og:title, og:type, og:image e og:url. Na prática também se usam og:description, og:site_name, og:locale e og:image:alt.
O X (Twitter) tem tags próprias, twitter:*, mas recorre ao Open Graph quando elas faltam. Basta definir twitter:card, o tipo de card, e opcionalmente twitter:site com a sua conta.
Tamanho da og:image: 1200 × 630 e proporção 1,91:1
Para um card grande, use uma imagem de 1200 × 630 px — a recomendação da Meta para compartilhamento de links e uma proporção (1,91:1) que a maioria dos serviços exibe sem cortar. As regras que a ferramenta verifica:
- URL completa.
og:imagedeve começar com https:// e o domínio — as redes não resolvem caminhos relativos como/og.png. - Formato bitmap. PNG, JPEG, WebP ou GIF. SVG não é aceito.
- Pelo menos 200 × 200 px, senão não há card grande; o X aceita imagens de até 4096 px de lado e menos de 5 MB.
- O card compacto (
summary) mostra a imagem quadrada — use uma imagem quadrada de pelo menos 144 × 144 px. - O importante no centro. Feeds e apps de mensagens cortam as bordas de formas diferentes; não encoste texto na borda.
Com og:image:width e og:image:height, o card aparece na hora, antes de a imagem ser baixada. A ferramenta adiciona essas tags quando o tamanho já foi verificado.
Erros comuns e o cache da prévia
- og:locale com hífen. O formato é idioma e território com sublinhado:
pt_BR,pt_PT. É diferente do hreflang, que usa hífen (pt-BR) — veja o gerador de hreflang. - Uma imagem para o site inteiro. Os cards de páginas diferentes ficam iguais. Crie uma imagem própria pelo menos para as páginas principais.
- Tags inseridas via JavaScript. A maioria dos robôs de redes sociais não executa scripts: as tags precisam estar no HTML que o servidor devolve.
- O card antigo depois de editar. As redes guardam a prévia em cache. Depois de mudar as tags, atualize os dados no depurador da rede ou acrescente um parâmetro de versão à URL da imagem (
og.png?v=2). O WhatsApp também guarda prévias por um tempo. - Imagem atrás de login ou bloqueada para robôs. Confira se o arquivo abre sem cookies e não está bloqueado no robots.txt — o testador de robots.txt ajuda nisso.
Fontes
- The Open Graph protocol — ogp.me.
- X Developer Platform. Cards markup reference; Summary Card with Large Image — developer.x.com.
- Meta for Developers. Sharing best practices for websites — developers.facebook.com.
Perguntas frequentes
Quais tags Open Graph são obrigatórias?
Pela especificação do ogp.me: og:title, og:type, og:image e og:url. Na prática também se adicionam og:description, og:site_name, og:locale e og:image:alt, além de twitter:card para o X.
Qual deve ser o tamanho da og:image?
1200 × 630 px, proporção 1,91:1. Com um lado menor que 200 px não há card grande. O card compacto summary pede uma imagem quadrada.
Preciso de tags separadas para o Twitter (X)?
Não. O X lê og:title, og:description e og:image quando twitter:title, twitter:description e twitter:image não existem. Basta adicionar twitter:card.
Por que a rede ainda mostra a imagem antiga?
As prévias ficam em cache. Depois de mudar as tags, atualize o card no depurador da rede ou mude a URL da imagem, por exemplo acrescentando ?v=2.
Posso usar SVG na og:image?
Não, SVG não é aceito. Use PNG, JPEG ou WebP.
Como formatar o og:locale?
Idioma e território com sublinhado: pt_BR para o Brasil, pt_PT para Portugal. A forma com hífen (pt-BR) é do hreflang e do atributo lang, não do Open Graph.
Meus dados são enviados para um servidor?
Não. As tags são geradas no seu navegador. A imagem de uma URL é carregada pelo seu navegador direto do seu site, e só quando você clica no botão; um arquivo escolhido fica no seu computador.
Mais em SEO
- Prévia do snippet
Como o título e a descrição vão aparecer no Google, e serão cortados?
- Analisador de legibilidade
Quão difícil é ler este texto e quais frases estão longas demais?
- Gerador e testador de robots.txt
Qual regra do robots.txt bloqueia ou libera esta URL para um robô?
- Gerador de hreflang
Quais tags hreflang ligam as versões de idioma de uma página?
- Gerador de UTM
Como criar links UTM padronizados para cada campanha e canal?
- Gerador de QR code com UTM
Qual estande, panfleto ou pôster trouxe visitantes — e como marcar um QR code para cada um?