Tarjeta de Vista Previa Social de GitHub | Exporta una imagen Open Graph de 1280x640

Introduce el nombre del repositorio en formato owner/repo, una descripción de una sola línea y una etiqueta de lenguaje como TypeScript, Rust o Python, y la herramienta compone el PNG que GitHub recomienda para el espacio Social preview del repositorio. Tres temas (Oscuro, Claro y Acento) más un selector de color te dejan terminar la tarjeta sin abrir Figma ni Photoshop.

💡 Sobre esta herramienta

Cuando alguien pega la URL de tu repositorio en X, en un canal de Slack, en un hilo de Discord o en un comentario de Hacker News, la primera impresión es la tarjeta enriquecida. Si no has configurado una Social preview, GitHub muestra una tarjeta genérica con el nombre del repositorio y un fragmento del README; con una imagen propia, el enlace se ve como una tarjeta amplia y legible que cuenta de qué va el proyecto de un vistazo.

El obstáculo es el paso de diseño. Hay que recordar las dimensiones recomendadas, abrir un editor vectorial, colocar el nombre, la descripción, quizá un chip con el lenguaje, y exportar al tamaño correcto. Esta herramienta acorta ese ciclo. Escribes cuatro cosas, el Canvas dibuja una imagen de 1280x640 dentro de la página y guardas el PNG. Los tres temas cubren las opciones evidentes: una tarjeta oscura para proyectos orientados a la terminal, una tarjeta clara para librerías más sobrias y una tarjeta de acento totalmente teñida cuando quieres destacar en el feed.

🧐 Preguntas Frecuentes

P. ¿Qué dimensiones tiene el PNG exportado? R. 1280 por 640 píxeles. La documentación de GitHub recomienda al menos 640 por 320 y 1280 por 640 para una mejor calidad de visualización, así que la herramienta se queda con la cifra mayor.

P. La vista previa en pantalla parece más pequeña que 1280x640. ¿Es un problema? R. La previsualización se muestra reducida a 480 por 240 solo por motivos de maquetación. El PNG exportado mantiene el tamaño completo de 1280 por 640, así que revisa el encuadre final en el archivo descargado antes de subirlo.

P. ¿Cuánto texto admite el nombre del repositorio y la descripción? R. Hasta 50 caracteres para el nombre del repositorio, 80 para la descripción y 20 para la etiqueta de lenguaje. El nombre se reduce automáticamente cuando es largo, pero las descripciones superiores a 80 caracteres se cortan, así que conviene resumir en una frase.

P. ¿Dónde se aplica el color de acento? R. En los temas Oscuro y Claro tiñe el pequeño punto de la esquina superior derecha y el fondo del chip con la etiqueta de lenguaje. En el tema Acento se convierte en el color de fondo de toda la tarjeta.

P. ¿Se puede exportar un PNG transparente? R. El PNG se renderiza con el fondo del tema relleno, por lo que la imagen no tiene transparencia. GitHub también acepta PNG transparentes en Social preview, pero un fondo sólido suele leerse de forma más consistente en X, Slack y Discord, tanto en modo claro como oscuro.

P. ¿Qué formatos genera? R. Solo PNG. La Social preview de GitHub acepta PNG, JPG y GIF de menos de 1 MB, así que convierte el PNG con otra herramienta si necesitas específicamente JPG.

📚 La tarjeta como puerta de entrada al repositorio

La Social preview se sube desde la pantalla Settings, Social preview de cada repositorio en GitHub. Si no la has configurado, los enlaces muestran una tarjeta genérica con el nombre y un trozo del README; muchos lectores en español llegan a un repositorio precisamente desde un mensaje compartido en un canal de Discord de estudio, en un grupo de Telegram de desarrolladores o en un hilo de X, y esa primera tarjeta es la que decide si hacen clic o siguen bajando.

Para una comunidad hispanohablante que aprende leyendo proyectos abiertos, una tarjeta bien pensada cumple un papel didáctico que el README no puede cumplir todavía: dice en una sola línea de qué trata el repositorio antes de que el lector tenga que decidir si vale la pena leer la documentación. Una descripción que empiece con el sustantivo que define el proyecto ("CLI para redimensionar imágenes por lotes", "hooks de React para atajos de teclado") suele funcionar mejor en una tarjeta que una frase publicitaria, porque cabe completa en una línea a tamaño reducido. La etiqueta de lenguaje también tiene un peso real: en un feed con muchos enlaces, mucha gente lee primero el lenguaje y después la descripción, así que mostrar Rust, TypeScript o Python por delante ayuda a que el lector correcto se detenga.