Flake Hog: previsualización en redes sociales
La previsualización de una imagen al compartir un enlace en redes sociales es un Call to Action muy poco explotado en la industria. El mismo permite atrapar rápidamente al lector y es determinante para lograr que haga clic en el enlace y acceda al recurso.
UiTool es la primera herramienta que lleva al próximo nivel la creación de imágenes dinámicas y customizables que acompañan a un enlace con un concepto que denominamos Hog.
¿Qué es un Hog Image?
Cuando compartimos un enlace en WhatsApp o en otra red social, es posible visualizar una imagen como previsualización y que suele representar el URL compartido. Esa imagen aparece gracias al protocolo Open Graph desarrollado por Meta. “Hog Image” es nuestra implementación del protocolo OG para la creación de imágenes que acompañarán a las PowerApps o Landings al ser compartidas estas.
Hog Image, o simplemente Hog, es el acrónimo de Hotlink Open Graph Image. Las previsualizaciones de una página web, en el caso de un SkinX, de una PowerApp o una Landing, se generan al momento de compartir el URL. Configurando el protocolo OG en el HTML de una página web, es posible previsualizar una imagen del link compartido, además de otra información como el título y la descripción de la página.
¿Cómo funciona el protocolo OG?
El protocolo Open Graph de Meta no es más que código HTML que se configura para renderizar determinada información al compartir un enlace.
<head>
<meta property="og:title" content=""/>
<meta property="og:description" content=""/>
<meta property="og:image" content="" />
</head>
La meta etiqueta que más nos interesa aquí es og:image en donde se encontrará el enlace al Hog creado en UiTool y que, con previa vinculación entre los flakes en UiTool, renderizará una imagen al compartir una PowerApp/Landing.
Twitter Cards
Existe una versión similar del protocolo OG que funcione para las apps de Twitter (actual X) y Telegram denominado Twitter Cards. Por supuesto que los Hogs también son 100% compatibles con este otro protocolo para explotar al máximo el potencial de la herramienta.
<head>
<meta property="twitter:title" content=""/>
<meta property="twitter:description" content=""/>
<meta property="twitter:image" content="" />
</head>
¿Cómo se renderizan los Hogs?
UiTool es solo la herramienta de diseño de interfaces, ya sea de Hogs, Landings o PowerApps. Para su utilización, se requiere de otro sofisticado software que denominamos el Engine de UiTool que logra interpretar la configuración de cualquier flake y reconstruir los componentes en un navegador web para visualizarlo tal cual fue diseñado.
Para el caso de un Hog, no solo reconstruye los componentes React, también los convierte en imágen implementando el servicio de Open Graph Image Generation de Vercel. Todo a una alta velocidad de latencia para que el protocolo OG reconozca correctamente y renderice la imagen.
El Engine requiere de todo un capítulo aparte. De momento con conocer su existencia y saber que gracias a esta herramienta es posible reconstruir y utilizar cualquier flake es suficiente para entender cómo se vinculan las piezas dentro de un SkinX.
Hogs dinámicos con variables
Un concepto en común entre todos los flakes es el uso de variables para la customización de las piezas que se diseñan en UiTool.
Para el caso de los Hogs, la inyección de variables dinámicas en las imágenes que se renderizan al compartir un link es el principal potencial de la herramienta.
Imaginemos poder compartir un enlace y que en la imagen que se previsualiza diga “¡Hola, Joe!” u “¡Hola, Alice!”, o cualquier otra información dinámica que se quiera personalizar para dirigir ese enlace a un usuario final de un producto. El CTA inmediato que le genera a una persona poder leer su nombre o su información para invitarlo a hacer clic en el enlace, es totalmente único de los Hogs.
Configuración de metadata
En el panel derecho, al dirigirse a “Flake Config”, podremos fácilmente configurar la metadata del hog. Se trata de un título y una descripción que se utilizará en Open Graph al mostrarse el hog.
Se recomienda que el título no sepere los 65 caracteres, y la descripción los 165. ¡Puedes utilizar variables en estos textos!
Conclusión
Los Hogs son, junto a los Bots, los flakes que acompañan a las PowerApps y Landings para maximizar su capacidad a la hora de crear y compartir un enlace personalizado. Una herramienta única en la industria que busca explotar al máximo una herramienta de marketing poco reconocida como lo son las imágenes del protocolo Open Graph.