Por qué tus enlaces salen feos en WhatsApp y redes, y cómo arreglarlo

Un cliente le pasa a un amigo el enlace de un producto por WhatsApp. En lugar de una tarjeta con la foto y el nombre, aparece tu logo pixelado, una imagen de un banner recortada por la mitad o solo la dirección en azul. Es el boca a boca de tu tienda, y llega con la peor cara posible.

La culpa casi nunca es de WhatsApp. Es que la página no le dice qué imagen enseñar, o se la dice mal.

Cómo deciden las redes qué enseñar

Cuando alguien pega un enlace, la aplicación descarga la página y busca unas etiquetas en el <head>: las del protocolo Open Graph, creado por Facebook y que hoy leen casi todas (WhatsApp, Facebook, LinkedIn, Telegram, Slack, Discord, Pinterest…). X/Twitter lee además sus propias etiquetas twitter:, y si no las encuentra usa las de Open Graph.

Las básicas son:

• og:title: el título de la tarjeta.
• og:description: el texto breve debajo.
• og:image: la imagen. Con URL absoluta y HTTPS.
• og:url: la dirección canónica de la página.
• og:type: el tipo (para productos se usa a menudo product o website).

Recomendables: og:image:width y og:image:height (ayudan a que la imagen salga a la primera), og:image:alt y twitter:card con valor summary_large_image para la tarjeta grande.

El tamaño que funciona en todas

La medida de referencia es 1200 × 630 píxeles (proporción aproximada 1,91:1). Es la que recomienda Facebook para la vista previa grande y la que mejor encaja en el resto. Lo que suele fallar:

• Fotos de producto cuadradas: la red las recorta arriba y abajo, o las muestra en miniatura a un lado.
• Imágenes demasiado pequeñas: por debajo de cierto tamaño, las redes enseñan una miniatura o nada.
• Imágenes demasiado pesadas: WhatsApp en particular puede no mostrar imágenes muy grandes. Mantenerlas ligeras (por debajo de unos cientos de KB) evita problemas.
• Texto pegado a los bordes: algunas apps recortan los márgenes. Deja aire alrededor.

Por qué PrestaShop no siempre lo resuelve

• Muchos temas no imprimen etiquetas Open Graph, o solo las de la portada.
• Algunos imprimen og:image con la imagen del producto en su tamaño cuadrado.
• Varios módulos imprimen sus propias etiquetas y acaban duplicadas, con imágenes distintas. La red se queda con la primera que encuentra, que no siempre es la buena.
• Las etiquetas aparecen al final del <head>, detrás de mucho código. Algunas aplicaciones solo leen el principio de la página.
• Categorías y páginas CMS no llevan imagen propia.

La caché de cada red: el motivo de que «no cambie»

Las redes guardan la vista previa la primera vez que alguien comparte un enlace y la reutilizan durante un tiempo. Por eso corriges las etiquetas y la tarjeta sigue saliendo mal. Cómo forzar la actualización:

• Facebook: el Depurador de contenido compartido (Sharing Debugger) muestra lo que lee y permite volver a extraer la página.
• LinkedIn: Post Inspector hace lo mismo.
• WhatsApp: no tiene herramienta pública. Lo práctico es probar con la URL añadiendo un parámetro (por ejemplo ?v=2) para comprobar que la nueva versión está bien; el enlace sin parámetro se actualizará con el tiempo.
• Telegram: su bot @WebpageBot permite pedir que actualice la vista previa de una URL.

Más allá de la foto: una imagen que vende

Una vista previa no tiene por qué ser la foto del producto sin más. Una imagen compuesta con la foto, el nombre, el precio y, si lo hay, el descuento, comunica en un vistazo lo que el amigo necesita saber para pulsar. La condición es que esté al día: una imagen con un precio antiguo genera desconfianza.

Checklist

1. Cada ficha, categoría y página CMS tiene su og:image, con URL absoluta y HTTPS.
2. La imagen mide 1200 × 630 y pesa poco.
3. Solo hay un juego de etiquetas Open Graph por página.
4. Las etiquetas están al principio del <head>.
5. og:title y og:description salen en el idioma de la página.
6. Has pasado tres URL por el depurador de Facebook y el inspector de LinkedIn.
7. Has probado a compartir por WhatsApp desde un móvil.

Cómo resolverlo en PrestaShop

RKR Dynamic Image genera en tu servidor, sin servicios externos, una imagen de 1200 × 630 para cada producto, categoría y página CMS con imagen, con la foto, el nombre, el precio con el formato de tu tienda, una insignia de descuento cuando lo hay (precios específicos incluidos) y las estrellas de valoración si usas el módulo de comentarios de producto de PrestaShop. La imagen se actualiza sola al cambiar un precio, se genera por idioma y por tienda, y se puede diseñar con un constructor visual con 23 temas. El módulo imprime las etiquetas al principio del <head> para que WhatsApp las lea. Funciona en PrestaShop 1.7.8 a 9.x.