En este tutorial vamos a ver cómo agregar la posibilidad de usar otra imagen diferente al logo de la tienda a la hora de compartir el link de su página de inicio.
Esta imagen, técnicamente conocida como OG image (Open Graph Image) es la que usan las plataformas como Instagram, Facebook y WhatsApp para acompañar un link cuando es compartido.
HTML
1. Es bastante fácil esta funcionalidad, simplemente tenemos que crear un archivo llamado general-og.tpl dentro la carpeta snipplets/metas, con el siguiente código:
{{ store.name | og('site_name') }}
{% if template == 'home' %}
{{ 'website' | og('type') }}
{{ page_title | og('title') }}
{{ page_description | og('description') }}
{{ store.url_with_protocol | og('url') }}
{% set og_image_src = store.og_image_src %}
{% if og_image_src %}
{{ ('http:' ~ og_image_src) | og('image') }}
{{ ('https:' ~ og_image_src) | og('image:secure_url') }}
{% endif %}
{% endif %}Como vemos este archivo tiene mucho más que solo la imagen, sino que también incluye otra meta información al compartir el link como el nombre del sitio, el tipo de sitio, el título de la página, la descripción de la misma y la URL del sitio.
2. Por último vamos a incluir el archivo creado dentro de la etiqueta head de HTML en el archivo layout.tpl
{# OG tags to control how the page appears when shared on social networks. See http://ogp.me/ #}
{% snipplet "metas/general-og.tpl" %}Activación
Para usar esta imagen, simplemente debemos ir en el administrador a la parte donde cargamos el logo de la tienda, en la sección Mi Tiendanube > Diseño, haciendo tap en el botón “Modificar o eliminar logo” si es que tenemos uno o “Subir logo” si es que no lo subimos todavía.
Luego activamos la opción de “Usar otra imagen cuando compartís el link de tu tienda” y subimos la imagen que queramos.
¡Listo! Ya podemos usar cualquier imagen para compartir tu tienda.
Para más información y recomendaciones sobre esta imagen te recomendamos ver este artículo.