Gerador de Imagens OG — Criador de Imagens para Partilha Social

Uma imagem Open Graph é a imagem que aparece quando um link é colado num chat, tweet ou canal do Slack — e todas as plataformas que a renderizam esperam uma tela de aproximadamente 1200×630 pixels, o tamanho para o qual os cards og:image do Facebook e summary_large_image do Twitter foram concebidos. Se errar no tamanho, a imagem aparece cortada, desfocada ou espremida; se errar na disposição, o título fica ilegível, reduzido a uma faixa contra uma foto carregada. Esta ferramenta compõe a imagem na resolução real de destino usando a API Canvas 2D, por isso o que vê na pré-visualização é exatamente a grelha de pixéis que será guardada no PNG.

Escolha um fundo — uma cor sólida, um gradiente linear de duas cores que você mesmo define ou uma foto carregada que é cortada para preencher o quadro completo de 1200×630, tal como faria um background-size: cover em CSS, em vez de ser esticada fora de proporção. Escreva um título e um subtítulo opcional: ambos são medidos carácter a carácter com base nas métricas de fonte do canvas, para que um título demasiado longo para caber numa linha seja dividido numa segunda ou terceira linha num ponto de quebra real de palavra, em vez de transbordar ou ser truncado de forma invisível. Escolha alinhamento centralizado ou à esquerda, selecione uma cor de texto que se destaque sobre o fundo e adicione um logotipo opcional num canto, com tamanho fixo e legível.

Por baixo do canvas, quatro pequenos cards simulam aproximadamente o aspeto que a imagem final terá quando uma plataforma real a envolver na sua própria estrutura visual: o card do Twitter/X mostra apenas o domínio e um título a negrito por baixo da imagem, sem linha de descrição; o Facebook acrescenta uma faixa de domínio em maiúsculas acima de um bloco de título e descrição; o LinkedIn coloca o domínio abaixo do título, sem qualquer descrição; e o embed do Discord mostra o domínio, título e descrição acima da imagem, no seu próprio tema escuro. Estas são aproximações visuais para efeitos de planeamento — claramente identificadas como ilustrativas, com uma linha de domínio que você mesmo introduz — e não uma captura em tempo real das plataformas, pois o que realmente gera o card ao vivo é a partilha do link e a leitura, pelo crawler de cada plataforma, das meta tags og:image e og:title reais da sua página.

Tudo é renderizado localmente num elemento canvas HTML no seu navegador: o título, subtítulo, fundo e logotipo carregados nunca saem do seu dispositivo, e o ficheiro exportado é um PNG limpo, gerado por canvas.toBlob(), contendo apenas o que compôs — sem bordas de mockups, barras de navegador falsas ou logotipos de plataformas incorporados na imagem baixada. Se depois precisar de redimensionar ou converter o PNG exportado, as ferramentas de redimensionamento e conversão de imagens deste site continuam exatamente onde esta termina.