Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Imagem de Cartão Social Open Graph

CorDesenvolvedorImagem

ANUNCIADO Remover?

ENTRADA

Processo Automático

Predefinição

Largura

Altura

Content

Título

Descrição

Site Name

Layout & Theme

Um hábito prático: construa a estrutura no DevTools primeiro, depois commit os valores para seu estilo de folha uma vez que a grade parecer correta.

Tema

Fundo

Gradient Start

Gradient End

Gradient Angle

Accent Color

Used for the top bar and site name.

Typography

Fonte

Title Size: 72 Auto-shrinks for long titles to keep one line where possible.

Description Size: 32

Show site name

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Gerador de Imagem de Cartão Social Open Graph

Crie imagens de compartilhamento perfeitas em pixels para Open Graph, Twitter Cards, LinkedIn e Facebook diretamente no seu navegador. Digite o título, a descrição e o nome do site, escolha um layout e um tema, depois baixe um PNG, JPG ou WebP nas dimensões exatas que cada plataforma exige — sem necessidade de ferramenta de design ou upload.

Como usar

Escolha um preset (1200×630 para Open Graph, 1024×512 para Twitter) ou defina largura e altura personalizadas.
Digite o título, a descrição e o nome do site que deseja no cartão.
Escolha um layout (centralizado, alinhado à esquerda ou com destaque no topo) e um tema (claro, escuro, cor da marca ou gradiente).
Ajuste a tipografia — família de fonte, tamanho do título e tamanho da descrição — para se alinhar à sua marca.
Clique Download e salve o PNG, JPG ou WebP para uso como seu og:image ou twitter:image.

Características

Dimensões sociais corretas – Presets para Open Graph (1200×630), Twitter Card (1024×512), LinkedIn e Facebook.
Vários layouts – Modelos centralizados, alinhados à esquerda e com destaque no topo para diferentes estilos de marca.
Temas claros, escuros, da marca e gradientes – Mude o fundo em um clique ou use a cor da sua marca.
Redução automática do título – Cabeçalhos longos são quebrados e redimensionados para que o cartão permaneça legível.
Visualização em tempo real do canvas – Cada alteração atualiza imediatamente em um canvas HTML5 real — o que você vê é o que você baixa.
Exportação em PNG, JPG e WebP – Escolha o formato que se adapta ao seu hospedagem e CDN.
Executa totalmente no navegador – Sem upload, sem conta, sem marca d'água.

 Perguntas frequentes

O que é o protocolo Open Graph?

Open Graph é um conjunto de <meta> tags introduzidas pelo Facebook que permite que uma página da web descreva a si mesma para plataformas sociais. As tags mais comuns são og:title, og:descriptione, e og:image. Quando alguém compartilha um link, a plataforma lê essas tags e exibe um cartão rico em vez de um URL simples.
Qual o tamanho ideal para a imagem og:image?

O especificação Open Graph recomenda uma proporção de 1,91:1 com um mínimo de 600×315 pixels. A maioria das plataformas renderiza melhor em 1200×630, mantendo o cartão nítido em exibidores retina enquanto permanece abaixo do limite de 8 MB do Facebook. Os cartões do Twitter geralmente usam 1024×512 para o formato summary_large_image.
Por que as plataformas sociais armazenam URLs og:image?

Plataformas como Facebook, LinkedIn e Slack baixam a imagem og:image uma vez e a armazenam em seu CDN para evitar que a sua origem seja acessada repetidamente toda vez que o link for compartilhado. Esse cache pode persistir por dias ou semanas. Para forçar uma atualização após alterar a imagem, altere o URL do arquivo ou use o debugger da plataforma (por exemplo, o Facebook Sharing Debugger) para reanalisar a página.
Qual a diferença entre og:image e twitter:image?

og:image é parte do protocolo Open Graph e é lido por Facebook, LinkedIn, Slack, Discord e a maioria dos aplicativos de mensagens. twitter:image pertence aos cartões do Twitter e é lido pelo X (Twitter). Se apenas og:image estiver presente, o X irá recorrer a ele, então uma única imagem de alta qualidade muitas vezes funciona para ambas as plataformas — mas fornecer ambas permite otimizar o tamanho para cada plataforma.
Por que o título é reduzido automaticamente quando é longo?

Os cartões sociais têm um canvas fixo, então um título longo que ultrapassa a borda parece quebrado. O API HTML5 Canvas não formata texto automaticamente, então o gerador mede cada palavra com ctx.measureText(), quebra o título em linhas e reduz o tamanho da fonte em etapas até que o título fique dentro da área segura. Isso mantém todos os exports legíveis sem necessidade de ajustes manuais.