1. O Que E Open Graph
Open Graph (OG) e um protocolo criado pelo Facebook em 2010 que permite controlar como uma pagina web e exibida quando compartilhada em redes sociais. Por meio de meta tags no <head> do HTML, voce define titulo, descricao, URL e — mais importante — a imagem que aparece no preview do link.
Hoje o protocolo e adotado por praticamente todas as plataformas sociais: Facebook, Twitter/X, LinkedIn, WhatsApp, Telegram, Slack e outras. Sem uma imagem OG configurada, as redes sociais tentam extrair qualquer imagem da pagina — geralmente com resultados ruins que prejudicam o engajamento.
2. As Meta Tags Essenciais
Para que sua imagem OG funcione corretamente, voce precisa ao menos dessas tags:
- og:image — URL absoluta da imagem (obrigatoria)
- og:image:width e og:image:height — dimensoes em pixels (evitam layout shift no preview)
- og:title — titulo que aparece no card
- og:description — descricao exibida abaixo do titulo
- twitter:card — define o tipo de card do Twitter (use summary_large_image para imagem grande)
"Uma imagem OG bem configurada pode aumentar o CTR de links compartilhados em ate 3x em comparacao com links sem imagem."
3. Boas Praticas de Design
A imagem OG sera exibida em tamanhos reduzidos na maioria das plataformas, entao clareza e contraste sao fundamentais. Use fontes grandes (minimo 60px para titulo) e mantenha o contraste de cor entre texto e fundo acima de 4.5:1. Inclua sempre sua marca — logo ou nome — para reforcar o reconhecimento mesmo antes do clique. Evite colocar informacoes importantes perto das bordas, pois algumas plataformas recortam a imagem em formatos diferentes.
Hospede a imagem em uma URL publica e permanente, de preferencia com CDN para carregamento rapido. Invalide o cache nas redes sociais usando ferramentas como o Facebook Sharing Debugger e o Twitter Card Validator sempre que atualizar a imagem.
4. Como Usar Esta Ferramenta
Esta ferramenta cria imagens OG diretamente no seu navegador usando canvas HTML5 — nenhum arquivo e enviado a servidores. Escolha um preset de formato, configure o fundo (cor solida, gradiente ou imagem propria), adicione titulo, subtitulo e opcionalmente um logo ou emoji. O snippet de meta tags e gerado automaticamente com as dimensoes corretas, pronto para colar no seu HTML.
Apos baixar a imagem PNG, hospede-a em seu servidor ou CDN e substitua o placeholder https://seusite.com/imagens/og-image.png no snippet pela URL real. Teste o resultado nos debuggers oficiais de cada plataforma antes de publicar.