Gerador de imagem OGP | Crie imagens para redes sociais no navegador

O que este gerador de imagens OGP pode fazer

Crie imagens para compartilhamento em 1200 × 630, post do X, 16:9, quadrado ou tamanho personalizado. Adicione título, apoio, rótulo, marca, logotipo, cor, gradiente ou imagem de fundo sem enviar os arquivos.

Passos para criar uma imagem OGP

1. Escolha um tamanho de imagem adequado ao usoPara imagens de compartilhamento de artigos web, escolha primeiro 1200×630. Use os predefinidos para posts dedicados ou materiais quadrados.
2. Digite o título que será transmitido pela imagemNão use o título do artigo inteiro; organize-o em um tamanho que faça sentido mesmo em visualização reduzida.
3. Definir fundo e textoEscolha uma paleta de cores ou imagem de fundo e verifique o contraste entre o título e o fundo na pré-visualização.
4. Verificar a área segura e a visualização reduzidaMantenha o título, logotipo e rostos de pessoas dentro da área segura para que informações importantes permaneçam mesmo se as bordas forem cortadas.
5. Escolher formato de salvamentoEscolha PNG para texto e formas, JPEG para fotos quando precisar reduzir o tamanho, e WebP se o ambiente suportar.
6. Defina a URL pública nas meta tagsInsira a URL absoluta após enviar a imagem para o site e configure a tag criada no head.

Tamanho recomendado e uso da imagem OGP

As especificações, molduras e métodos de corte das redes sociais podem mudar. Mesmo a mesma imagem pode aparecer diferente no feed, perfil, mensagens e resultados de busca. Não coloque texto ou logotipos importantes nas bordas e verifique o compartilhamento real após a publicação.

Diretrizes práticas para títulos legíveis

Mantenha a mensagem principal curta e confira a prévia em tamanho reduzido. A ferramenta ajusta o texto por grafema e evita pontuação comum em posições ruins de quebra.

Marcas, URLs e sequências longas sem espaços ainda podem ultrapassar a área. Encurte o texto ou reduza a fonte máxima se houver aviso.

Corte da imagem de fundo e posição do foco

A imagem de fundo é exibida preenchendo toda a área de saída, então partes com proporção diferente da original são cortadas. Use “posição do foco horizontal” e “posição do foco vertical” para mover a área de corte com base no que deseja manter, como rosto, produto ou edifício. Layouts divididos à esquerda/direita colocam a foto à direita e reservam área para o título à esquerda.

Ao sobrepor texto branco sobre uma foto, aumente a “opacidade do véu escuro”. O véu cobre a imagem inteira com preto em uma proporção, preservando a impressão da foto enquanto torna o texto legível. Também exibimos o contraste mínimo medido em vários pontos dos pixels já desenhados na área do texto, mas não julgue apenas pelos números; observe visualmente o fundo atrás do texto.

Como usar a área de segurança de corte

A área segura é uma referência para o caso de as bordas da imagem serem cortadas pela rede social ou tema. Ativar a verificação exibe uma moldura dentro da pré-visualização. Essa moldura não é desenhada na imagem salva. Coloque elementos como título, data e logotipo, cuja ausência mudaria o significado, dentro da moldura.

Mesmo dentro da área segura, não há garantia de exibição completa em todos os serviços. Alguns usam miniaturas redondas, cartões verticais ou cortes centrais próprios. Se for usar a mesma imagem em vários meios para anúncios ou avisos importantes, é mais seguro criar individualmente com as dimensões de cada meio.

Contraste entre cor do texto e cor de fundo

O contraste é calculado após desenhar cor sólida, gradiente, decoração e foto de fundo no Canvas, amostrando vários pontos na área do título e exibindo a proporção mínima em relação à cor do texto. Para texto de tamanho normal, 4,5:1 ou mais é um parâmetro; para texto grande em negrito, 3:1 ou mais. Como o brilho de uma foto varia por região, verifique tanto os números quanto a pré-visualização.

Se o contraste for insuficiente, altere o texto para branco ou cor escura, escureça o fundo, aumente o véu ou coloque uma área de cor sólida atrás do texto. Apenas adicionar sombra ou contorno forte ao texto pode fazer o contorno desaparecer em exibições pequenas. Priorize a legibilidade pela diferença de cor e área.

Como escolher entre PNG, JPEG e WebP

JPEG não tem fundo transparente, então esta ferramenta salva com um fundo branco. Após salvar, abra o arquivo e verifique se há texto cortado, imagem borrada, cor e tamanho. Mesmo em alta qualidade, se a imagem de fundo original for pequena, a ampliação pode deixá-la granulada.

Atenção ao definir as meta tags OGP

Para og:image, defina a URL absoluta de uma imagem publicada que possa ser obtida pelo navegador do visitante. Nomes de arquivo no PC ou URLs visíveis apenas no painel administrativo não funcionam. Defina as dimensões reais da imagem em og:image:width e og:image:height, e em og:image:alt descreva brevemente o que a imagem mostra, não apenas repita mecanicamente o texto dentro dela.

Esta ferramenta cria tags para og:type, og:title, og:description, og:url, og:image, dimensões da imagem, descrição alternativa e cartão X no formato summary_large_image. Se o CMS ou plugin de SEO já emite as mesmas tags, não duplique; registre a imagem e o texto na tela de configuração dele. Após a publicação, verifique a aplicação no HTML da página e nos recursos de verificação de cartão de cada serviço.

Processamento sem envio de imagens, logotipos ou dados inseridos

O carregamento da imagem de fundo e do logotipo, a renderização no canvas, a medição de texto, a quebra automática de linha, o corte e a conversão para PNG, JPEG e WebP são feitos no navegador. As imagens selecionadas, título, URL e meta tags não são enviados aos servidores do WiseChecker, APIs externas ou geradores de imagem por IA.

Recarregar a página apaga o conteúdo inserido, as imagens carregadas e os resultados. Imagens internas confidenciais podem ser processadas sem envio para fora do dispositivo, mas verifique você mesmo o local de salvamento, o compartilhamento e as configurações de sincronização em nuvem. Além disso, imagens de fundo, logotipos e fontes têm condições de uso de direitos autorais e marcas.

Perguntas frequentes sobre criação de imagens OGP

Ferramentas gratuitas relacionadas