Cartão de Visualização Social do GitHub | Exporte uma imagem Open Graph de 1280x640

Digite o nome no formato owner/repo, uma descrição de uma linha e uma etiqueta de linguagem como TypeScript, Rust ou Python, e a ferramenta monta o PNG recomendado pelo GitHub para o espaço Social preview de um repositório. Três temas (Escuro, Claro, Destaque) e um seletor de cor para o destaque permitem fechar o cartão sem abrir o Figma ou o Photoshop.

💡 Sobre esta ferramenta

Quando alguém cola a URL do seu repositório em uma postagem no X, em um canal do Slack, em um fio do Discord ou em um comentário do Hacker News, o cartão de prévia é a primeira impressão. Sem uma Social preview configurada, o GitHub mostra um cartão genérico com o nome do repositório e um trecho do README; com uma imagem própria, o link aparece como um cartão amplo e legível que diz de cara do que o projeto se trata.

O atrito está na etapa de design. É preciso lembrar as dimensões recomendadas, abrir um editor vetorial, posicionar o nome, a descrição, talvez uma etiqueta de linguagem, e exportar no tamanho certo. Esta ferramenta encurta esse ciclo. Você preenche quatro campos, o Canvas desenha uma imagem de 1280x640 dentro da página, e você salva o PNG. Os três temas cobrem as opções óbvias: um cartão escuro para projetos orientados a terminal, um cartão claro para bibliotecas de visual mais limpo e um cartão totalmente tingido quando o objetivo é destacar o repositório em um feed.

🧐 Perguntas frequentes

P. Quais são as dimensões do PNG exportado? R. 1280 por 640 pixels. A documentação do GitHub recomenda no mínimo 640 por 320 e 1280 por 640 para melhor qualidade de exibição, então a ferramenta fica com o tamanho maior.

P. A área de prévia na tela parece menor que 1280x640. Isso é um problema? R. A prévia é reduzida a 480 por 240 apenas para fins de layout. O PNG exportado mantém o tamanho completo de 1280 por 640, então confira o enquadramento final no arquivo baixado antes de enviar.

P. Qual o comprimento do nome do repositório e da descrição? R. Até 50 caracteres no nome do repositório, 80 na descrição e 20 na etiqueta de linguagem. O nome é reduzido automaticamente quando é longo, mas descrições acima de 80 caracteres são cortadas, então convém resumir em uma frase.

P. Onde a cor de destaque aparece? R. Nos temas Escuro e Claro, ela colore o pequeno ponto no canto superior direito e o fundo do chip com a etiqueta de linguagem. No tema Destaque, ela passa a ser a cor de fundo de todo o cartão.

P. Dá para exportar um PNG transparente? R. O PNG é renderizado com o fundo do tema preenchido, portanto a imagem fica sem transparência. O GitHub também aceita PNG transparente para Social preview, mas um fundo sólido costuma se manter mais legível no X, no Slack e no Discord, tanto em modo claro quanto em modo escuro.

P. Quais formatos são gerados? R. Somente PNG. O Social preview do GitHub aceita arquivos PNG, JPG e GIF de menos de 1 MB, então converta o PNG em outra ferramenta caso precise especificamente de JPG.

📚 O cartão social como sinal antes da leitura do README

O espaço Social preview fica na tela Settings, Social preview de cada repositório no GitHub. Quando ele não está configurado, os links exibem um cartão genérico com o nome e um pedaço do README; é esse cartão que leitores brasileiros e portugueses encontram quando descobrem um repositório por meio de um link postado em um canal de Discord de estudos, em um grupo de WhatsApp de devs ou em um fio do X. A decisão de clicar ou seguir adiante acontece em frente a esse cartão, antes mesmo de o leitor chegar ao README.

Vale registrar alguns padrões práticos. A descrição no cartão tem um papel diferente do primeiro parágrafo do README: precisa caber em uma única linha em tamanho reduzido, portanto uma frase que nomeia diretamente o tipo de projeto ("CLI para redimensionar imagens em lote", "hooks de React para atalhos de teclado") tende a funcionar melhor do que uma frase publicitária. A etiqueta de linguagem também carrega peso real: em um feed cheio de links, muita gente lê a linguagem antes da descrição, então mostrar Rust, TypeScript ou Go logo de cara ajuda o leitor certo a parar. Por fim, escolher uma cor de destaque única e reaproveitá-la em todos os seus repositórios dá a uma coleção de projetos pessoais uma coerência visual que compensa o pequeno tempo investido.