InícioFerramentasGerador de Open Graph
Gerador de Open Graph com pré-visualização da ligação
Preencha o título, a descrição, o URL e a imagem — a ferramenta gera as meta tags Open Graph e Twitter Cards, mostra como a ligação vai aparecer num feed e numa conversa, e deteta os erros comuns: og:image relativa, SVG, imagem minúscula, og:locale mal formatado.
—
Cartão grande num feed
Cartão compacto
Pré-visualização numa conversa
As maquetas são aproximadas: cada rede social e cada aplicação de mensagens (WhatsApp, Messenger, Slack) corta o texto e a imagem à sua maneira e guarda o cartão em cache depois de a ligação ser partilhada pela primeira vez.
Tags para o <head>
Tudo é calculado no seu navegador — nada do que introduz é enviado para lado nenhum.
Como utilizar
- Preencha os camposEscreva o título e a descrição para quem percorre um feed, não para o motor de pesquisa: podem ser diferentes do title e da meta description da página.
- Verifique a imagemIntroduza o URL completo da og:image e clique em «Verificar imagem», ou escolha um ficheiro — a ferramenta mostra o tamanho e a proporção.
- Veja as pré-visualizaçõesO cartão grande, o compacto e a pré-visualização numa conversa mostram onde o texto é cortado e como a imagem é recortada.
- Copie as tagsCole o bloco no <head>. Se a ligação já foi partilhada, atualize a cache no depurador da rede — caso contrário, continuará a mostrar o cartão antigo.
O que é o Open Graph e que tags são obrigatórias
O Open Graph é um protocolo de marcação criado pelo Facebook: as meta tags no <head> indicam aos serviços que título, descrição e imagem mostrar quando alguém partilha uma ligação. Hoje quase tudo as lê: redes sociais, aplicações de mensagens, chats de equipa e motores de pesquisa.
A especificação do ogp.me enumera quatro propriedades obrigatórias: og:title, og:type, og:image e og:url. Na prática acrescentam-se 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 estas faltam. Basta definir twitter:card, o tipo de cartão, e opcionalmente twitter:site com a sua conta.
Tamanho da og:image: 1200 × 630 e proporção 1,91:1
Para um cartão grande, use uma imagem de 1200 × 630 px — a recomendação da Meta para partilha de ligações e uma proporção (1,91:1) que a maioria dos serviços apresenta sem cortar. As regras que a ferramenta verifica:
- URL completo.
og:imagetem de começar por https:// e o domínio — as redes não resolvem caminhos relativos como/og.png. - Formato de mapa de bits. PNG, JPEG, WebP ou GIF. SVG não é aceite.
- Pelo menos 200 × 200 px, senão não há cartão grande; o X aceita imagens até 4096 px de lado e com menos de 5 MB.
- O cartão compacto (
summary) mostra a imagem quadrada — use uma imagem quadrada com pelo menos 144 × 144 px. - O importante ao centro. Feeds e aplicações de mensagens cortam as margens de formas diferentes; não encoste texto à margem.
Com og:image:width e og:image:height, o cartão aparece de imediato, antes de a imagem ser descarregada. A ferramenta acrescenta-as quando o tamanho já foi verificado.
Erros comuns e a cache da pré-visualização
- og:locale com hífen. O formato é língua e território com sublinhado:
pt_PT,pt_BR. É diferente do hreflang, que usa hífen (pt-PT) — veja o gerador de hreflang. - Uma imagem para o site inteiro. Os cartões de páginas diferentes ficam indistinguíveis. Crie uma imagem própria pelo menos para as páginas principais.
- Tags inseridas com JavaScript. A maioria dos robôs das redes sociais não executa scripts: as tags têm de estar no HTML devolvido pelo servidor.
- O cartão antigo depois de editar. As redes guardam a pré-visualização em cache. Depois de alterar as tags, atualize os dados no depurador da rede ou acrescente um parâmetro de versão ao URL da imagem (
og.png?v=2). - Imagem atrás de um login ou bloqueada para robôs. Confirme que o ficheiro abre sem cookies e não está bloqueado no robots.txt — o testador de robots.txt ajuda a verificar.
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
Que tags Open Graph são obrigatórias?
Segundo a especificação do ogp.me: og:title, og:type, og:image e og:url. Na prática também se acrescentam og:description, og:site_name, og:locale e og:image:alt, além de twitter:card para o X.
Que tamanho deve ter a og:image?
1200 × 630 px, proporção 1,91:1. Com um lado inferior a 200 px não há cartão grande. O cartão compacto summary pede uma imagem quadrada.
Preciso de tags próprias para o Twitter (X)?
Não. O X lê og:title, og:description e og:image quando faltam twitter:title, twitter:description e twitter:image. Basta acrescentar twitter:card.
Porque é que a rede continua a mostrar a imagem antiga?
As pré-visualizações ficam em cache. Depois de alterar as tags, atualize o cartão no depurador da rede ou mude o URL da imagem, por exemplo acrescentando ?v=2.
Posso usar SVG na og:image?
Não, SVG não é aceite. Use PNG, JPEG ou WebP.
Como se formata o og:locale?
Língua e território com sublinhado: pt_PT para Portugal, pt_BR para o Brasil. A forma com hífen (pt-PT) é a do hreflang e do atributo lang, não a do Open Graph.
Os meus dados são enviados para um servidor?
Não. As tags são geradas no seu navegador. A imagem de um URL é carregada pelo seu navegador diretamente do seu site, e só quando clica no botão; um ficheiro escolhido fica no seu computador.
Mais em SEO
- Pré-visualização do snippet
Como vão aparecer o título e a descrição no Google, e serão cortados?
- Analisador de legibilidade
Quão difícil é ler este texto e que frases são demasiado longas?
- Gerador e testador de robots.txt
Que regra do robots.txt bloqueia ou permite este URL para um robô?
- Gerador de hreflang
Que tags hreflang ligam as versões de idioma de uma página?
- Gerador de UTM
Como criar links UTM coerentes para cada campanha e canal?
- Gerador de código QR com UTM
Que stand, folheto ou cartaz trouxe visitantes — e como marcar um código QR para cada um?