← Todos los artículos

Cómo hacer que tu enlace se vea bien en WhatsApp, Facebook y LinkedIn

Por Gilberto Arenas · · 5 min de lectura

Pegas el enlace de tu sitio en un grupo de WhatsApp y aparece sin foto, con el título "Inicio" y una descripción que no tiene nada que ver con tu negocio. O peor: con la foto de un banner de una promoción que terminó hace meses. Esa vista previa la deciden unas etiquetas invisibles llamadas Open Graph, y en nuestro estudio de 390 sitios el 27 % no tenía la imagen definida. Configurarlas bien toma unos minutos.

Qué es Open Graph

Es un estándar creado por Facebook que hoy usan casi todas las aplicaciones que muestran vistas previas de enlaces: WhatsApp, Facebook, LinkedIn, Telegram, Slack, Discord y muchas más. Son etiquetas <meta> en el HTML de la página que dicen qué título, qué descripción y qué imagen mostrar cuando alguien comparte ese enlace.

Las cuatro básicas son:

<meta property="og:title" content="Panadería artesanal en Chapinero | El Trigal">
<meta property="og:description" content="Pan de masa madre horneado cada mañana. Pedidos por WhatsApp.">
<meta property="og:image" content="https://www.eltrigal.com/compartir.jpg">
<meta property="og:url" content="https://www.eltrigal.com/">

Si faltan, cada aplicación improvisa: toma el título de la página, la primera imagen que encuentra (que puede ser el logo diminuto o un ícono) y cualquier texto como descripción.

X (Twitter) usa sus propias etiquetas, twitter:card y similares, pero si no las encuentra suele recurrir a las de Open Graph. Con agregar <meta name="twitter:card" content="summary_large_image"> le pides que muestre la imagen grande.

La imagen: tamaño y contenido

  • Tamaño recomendado: 1200 × 630 píxeles (proporción aproximada de 1,91 a 1). Es el estándar que funciona bien en Facebook, LinkedIn y WhatsApp.
  • Peso: menos de 300 KB. WhatsApp puede no mostrar imágenes muy pesadas. Comprímela como explicamos en cómo optimizar las imágenes de tu web.
  • Formato: JPG o PNG. Algunas aplicaciones todavía no muestran WebP en las vistas previas, así que aquí conviene el formato clásico.
  • Dirección completa: la URL de la imagen debe empezar por https://, no ser una ruta relativa.
  • Deja margen: algunas aplicaciones recortan los bordes o muestran la imagen en cuadrado. Mantén el logo y el texto importante en el centro.

¿Qué poner en la imagen? Lo que haría que alguien quiera tocar el enlace: tu producto estrella, la fachada de tu local o una imagen con el nombre de tu negocio y una frase corta. Evita el texto pequeño: en un celular no se lee.

Una imagen distinta para cada página importante

Lo ideal es que cada página tenga su propia vista previa: la de un producto, con la foto del producto; la de un artículo, con su imagen principal. Así, cuando alguien comparte una página concreta, la vista previa tiene sentido. Como mínimo, asegúrate de que la página de inicio y las de servicios tengan una buena imagen.

Cómo configurarlas según tu plataforma

  • WordPress: los plugins de SEO más usados agregan las etiquetas Open Graph automáticamente. En cada página o entrada, busca la pestaña "Social" o "Redes sociales" del recuadro del plugin para elegir una imagen y un texto específicos. En la configuración general del plugin puedes definir una imagen por defecto para las páginas que no tengan una.
  • Shopify: en la configuración de la tienda (Preferencias) puedes subir una imagen para compartir en redes. Los productos usan su foto principal.
  • Wix: en la configuración SEO de cada página hay una sección de redes sociales para la imagen y el texto.
  • Sitios a medida o hechos con IA: pide que se agreguen las etiquetas en el <head> de cada página. En Next.js, por ejemplo, se definen en la metadata de cada ruta, o con un archivo de imagen especial que genera la vista previa automáticamente.

Por qué WhatsApp sigue mostrando la imagen vieja

Las aplicaciones guardan en caché la vista previa de cada enlace durante un tiempo. Si cambiaste la imagen y sigue apareciendo la anterior:

  1. Facebook: usa el Depurador de contenido compartido de Facebook para desarrolladores (developers.facebook.com/tools/debug). Pega tu URL y pulsa Volver a extraer. Te muestra también qué etiquetas encontró y si hay errores. Como WhatsApp es de la misma empresa, a veces esto también ayuda con WhatsApp.
  2. LinkedIn: tiene su propia herramienta, el Post Inspector (linkedin.com/post-inspector), que actualiza la vista previa.
  3. WhatsApp: no tiene una herramienta pública. Un truco para comprobar la imagen nueva es compartir el enlace con un parámetro al final, por ejemplo tunegocio.com/?v=2. WhatsApp lo trata como un enlace nuevo y genera la vista previa desde cero. La caché del enlace original se renovará con el tiempo.

Cómo comprobar las tuyas

  1. Pega tu enlace en el Depurador de Facebook y revisa la vista previa y las etiquetas detectadas.
  2. Envíatelo por WhatsApp, a ti mismo o a un grupo de prueba.
  3. Corre nuestra auditoría gratis: en la sección de redes sociales verás si tu página tiene las etiquetas Open Graph y Twitter Card.

Lista rápida

  • og:title con un título atractivo, no solo el nombre de la marca.
  • og:description con una frase que invite a abrir el enlace.
  • og:image de 1200 × 630, menos de 300 KB, con URL completa.
  • twitter:card con el valor summary_large_image.
  • Una vista previa propia para las páginas que más compartes.

Un enlace con una vista previa clara y atractiva recibe más clics que uno sin foto. Y como la mayoría de las recomendaciones de negocios hoy pasan por WhatsApp, vale la pena hacerlo bien.