OG Image Generator — Criador de imagens para compartilhamento social

Uma imagem Open Graph é a imagem que aparece quando um link é colado em um bate-papo, um tweet ou um canal do Slack - e cada plataforma que renderiza espera uma tela de aproximadamente 1200 × 630 pixels, o tamanho que os cartões og:image do Facebook e os cartões summary_large_image do Twitter foram projetados. Se errar no tamanho, a imagem sairá cortada, desfocada ou comprimida; se o layout estiver errado, o título será exibido como um pedaço ilegível em uma foto movimentada. Esta ferramenta compõe a imagem na resolução alvo real usando a API Canvas 2D, então o que você vê na visualização é a grade de pixels exata que vem no PNG.

Escolha um plano de fundo - uma cor plana, um gradiente linear de dois pontos construído a partir de duas cores que você escolher ou uma foto enviada que é cortada para preencher o quadro completo de 1200 × 630 da mesma forma que um tamanho de plano de fundo CSS: a capa faria, em vez de ser esticado fora de proporção. Digite um título e um subtítulo opcional: ambos são medidos caractere por caractere em relação às métricas de fonte da própria tela, de modo que um título muito longo para caber em uma linha se transforma em uma segunda ou terceira linha em um limite de palavra real, em vez de se espalhar pela borda ou ficar invisivelmente truncado. Escolha o alinhamento central ou esquerdo, escolha uma cor de texto que corresponda ao fundo e solte um logotipo opcional no canto em um tamanho fixo e legível.

Abaixo da tela, quatro pequenos cartões aproximam a aparência da imagem finalizada quando uma plataforma real a envolve em seu próprio cromo: o cartão do Twitter/X mostra apenas o domínio e um título em negrito abaixo da imagem sem linha de descrição, o Facebook adiciona um domínio maiúsculo faixa acima de um bloco de título e descrição, o LinkedIn coloca o domínio abaixo do título sem nenhuma descrição, e a incorporação do Discord coloca o domínio, título e descrição acima da imagem em seu próprio tema escuro. Essas são aproximações estilizadas para fins de planejamento - claramente rotuladas como ilustrativas, com uma linha de domínio que você mesmo digita - e não uma busca ao vivo ou captura de tela das plataformas reais, já que compartilhar um link e permitir que o rastreador de cada plataforma leia as meta tags og:image e og:title reais da sua página é o que realmente produz o cartão ativo.

Tudo é renderizado localmente em um elemento de tela HTML no seu navegador: o título, o subtítulo, o plano de fundo carregado e o logotipo nunca saem do seu dispositivo, e o arquivo exportado é um canvas.toBlob() PNG limpo contendo apenas o que você compôs - nenhuma borda de maquete, barras falsas do navegador ou logotipos de plataforma são incorporados à imagem baixada. Se você também precisar redimensionar ou converter o PNG exportado posteriormente, as ferramentas de redimensionamento e conversão de imagens deste site continuam exatamente de onde esta parou.