Pegas la dirección de tu web en un chat y esperas un segundo a ver qué sale. A veces aparece una foto bonita con el nombre del negocio, y a veces un recuadro vacío con la dirección en gris. Esa diferencia se llama vista previa al compartir y no es cosa de WhatsApp: la decides tú desde tu web, aunque probablemente nadie te lo haya contado.
Lo que ve tu cliente cuando le pasas el enlace
Piensa en cuántas veces al mes alguien comparte tu dirección: tú mismo por WhatsApp, un cliente que te recomienda en un grupo del barrio, alguien que la pega en un correo. En cada una de esas veces, lo primero que se ve no es tu web: es ese recuadro.
Y con un recuadro vacío pasa lo mismo que con un escaparate tapado: no dice que seas malo, dice que no hay nadie pendiente.
Qué es la vista previa al compartir y de dónde saca los datos
Cuando pegas un enlace, la aplicación entra en la página, lee unas etiquetas escondidas en el código y monta con ellas la tarjeta. Esas etiquetas siguen un estándar llamado Open Graph, que nació en Facebook y hoy usan casi todos: lo tienes documentado en la página del protocolo Open Graph.
Las cuatro líneas que lo deciden todo
- og:title. El titular de la tarjeta. Corto, con el nombre del negocio.
- og:description. Una frase que explique de qué va esa página.
- og:image. La foto. Es lo que más se mira y lo que más falta.
- og:url. La dirección buena de la página, para que no se dupliquen.
Cuatro líneas en el código. Ponerlas es cuestión de minutos; el problema es que casi ninguna web las lleva bien.
¿Quieres saber qué te costaría a ti?
Respondemos el mismo día. Sin compromiso y sin discursos.
Por qué a veces sale en blanco
Las causas se repiten mucho y casi siempre son una de estas cuatro: que no hay etiqueta de imagen y la aplicación no encuentra ninguna que le sirva; que la imagen está puesta con una dirección relativa y desde fuera no se puede cargar; que pesa tanto que la aplicación se cansa de esperar; o que la página no deja entrar al robot que va a leerla.
La cuarta es la más traicionera, porque la web funciona perfectamente en el navegador y aun así la vista previa no aparece.
La imagen: medidas, peso y lo que se ve recortado
Aquí está el 80 % del resultado. Una foto mal medida se recorta por donde no debe y lo que queda es media cara o medio logotipo.
Lo que funciona en la práctica
- 1200 por 630 píxeles. Es la medida que respetan casi todas las aplicaciones.
- Por debajo de 300 KB. Si pesa megas, hay sitios que ni la cargan.
- Lo importante en el centro. Los bordes se recortan según la aplicación.
- Nada de texto pequeño. En el móvil esa tarjeta mide cuatro dedos.
Qué fotos usar y cuáles no, con el detalle de formatos y tamaños, está en fotos para tu web. Y si tu web va lenta, la culpa suele ser de las mismas imágenes: por qué tu web va lenta en el móvil.
El título de la tarjeta no es el que sale en Google
Son dos cosas distintas y conviene no mezclarlas. El título que aparece en los resultados del buscador tiene sus propias reglas y su propia longitud; el de la tarjeta del chat es más corto y se lee de otra manera, más cerca de un mensaje que de un anuncio.
Del primero hablamos en título y meta descripción. Del segundo, esto que estás leyendo.
Una imagen por página, no una para toda la web
El error más común después de no tener ninguna: poner la misma foto de portada en las cuarenta páginas. Si alguien comparte tu página de un servicio concreto, la tarjeta debería enseñar ese servicio, no el logotipo.
Esto va de la mano de tener las páginas bien separadas, que es de lo que va la estructura de una página web.
El favicon, el detalle que nadie mira
Es el iconito de la pestaña del navegador, y también sale al lado de tu resultado en el móvil y en algunos chats. Cuando falta, aparece un icono genérico de documento que canta bastante. Google explica qué hace falta para que lo coja bien en su documentación sobre el favicon en los resultados de búsqueda.
Cuesta diez minutos y se nota más de lo que parece.
Por qué WhatsApp sigue enseñando la imagen de hace un mes
Porque guarda una copia. La primera vez que alguien comparte tu enlace, la aplicación lee la página y se queda con lo que encontró; a partir de ahí, aunque cambies la foto, sigue enseñando la vieja durante un tiempo.
Cómo forzar que se actualice
Para lo que es de Meta, existe el depurador de contenido compartido que describe su guía para administradores web: le das la dirección, la vuelve a leer y a partir de ahí ya sale la nueva. En WhatsApp no hay un botón equivalente, así que lo que funciona es compartir el enlace con un parámetro añadido al final la primera vez después del cambio.
Si al cabo de unos días sigue saliendo la antigua, casi siempre es que la etiqueta no se llegó a cambiar donde tocaba.
Lo que no conviene poner en esa imagen
- Un cartel lleno de texto. A ese tamaño no se lee nada.
- El logotipo solo, sobre fondo blanco. Es lo que menos llama la atención.
- Una foto de banco de imágenes que se ha visto mil veces.
- Una captura de pantalla de tu propia web. Se ve borrosa y no dice nada.
Lo que sí funciona
Una foto tuya, de tu equipo, de tu local o de un trabajo terminado. Cuanto más se parezca a lo que el cliente se va a encontrar cuando llegue, mejor. Y si tienes una foto en la que se ve la fachada, esa vale doble, porque quien abre el enlace muchas veces está decidiendo si acercarse.
Y si tu web está en varios idiomas
Cada versión necesita sus propias etiquetas, con el título y la descripción en su idioma. Suena obvio y falla mucho: la página en catalán enseñando la tarjeta en castellano es de las cosas que más veces vemos al revisar una web bilingüe. Cómo se monta eso sin duplicar el trabajo está en web en catalán y castellano.
El enlace que compartes no siempre es el que crees
Si copias la dirección desde la barra del navegador después de haber llegado por un anuncio, a veces te llevas pegado un montón de texto raro al final. Funcionar, funciona, pero se ve feo y en algunos casos hace que la tarjeta se lea distinta.
Merece la pena tener a mano la dirección limpia de las tres o cuatro páginas que más compartes.
Te lo decimos en una conversación de diez minutos
Respondemos el mismo día. Sin compromiso y sin discursos.
Cuando cambias de web, esto se rompe
Es de las cosas que más se olvidan en una migración: la web nueva sale sin las etiquetas y, de repente, todos los enlaces que la gente ya tenía guardados empiezan a enseñar un recuadro vacío. Entra en la misma lista de comprobaciones que el resto: migrar la web sin perder posiciones.
En redes sociales pasa lo mismo, pero peor
En un chat la tarjeta es pequeña; en una publicación ocupa media pantalla. Si pegas el enlace de tu web en una red y sale el recuadro gris, ese es el aspecto de tu negocio ante toda la gente que pase por ahí.
Cómo encaja esto con el resto de lo que publicas está en redes sociales para negocios locales, y si el canal principal es WhatsApp, en WhatsApp Business para tu negocio.
La prueba de los tres chats
No hace falta ninguna herramienta para saber cómo estás.
Los tres sitios donde hay que mirarlo
- Un chat contigo mismo en WhatsApp, pegando la portada y dos páginas de servicio.
- Un correo a tu propia dirección, que algunos gestores también montan la tarjeta.
- Una publicación en borrador en la red que uses, sin llegar a publicarla.
Si en los tres sale la imagen correcta y el título correcto, está bien. Si en alguno sale el recuadro gris, ya sabes por dónde empezar.
Qué hacer si tu web la hizo otro
Es un encargo pequeño y muy concreto, así que se puede pedir tal cual: «quiero las etiquetas Open Graph en todas las páginas, con una imagen de 1200 por 630 por sección». Quien lleve tu web lo entenderá a la primera, y si no lo entiende, ya sabes algo más.
Lo que revisamos nosotros
En las webs que llevamos, esto entra en el mantenimiento: que cada página tenga sus cuatro etiquetas, que la imagen exista y pese poco, que el favicon esté puesto y que al cambiar algo se compruebe en un chat antes de dar el trabajo por terminado. Qué más incluye ese mantenimiento está en mantenimiento web: qué incluye.
Cuánto cuesta tener bien la vista previa al compartir
Si tu web la llevamos nosotros, nada aparte: va dentro de la cuota. En nuestros precios, Tu Landing son 100 € al mes y Tu Web 200 €, más IVA y sin permanencia, con dominio, alojamiento, correo y mantenimiento incluidos; los planes de presencia son de 400, 750 y 1.500 € al mes.
Y si la lleva otro, tampoco debería ser un proyecto: es media tarde de trabajo bien aprovechada.
Desde Sant Antoni de Calonge, con negocios de Girona y Barcelona
Si quieres salir de dudas, haz la prueba del chat contigo mismo y mándanos la captura por el formulario de contacto o por WhatsApp. Te decimos en un rato si es cosa de cuatro líneas o hay algo más de fondo.
Cuéntanos qué necesitas y te damos un precio
Respondemos el mismo día. Sin compromiso y sin discursos.