Gerador de card social (imagem Open Graph)
Crie uma imagem Open Graph de 1200×630 com título, descrição e nome do site sobre um gradiente, baixe o PNG e copie as meta tags og: e Twitter correspondentes.
As redes sociais exigem uma URL absoluta https://.
O que é Gerador de card social?
Quando um link é compartilhado no Facebook, LinkedIn, X/Twitter, Slack ou Discord, a plataforma mostra a imagem Open Graph da página. Esta ferramenta cria essa imagem no tamanho recomendado de 1200 × 630 px a partir do seu Título, Descrição e Nome do site sobre um gradiente colorido, e escreve as meta tags og: e twitter: correspondentes.
Como usar Gerador de card social
- Digite o Título, a Descrição e o Nome do site ou domínio.
- Escolha um Tema ou defina você mesmo as cores do gradiente e do texto.
- Clique em Baixar PNG e envie a imagem para o seu site.
- Informe a URL da página e a URL da imagem e copie as Meta tags Open Graph e Twitter para o
<head>da página.
Exemplo
Title: Hello OG
<meta property="og:title" content="Hello OG"> … <meta name="twitter:card" content="summary_large_image">
Mais uma imagem PNG de 1200 × 630.
Quando usar Gerador de card social
Use-o em posts de blog, lançamentos de produtos, páginas de documentação e qualquer página que você espera ver compartilhada. Para milhares de páginas, gere as imagens automaticamente no build. As redes sociais guardam as prévias em cache, então, depois de trocar uma imagem, use as ferramentas de depuração delas (Facebook Sharing Debugger, LinkedIn Post Inspector) para atualizá-la.
Como funciona Gerador de card social
O card é desenhado em um canvas de 1200×630: fundo com gradiente linear diagonal, o nome do site no topo, o título em negrito (o tamanho da fonte diminui de 72 px até 40 px até caber em três linhas, com quebra de palavras gulosa e quebra por caractere em alfabetos sem espaços) e até duas linhas de descrição. Textos da direita para a esquerda, como o árabe, são alinhados à direita automaticamente. As meta tags incluem og:title, og:description, og:url, og:image com largura e altura e twitter:card definido como summary_large_image, com todos os valores escapados para HTML.
Casos de Uso Comuns
- Criar a imagem de compartilhamento de um novo post de blog
- Fazer cards de prévia consistentes para páginas de documentação
- Anunciar o lançamento de um produto no LinkedIn e no X
- Gerar as meta tags og:image de uma landing page
Perguntas Frequentes
Qual deve ser o tamanho de uma imagem Open Graph?
1200 × 630 pixels (cerca de 1,91:1) é o tamanho recomendado para os cards grandes do Facebook, LinkedIn e X.
Por que a URL da imagem precisa ser absoluta?
As redes sociais buscam a imagem nos próprios servidores, então og:image precisa ser uma URL completa https://, e não um caminho relativo.
Minha nova imagem não aparece quando compartilho o link
As plataformas guardam prévias em cache. Peça uma nova leitura da URL no depurador da plataforma ou espere o cache expirar.