Imágenes automáticas para compartir en redes sociales

Obtener una vista previa de enlace grande y elegante en las redes sociales requiere bastante poco esfuerzo. Agrega un puñado de etiquetas específicas metaa una URL y obtendrás una gran imagen, título y descripción. Aquí está la versión de Twitter de un artículo en este sitio:

Es un esfuerzo particularmente bajo en este sitio, ya que nuestro complemento Yoast SEO coloca las etiquetas correctas automáticamente. La imagen que usa por defecto es la función de “imagen destacada” de WordPress, que usamos de todos modos.

Soy un fanático de ese tipo de mejora con tan poco trabajo. Jetpack también ayuda en el proceso al automatizar las cosas.

Pero digamos que no utiliza estas herramientas en particular. Tal vez crear una imagen por publicación de blog ni siquiera sea algo que te interese hacer, pero aún así quieres mostrar algo agradable en la vista previa de las redes sociales.

Hemos cubierto esto antes. Puedes diseñar la “imagen” con HTML y CSS, utilizando el contenido y los metadatos que ya tienes de la publicación del blog. Puede convertirlo en una imagen con Puppeteer (o similar ) y luego usarlo para la imagen en las metaetiquetas.

Ryan Filler ha detallado ese proceso de la mejor manera que he visto hasta ahora.

1. Cree una ruta en su sitio que tome datos dinámicos de la URL para crear el diseño
2. Cree una función en la nube que llegue a esa ruta, la convierta en una imagen y la cargue en Cloudinary (para optimizarla y publicarla).
3. Cada vez que se solicite la imagen, verifique si ya la ha creado. Si es así, sírvelo desde Cloudinary; si no, hazlo y luego sírvelo.

Esto hace que mi cerebro se cocine. ¿Qué pasaría si no necesitáramos crear ninguna imagen rasterizada?

¿Quizás en lugar de necesitar crear una imagen rasterizada podríamos usar SVG? SVG sería fácil de crear como plantilla y sabemos img src="file.svg" /que es extremadamente capaz . Pero… Twitter dice :

Las imágenes deben tener un tamaño inferior a 5 MB. Se admiten los formatos JPG, PNG, WEBP y GIF. Sólo se utilizará el primer fotograma de un GIF animado. SVG no es compatible.

Cincuenta caras tristes, Twitter. Pero continuemos con este experimento mental.

Necesitamos trama. El canvaselemento puede escupir un PNG . ¿Qué pasaría si la función de nube con la que hablaste fuera un navegador real? Richard Young lo llamó el año pasado una “función de navegador” . Tal vez el navegador en la nube podría hacer esa plantilla SVG con la que estamos soñando, pero luego dibujarla en un lienzo y escupir ese PNG.

Meh, no estoy seguro de que eso resuelva nada ya que todavía tendrías la dependencia de Puppeteer y, en todo caso, esto simplemente complica la forma en que creas la imagen. Aún así, algo me atrae acerca de poder utilizar las capacidades del navegador nativo a nivel de servidor.