Introducción
Creo que todos sabemos la importancia que tiene el SEO hoy en día, y dentro de eso, las etiquetas Open Graph (OG) juegan un papel crucial. Sobre todo cuando hablamos de blogs, donde la imagen de portada no solo es la primera impresión visual, sino que también afecta cómo se comparte el contenido en redes sociales y mensajería.
Desde la creación de La Cueva del NeanderTech, hace ya cerca de 3 años, he publicado más de 40 artículos, y cada uno de ellos tiene su propia portada. Es cierto que durante ese periodo han habido cambios en el diseño, pero el proceso de generar la OG image siempre ha sido el mismo: manual, tedioso y repetitivo.
Cada post en este blog tiene una portada. Esa imagen que ves en el feed, en Twitter/X cuando compartes el link, en WhatsApp cuando lo mandas a un amigo (espero que si lo mandes eh) esa es la OG image, y durante mucho tiempo fue el paso que más odiaba del proceso de publicar un artículo.
Abrir Canva, cambiar el texto, exportar, convertir a WebP, subirla. Repetir para cada post. Aburrido, lento y completamente mecánico. La solución obvia: automatizarlo con una herramienta CLI.
Así nació autoCover — un script de Python que genera portadas de blog con un solo comando.
¿Qué es autoCover?
Si si, no es el mejor nombre, lo sé. Pero es descriptivo y fácil de recordar... y eso basta, ¿no?
autoCover es una herramienta de línea de comandos que genera imágenes de portada a partir de parámetros de texto y opciones de diseño. Sin abrir ninguna aplicación gráfica. Sin plantillas que mantener. Un comando, una imagen.
python autocover.py \
--title "DOMINA TUS COMMITS" \
--subtitle "METODOLOGÍA CONVENTIONAL COMMITS" \
--footer "cuevaneander.tech/blog" \
--output portada.png
Y en segundos tienes tu portada lista.
Anatomía de una Portada
autoCover divide la imagen en tres zonas de texto:
- Title (
--title) — parte superior, fuente grande, el titular del post - Subtitle (
--subtitle) — centro, descripción o subtítulo - Footer (
--footer) — parte inferior, normalmente la URL del blog
Cada zona tiene configuración independiente de fuente, tamaño y posición.
Fondos: Tres Modos
Color Sólido
El modo más simple. Un color de fondo hexadecimal:
python autocover.py \
--title "Mi Post" \
--bg-color "#111111" \
--text-color "#ff7f00" \
--output cover.png
Gradiente
Dos colores que se mezclan de forma vertical u horizontal:
python autocover.py \
--title "Mi Post" \
--gradient "#111111,#1a1a2e" \
--gradient-direction vertical \
--text-color "#ff7f00" \
--output cover.png
Imagen de Fondo con Overlay
La opción más potente. Una imagen de fondo con una capa semitransparente encima para que el texto siempre sea legible:
python autocover.py \
--title "Mi Post" \
--background assets/backgrounds/bg.png \
--overlay 0.6 \
--overlay-color "#000000" \
--text-color "#ffffff" \
--output cover.png
El valor de --overlay va de 0.0 (sin overlay) a 1.0 (opaco). Un valor de 0.6 suele ser el punto óptimo entre visibilidad de la imagen y legibilidad del texto.
Text Boxes: El Toque Profesional
Una de las funcionalidades que más cambia el resultado visual son las cajas de texto con bordes redondeados. Añaden un fondo semitransparente detrás de cada zona de texto, creando contraste incluso sobre fondos complejos:
python autocover.py \
--title "NOMADA DIGITAL" \
--subtitle "LLEVA TU HOME A TODAS PARTES" \
--footer "lacuevadelneandertech.com/blog" \
--background assets/backgrounds/bg.png \
--text-color "#ff7f00" \
--box \
--box-fill "#00000080" \
--box-border "#ff7f00" \
--box-border-width 4 \
--box-radius 25 \
--output cover.png
El parámetro --box-fill usa formato #RRGGBBAA donde los últimos dos dígitos son la opacidad en hex:
| Valor | Opacidad |
|---|---|
FF | 100% (opaco) |
BF | 75% |
80 | 50% |
40 | 25% |
1A | 10% |
#00000080 = negro al 50% de opacidad. El punto dulce para que el texto sea legible sin tapar del todo el fondo.
Logo y Branding
Para mantener consistencia de marca en todas las portadas, puedes añadir tu logo en cualquier esquina:
python autocover.py \
--title "Mi Post" \
--logo assets/logos/logo.png \
--logo-size 100 \
--logo-position bottom-left \
--output cover.png
Las posiciones disponibles son: top-right, top-left, bottom-right, bottom-left.
Tipografía Personalizada
Por defecto autoCover usa una fuente del sistema, pero puedes especificar cualquier archivo TTF u OTF:
python autocover.py \
--title "Mi Post" \
--font assets/fonts/GeistMono-Medium.ttf \
--font-size-title 90 \
--output cover.png
Los tamaños de fuente tienen auto-sizing por defecto — si no los especificas, autoCover calcula el tamaño óptimo según la longitud del texto.
El Alias que lo Cambia Todo
La clave para que autoCover sea realmente rápido de usar es crear un alias con tus valores por defecto:
# ~/.zshrc o ~/.bashrc
alias blogcover='python ~/autoCover/autocover.py \
--background ~/autoCover/assets/backgrounds/bg.png \
--logo ~/autoCover/assets/logos/logo.png \
--logo-position bottom-left \
--text-color "#ff7f00" \
--box \
--box-fill "#00000080" \
--box-border "#ff7f00" \
--box-border-width 4 \
--footer "lacuevadelneandertech.com/blog"'
A partir de ahí, cada portada nueva es un comando de una línea:
blogcover \
--title "DOMINA TUS COMMITS" \
--subtitle "METODOLOGÍA CONVENTIONAL COMMITS" \
--output portada.png
El proceso completo de diseño pasa de 10 minutos a 10 segundos.
Por cierto, casi lo olvido, aquí tienen el código completo de autoCover en GitHub: autoCover en GitHub
Conclusión
autoCover no es una herramienta compleja, pero resuelve un problema real: el tiempo muerto entre terminar de escribir un post y publicarlo. Eliminar esa fricción hace que publicar sea más rápido y menos costoso mentalmente.
Si tienes un blog y generas portadas manualmente, créeme que merece la pena el tiempo de configurar el alias una vez. El retorno es inmediato en cada post que publiques después.
Desde La Cueva del NeanderTech, cualquier paso del flujo de trabajo que se pueda automatizar, se automatiza. La constancia a la hora de publicar es mucho más fácil cuando el proceso no duele.
"Si tienes que hacerlo más de dos veces, escribe un script."
Referencias
