Gerador de imagem para redes sociais
Social Card Generator
Compõe uma imagem de compartilhamento de 1200×630 a partir de título, subtítulo, linha de marca e logotipo opcional num modelo escolhido, e escreve as meta tags que a acompanham.
Compõe um cartão de compartilhamento de 1200 × 630 a partir de um título, um subtítulo, uma linha de marca e um logotipo opcional, e emite as meta tags para colar junto. O texto é desenhado direto em um canvas com a própria fonte coreana do dispositivo, quebrando hangul por sílaba e latino por palavra, e o título encolhe sozinho em vez de transbordar.
Prévia (1200 × 630)
Conteúdo
Solte uma imagem de logo (opcional)
Um PNG ou SVG quadrado é o que encaixa melhor. Sem nenhum, entra um bloco na cor de destaque.
Aparência
Meta tags para a página
Por que 1200 × 630, e sobre a fonte
Open Graph, X (summary_large_image), KakaoTalk e Slack cortam todos para algo perto de 1,91:1, então este é o tamanho que menos perde. O texto é desenhado direto no canvas com a fonte coreana do próprio aparelho — Pretendard se estiver instalada, senão Apple SD Gothic Neo, Malgun Gothic ou Noto Sans KR — e o hangul quebra por sílaba, que é por que os mesmos ajustes ficam um pouco diferentes em outra máquina. Exportar em 2× dá 2400 × 1260, que continua nítido numa tela de alta resolução.
Para ver como o card se abre de verdade, o depurador de prévia de link busca a página; e para uma textura de fundo, o gerador de padrões faz uma.
Como usar
Escreva o título do jeito que ele será lido
Um cartão de compartilhamento é lido em tamanho de miniatura em um feed, então um título curto em tipo grande vence uma frase completa em tipo pequeno. A linha sob a prévia diz quantas linhas ele ocupou e se o tamanho foi reduzido para caber.
Acrescente a linha de marca e o rodapé
Eles são lembrados entre visitas, porque são as partes que ficam iguais em todo cartão que você faz. O título e o subtítulo, não.
Escolha um template e as duas cores
Degradê, sólido, dividido ou contorno. A cor de fundo e a cor de destaque fazem todo o trabalho; o botão de texto claro está ali porque um fundo de tom médio pode ir para qualquer um dos lados, e quem deve decidir é o olho, não um limiar.
Acrescente um logotipo, se tiver um quadrado
Um PNG ou SVG quadrado se encaixa melhor. Sem um, um bloco na cor de destaque fica no lugar, o que muitas vezes basta em tamanho de miniatura.
Exporte o PNG e copie as meta tags
As tags carregam a largura e a altura além da URL, que é o que permite a um rastreador diagramar o cartão antes de a imagem ter carregado. Troque a URL de exemplo pelo lugar onde você realmente colocou o arquivo.
Perguntas frequentes
Por que 1200 × 630?
Porque Open Graph, o summary_large_image do X, o KakaoTalk e o Slack recortam todos para algo perto de 1,91:1, e este tamanho perde o mínimo em todos eles. Ir maior não ajuda — todo consumidor o reamostra para baixo — e ir menor significa um cartão borrado em uma tela retina.
O cartão parece ligeiramente diferente na máquina do meu colega.
O texto é desenhado com a fonte coreana que aquele dispositivo tiver — Pretendard se estiver instalada, senão Apple SD Gothic Neo, Malgun Gothic ou Noto Sans KR — então as mesmas configurações produzem formas de letra e quebras de linha ligeiramente diferentes em máquinas diferentes. O PNG exportado fica fixo depois que você o baixa; só a prévia varia.
Meu título ficou menor sozinho.
Ele passou de quatro linhas no tamanho que você definiu, então o tamanho foi reduzido até caber — e a linha sob a prévia diz isso. Texto transbordando seria pior: seria cortado em silêncio na exportação. Encurte o título se quiser o tamanho grande de volta.
Como verifico se o cartão renderiza de verdade?
Coloque o arquivo na URL das meta tags primeiro, depois use a ferramenta de prévia de OG, que busca a página e mostra o que cada plataforma vai construir a partir das tags dela. Esta página só desenha a imagem — ela não consegue saber se as tags estão na página nem se a URL resolve.
Pode receber de
Depurador de prévia de link
Link Preview Debugger
Lê as tags Open Graph e Twitter Card de uma URL e renderiza como o link vai aparecer ao ser compartilhado.
Gerador de padrões de fundo
Background Pattern Generator
Gera padrões SVG repetíveis — listras, pontos, grades, ruído — com controle de cor e escala.
Mockup de dispositivo
Device Mockup
Coloca um print dentro de uma moldura de celular, tablet, notebook ou navegador, com fundo e sombra.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Mockup de dispositivo
Device Mockup
Coloca um print dentro de uma moldura de celular, tablet, notebook ou navegador, com fundo e sombra.
Depurador de prévia de link
Link Preview Debugger
Lê as tags Open Graph e Twitter Card de uma URL e renderiza como o link vai aparecer ao ser compartilhado.
Gerador de padrões de fundo
Background Pattern Generator
Gera padrões SVG repetíveis — listras, pontos, grades, ruído — com controle de cor e escala.
Compressor de PNG
PNG Compressor
Quantiza a paleta e reescreve o fluxo deflate para reduzir um PNG sem alterar as dimensões — sem enviar arquivos, tudo no seu navegador.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Calculadora de proporção
Aspect Ratio Calculator
Calcula a dimensão que falta para uma proporção alvo e lista os tamanhos padrão que ela corresponde.