Compartes el enlace de tu propia web en un grupo de WhatsApp y aparece sin imagen, con el nombre del dominio a secas y, si tienes suerte, una frase que no tiene nada que ver con lo que querías comunicar. Es uno de esos pequeños desastres de primera impresión que casi nadie se molesta en arreglar, porque casi nadie sabe por qué está pasando.
Quién decide qué se ve al compartir un enlace
Cuando una plataforma —WhatsApp, LinkedIn, Twitter, Facebook, Slack— muestra una vista previa de un enlace, no está "mirando" tu web como lo haría una persona. Está leyendo un conjunto específico de etiquetas en el código de la página, pensadas exactamente para esto: las etiquetas Open Graph, un estándar que Facebook propuso hace más de una década y que terminó adoptando prácticamente todo el ecosistema de redes sociales y aplicaciones de mensajería.
Si esas etiquetas no están, o están mal rellenadas, cada plataforma improvisa como puede: a veces coge el título de la pestaña, a veces la primera imagen que encuentra en la página, a veces no encuentra nada y muestra solo el enlace desnudo.
Las etiquetas que de verdad importan
No hace falta memorizar la especificación completa. Con cuatro etiquetas bien puestas en el <head> de cada página se resuelve el 90% de los casos:
og:title — el título que se muestra en la vista previa. Puede ser distinto del título SEO si conviene: uno está pensado para el buscador, el otro para captar la atención en un feed social.
og:description — el texto breve que acompaña al título. Aquí es donde se pierde la primera impresión más a menudo: si no se define, muchas plataformas recurren a las primeras palabras del contenido, que rara vez están escritas para funcionar como reclamo.
og:image — la imagen que se muestra. Esta es, con diferencia, la que más impacto tiene en si alguien hace clic o se desplaza sin mirar. Un enlace sin imagen, en un feed lleno de enlaces con imagen, pierde casi toda su visibilidad.
og:url — la dirección canónica de la página, para que la plataforma sepa exactamente a qué URL está asociada esa vista previa, incluso si el enlace compartido llevaba parámetros adicionales.
El tamaño de imagen que casi nadie acierta a la primera
Aquí está el detalle técnico que genera más vistas previas rotas o recortadas de forma rara: la proporción recomendada para og:image es 1200×630 píxeles — una proporción bastante más ancha que alta. Si subes una imagen cuadrada, o una vertical pensada para Instagram, la plataforma la recorta como puede, y el resultado casi siempre pierde justo la parte de la imagen que tenía la información importante.
Twitter (X) quiere lo suyo, además
Twitter — hoy X — define su propio conjunto de etiquetas, llamadas Twitter Cards, que en la práctica se solapan bastante con Open Graph pero no son exactamente lo mismo. La buena noticia es que, si no defines las etiquetas de Twitter, la plataforma suele recurrir a las de Open Graph como respaldo. La etiqueta twitter:card con el valor summary_large_image es la que determina si la vista previa se muestra con una imagen grande o en miniatura.
Cómo comprobar que de verdad funciona
No hace falta esperar a compartir el enlace de verdad para descubrir que algo está mal. Herramientas como el Facebook Sharing Debugger o el validador de tarjetas de Twitter muestran exactamente cómo va a verse tu enlace antes de publicarlo en ningún sitio, y además señalan qué etiqueta falta o está mal formada. Vale la pena revisarlo cada vez que cambias el título o la imagen principal de una página importante, porque algunas plataformas guardan en caché la vista previa durante días, y un cambio reciente puede no reflejarse hasta forzar una nueva lectura.
Las etiquetas Open Graph no afectan al posicionamiento en buscadores ni a cómo se ve tu web para quien la visita directamente. Afectan a algo igual de importante y mucho más fácil de pasar por alto: la primera impresión que da tu web antes de que nadie haya hecho clic en ella.
