Gerador de imagem OG
A imagem de um link compartilhado, no tamanho a que todos recortam.
PNG transparente de 512 × 512 px, criado no seu dispositivo.
Seus arquivos ficam no seu dispositivo
Esta ferramenta roda inteiramente no seu navegador. Nada é enviado, nada é armazenado, e você pode até desligar a internet antes de começar.
Exemplo
A imagem de prévia de uma receita de bolo de fubá, em 1200 × 630
Um blog de receitas fictício, Cozinha da Bia, quer que o link do bolo de fubá apareça bem quando for compartilhado. Título “Bolo de fubá cremoso da vó”, linha de baixo “Cozinha da Bia · Sobremesas”, cores Amanhecer, texto à esquerda, barrinha ligada e uma foto do bolo “Numa faixa lateral”.
- A foto ocupa uma faixa de 456 pixels à direita (38% da largura), recortada para preencher os 630 de altura.
- O título fica numa coluna de cerca de 610 pixels, com 84 de margem, no maior tamanho que caiba em até quatro linhas.
- A barrinha de 108 pixels fica acima do título; a linha de baixo sai menor, na cor de destaque.
| Tamanho | Pixels | Arquivo baixado |
|---|---|---|
| Prévia de link (imagem OG) | 1200 × 630 | og-1200x630.png |
| Thumbnail de vídeo | 1280 × 720 | youtube-1280x720.png |
| Post quadrado | 1080 × 1080 | square-1080x1080.png |
| Story | 1080 × 1920 | story-1080x1920.png |
| Panorâmico | 1600 × 900 | wide-1600x900.png |
Sai og-1200x630.png: fundo do laranja ao rosa, título branco à esquerda, barrinha e linha de baixo em amarelo-claro e o bolo à direita. Suba o arquivo no site e aponte a tag og:image para ele, com o endereço completo.
Como funciona
- Digite o título — o da página ou do post.
- Acrescente uma linha embaixo se ajudar: nome do site, data, seção.
- Escolha cores que combinem com o site e adicione um logotipo, se tiver.
- Baixe o PNG e aponte og:image para ele.
Perguntas frequentes
- Por que 1200 × 630?
- É a proporção (1,91:1) em que as grandes plataformas recortam prévias de link. Nesse tamanho nada é cortado no Facebook, X, LinkedIn ou Slack, e continua nítido em telas de alta resolução.
- Como uso no meu site?
- Suba o PNG e adicione <meta property="og:image" content="..."> com o endereço dele, mais <meta name="twitter:card" content="summary_large_image">. Use uma URL absoluta: as relativas são ignoradas.
- Meu título é longo. Vai caber?
- Vai: o texto diminui até quatro linhas. Ainda assim, curto é melhor — uma prévia é lida de relance.
- Que espaço sobra para o texto?
- Em 1200 × 630 a margem é de 84 pixels. Com uma foto “Numa faixa lateral”, ela ocupa os 456 pixels da direita e o texto fica numa coluna de cerca de 610 pixels; sem foto, de 1032. O título começa com letras de até 139 pixels de altura e diminui até caber em quatro linhas.
- Algo é enviado?
- Não. O card é desenhado na página e o PNG é gerado no navegador.