Así es como solucionamos las vistas previas rotas de nuestro blog

Publiqué un enlace a nuestro blog en X. La imagen de vista previa se veía mal. En lugar de una imagen de un artículo técnico, mostraba un banner de ventas.

Revisé nuestras últimas siete publicaciones. Todas tenían el mismo banner de ventas. Nuestros análisis técnicos profundos parecían anuncios. Esto afectó nuestra credibilidad.

El problema era sencillo. Nuestro código tenía una regla de respaldo (fallback). Si una publicación no tenía una imagen destacada, utilizaba un banner de ventas por defecto. Como no habíamos configurado imágenes destacadas para nuestras 42 publicaciones, cada una utilizaba la misma imagen.

Teníamos dos opciones:

  • Opción A: Crear 42 imágenes manualmente. Esto requiere tiempo y genera más trabajo para cada nueva publicación.
  • Opción B: Construir un generador de imágenes dinámico. Esto crea una imagen personalizada para cada publicación de forma automática.

Elegimos la Opción B. Construimos un pequeño motor utilizando PHP GD.

Así es como funciona:

  • El motor crea un PNG de 1200x630 bajo demanda.
  • Utiliza un fondo oscuro y el título de la publicación.
  • Extrae el título de la base de datos.
  • Guarda la imagen en el disco tras el primer renderizado.
  • Cada solicitud futura sirve el archivo en caché. Esto lo hace muy rápido.

Resolvemos dos problemas específicos durante este desarrollo:

  1. Soporte de idiomas: El uso exclusivo de fuentes latinas como Inter hacía que el texto en japonés apareciera como cuadros vacíos. Añadimos una comprobación para cambiar a Noto Sans JP en los títulos en japonés.

  2. Tono visual: Los blogs tecnológicos profesionales como Vercel o PlanetScale utilizan tarjetas limpias y oscuras. Imitamos este estilo para generar confianza en nuestros lectores.

Lecciones clave para ti:

  • Audita tus vistas previas en redes sociales. Utiliza una herramienta para comprobar si tus etiquetas og:image funcionan.
  • Evita el diseño manual para cada publicación. No es escalable.
  • Utiliza un stack sencillo. PHP GD más una caché en disco es ligero y eficaz.
  • Planifica para múltiples idiomas. Incluye siempre una fuente que admita tu conjunto completo de caracteres.

Las imágenes de tu blog representan tu marca. No permitas que un respaldo por defecto arruine tu primera impresión.

Fuente: https://dev.to/susumun/implementing-a-dynamic-ogp-image-generator-for-our-blog-php-gd-per-post-1200-630-cards-46al