Qual é o tamanho da imagem gerada?

Sempre 1200x630 pixels, a proporção padrão do Open Graph e do Twitter summary-large-image (cerca de 1,91:1). Esse tamanho é exibido com nitidez nas pré-visualizações de links do Facebook, X/Twitter, LinkedIn, Slack e Discord.

Como adiciono meu próprio logo?

Cole uma URL direta de uma imagem de logo no campo URL do logo. A imagem é obtida dessa URL e desenhada acima do texto em uma altura fixa, preservando sua proporção. A fonte deve permitir o uso entre origens (CORS) ou o navegador bloqueará seu desenho no canvas.

Posso controlar as cores e o layout?

Sim. Em Configurações você pode alternar entre um fundo sólido e um gradiente diagonal de duas cores, definir a(s) cor(es) de fundo e a cor do texto e escolher alinhamento à esquerda ou centralizado. O título e o subtítulo quebram automaticamente e o texto longo é truncado com reticências.

Meu texto ou imagem é enviado para algum lugar?

Não. O cartão é desenhado inteiramente em um canvas HTML no seu navegador e exportado para PNG localmente. Seu título, subtítulo e cores nunca são enviados a um servidor. Apenas uma URL de logo que você fornece é buscada, e essa solicitação vai direto do seu navegador para o host que você escolheu.

Gerador de imagens OG

Digite um título e subtítulo, escolha um fundo sólido ou em gradiente e uma URL de logo opcional, visualize ao vivo o cartão social de 1200x630 e baixe-o como PNG.

Carregando ferramenta…

Gerador de imagens OG — Crie a imagem Open Graph de 1200x630 que aparece quando sua página é compartilhada no Facebook, X/Twitter, LinkedIn ou Slack. Digite um título e subtítulo, escolha um fundo sólido ou um gradiente de duas cores, defina a cor e o alinhamento do texto e, se quiser, indique a URL de um logo. A pré-visualização é redesenhada enquanto você digita e você pode baixar o cartão pronto como PNG. A imagem é desenhada inteiramente em um canvas no seu navegador, então seu texto e suas cores nunca saem do seu dispositivo.

O que é Gerador de imagens OG?

O Gerador de Imagens OG é uma ferramenta gratuita no navegador para criar cartões de compartilhamento social (imagens Open Graph / Twitter Card) no tamanho padrão de 1200x630 pixels. Profissionais de marketing, blogueiros, desenvolvedores indie e qualquer pessoa que lance uma landing page o usam para fazer uma miniatura de pré-visualização limpa sem abrir um app de design. Você digita o título e um subtítulo opcional, escolhe uma cor sólida ou um gradiente diagonal, define a cor do texto e o alinhamento à esquerda ou centralizado, e cola uma URL de logo se quiser uma marca no canto. O canvas é redesenhado ao vivo para ajustar o texto e as cores e, em seguida, você exporta um PNG pronto para referenciar na sua meta tag og:image.

Como usar Gerador de imagens OG

Digite seu título no campo Título; ele é desenhado grande e em negrito e quebra em até três linhas.
Adicione um subtítulo opcional abaixo do título, ou deixe-o vazio para mostrar apenas o título.
Abra Configurações para escolher um fundo sólido ou em gradiente, definir as cores de fundo e de texto e escolher alinhamento à esquerda ou centralizado.
Opcionalmente, cole a URL de uma imagem de logo (uma imagem com CORS habilitado) para colocar um logo acima do texto.
Observe a pré-visualização de 1200x630 atualizar ao vivo, clique nela para ampliar e depois baixe o cartão como PNG.

Exemplos

Cartão de compartilhamento de post de blog

Digite o título do artigo como título e o autor ou o nome do site como subtítulo, escolha um gradiente que combine com sua marca e baixe um PNG de 1200x630 para usar como og:image do post.

Banner de lançamento de produto

Use uma cor de marca sólida, alinhamento centralizado, seu slogan como título e uma URL de logo no canto para produzir um cartão de lançamento consistente em todos os canais sociais.

Perguntas frequentes

Qual é o tamanho da imagem gerada?: Sempre 1200x630 pixels, a proporção padrão do Open Graph e do Twitter summary-large-image (cerca de 1,91:1). Esse tamanho é exibido com nitidez nas pré-visualizações de links do Facebook, X/Twitter, LinkedIn, Slack e Discord.
Como adiciono meu próprio logo?: Cole uma URL direta de uma imagem de logo no campo URL do logo. A imagem é obtida dessa URL e desenhada acima do texto em uma altura fixa, preservando sua proporção. A fonte deve permitir o uso entre origens (CORS) ou o navegador bloqueará seu desenho no canvas.
Posso controlar as cores e o layout?: Sim. Em Configurações você pode alternar entre um fundo sólido e um gradiente diagonal de duas cores, definir a(s) cor(es) de fundo e a cor do texto e escolher alinhamento à esquerda ou centralizado. O título e o subtítulo quebram automaticamente e o texto longo é truncado com reticências.
Meu texto ou imagem é enviado para algum lugar?: Não. O cartão é desenhado inteiramente em um canvas HTML no seu navegador e exportado para PNG localmente. Seu título, subtítulo e cores nunca são enviados a um servidor. Apenas uma URL de logo que você fornece é buscada, e essa solicitação vai direto do seu navegador para o host que você escolheu.

Ferramentas relacionadas

Código em imagem

Transforme um trecho de código em uma imagem com realce de sintaxe no seu navegador, com mais de 20 linguagens, temas e fundos personalizados, números de linha e exportação em PNG ou SVG.

Verificador de contraste de cor

Verifique o contraste WCAG 2.1 e a pontuação APCA Lc entre uma cor de texto e de fundo, veja os selos AA, AAA e 3:1 e aplique a cor aprovada mais próxima.

Misturador de cores

Misture duas cores HEX na proporção que escolher, no espaço RGB ou Lab, e obtenha a cor intermediária como amostra e valor HEX copiável.

Gerador de tons de cor

Transforme uma cor HEX base em uma escala OKLCH, HSL ou RGB com passos ajustáveis, dicas de contraste WCAG por passo e exportação para CSS, Tailwind e JSON.