Como usar: Gerador de imagens OG
- Escolha um modelo — Gradiente, Dividido, Minimalista, Destaque ou Cartão. Cada um vem com um conjunto de cores combinadas que você pode alterar.
- Digite o título e o subtítulo. O tamanho da fonte do título diminui automaticamente e se ajusta para que sempre caiba na tela.
- Adicione o nome da sua marca, um emoji, um logotipo ou uma foto de fundo (com o nível de escurecimento ajustável para que o texto fique legível).
- Baixe o arquivo PNG (ou um JPEG menor, no caso de fotos) e faça o upload para o seu site.
- Digite os URLs da página e da imagem e copie as metatags og: e twitter: geradas para a sua página
<head>.
O que é uma imagem OG?
Uma imagem OG (Open Graph) é a foto que aparece quando um link é compartilhado no Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage e muitos outros apps. Ela é definida com a og:image meta tag do protocolo Open Graph, criado originalmente pelo Facebook e hoje lido por quase todas as plataformas que exibem visualizações de links. O X, além disso, lê twitter:card — configurada para summary_large_image ela exibe a imagem em largura total. Uma pré-visualização clara e com a identidade da marca faz com que um link compartilhado se destaque em um feed cheio e mostra às pessoas o que elas vão encontrar antes mesmo de clicarem.
O tamanho certo: 1200 × 630
1200 × 630 pixels (uma proporção de 1,91:1) é o tamanho recomendado pelo Facebook e fica nítido em todas as plataformas. O cartão de resumo grande do X usa uma proporção de 2:1, então alguns pixels na parte de cima e de baixo podem ser cortados — esse gerador mantém o texto bem dentro de uma margem segura. Mantenha o arquivo com menos de 5 MB (limite do X; o Facebook permite 8 MB); um PNG gerado por essa ferramenta costuma ter algumas centenas de KB, e o JPEG é menor para fundos com fotos.
Meta tags que você precisa
<meta property="og:title" content="How to Compress Images">
<meta property="og:description" content="A practical guide…">
<meta property="og:image" content="https://example.com/og/compress.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">O og:image URL precisa ser absoluta (incluindo https://) e acessível ao público — não atrás de um login, bloqueada pelo robots.txt ou servida a partir do localhost. Declarar largura e altura permite que o Facebook exiba a pré-visualização logo no primeiro compartilhamento, em vez de esperar que a imagem seja carregada. Crie o resto das suas tags head com o Meta Tag Generator e verifique o resultado ao vivo com o Open Graph Checker.
Dicas de design para visualizações de links
- Texto curto e em fonte grande. As visualizações costumam aparecer com cerca de 500 px de largura ou menos nos celulares. Tente usar um título de 4 a 10 palavras; o ajuste automático te avisa quando precisar cortar o texto.
- Não repita a barra de URL. As plataformas já mostram seu domínio e o título da página embaixo da imagem, então usa a imagem pra chamar a atenção, não o título completo mais a descrição.
- Alto contraste. Usa o controle deslizante de escurecimento nas fotos para que o texto branco continue legível e testa tanto com temas claros quanto escuros do aplicativo.
- Uma imagem por página. Imagens OG exclusivas para páginas importantes — posts de blog, páginas de produtos, documentos — chamam visivelmente mais atenção do que um único logotipo usado em todo o site.
- Atualizando o cache. As plataformas armazenam as visualizações em cache. Depois de trocar uma imagem, refaça a captura da URL no Sharing Debugger do Facebook ou no Post Inspector do LinkedIn, ou dê um novo nome ao arquivo.
No Webflow, define a imagem por página em Configurações da página → Configurações do Open Graph, ou vincula-a a um campo de imagem para páginas de coleção do CMS.
Também pesquisado como: imagem og, imagem do open graph, imagem para compartilhar nas redes sociais, imagem do twitter card, imagem de pré-visualização do link, 1200x630, visualização nas redes sociais, og:image.
Ferramentas que combinam com: Gerador de imagens OG
- Code to Image — Paste a snippet and get a polished code screenshot in seconds: syntax highlighting for JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go and PHP, a choice of themes, a window frame with a file name, a gradient or transparent background, padding and line numbers.
- SERP Preview — Write a title tag and meta description and see exactly where Google is likely to cut them off — measured in pixels, not just characters, on desktop and mobile.
- Redimensionador de imagens — Redimensione uma foto para dimensões exatas em pixels ou uma porcentagem, recorte-a para se ajustar ao tamanho de uma rede social ou encaixe-a dentro de uma moldura com uma cor de fundo — tudo isso diretamente no seu navegador.
- Compressor de imagens — Reduz o tamanho das fotos e dos gráficos em 50–90% sem perda visível de qualidade.
Perguntas frequentes
Qual deve ser o tamanho de uma imagem do Open Graph?
Devo usar PNG ou JPEG para minha imagem OG?
Por que o Facebook ou o LinkedIn ainda mostram minha foto antiga?
Preciso usar tags separadas no Twitter (X)?
twitter:card ser configurado para summary_large_image para mostrar a imagem grande. O trecho inclui as duas opções, só por precaução.