Compartes un enlace de tu web en LinkedIn, WhatsApp o por correo y la vista previa muestra un recorte incoherente, un título genérico o una imagen que no tiene nada que ver con la página. El visitante duda, no hace clic y pierdes tráfico antes de que cargue tu diseño. No es casualidad: casi siempre fallan las etiquetas Open Graph y meta sociales del <head>.
Con campañas de noviembre y temporadas altas, cada enlace compartido cuenta. Te explicamos qué etiquetas necesitas, cómo probarlas y qué errores conviene corregir ya en producción.
Qué controlan Open Graph y las meta sociales
Cuando pegas una URL, la red social o la app de mensajería no «lee» tu web como un navegador: descarga un conjunto mínimo de metadatos. Open Graph (Facebook, LinkedIn, WhatsApp en muchos casos) y twitter:card definen el título, la descripción y la imagen del enlace.
Si faltan o están mal, la plataforma inventa: coge el primer <h1>, un párrafo cualquiera o la primera imagen grande que encuentre. El resultado suele ser feo, truncado o fuera de marca.
Las etiquetas imprescindibles en cada plantilla
En páginas clave —inicio, servicios, landings de campaña y entradas del blog— revisa al menos esto:
- og:title y og:description: texto pensado para compartir, no solo para SEO.
- og:image con URL absoluta HTTPS, proporción recomendada 1200×630 px y peso razonable.
- og:url alineada con la URL canónica de la página.
- og:type (
websiteoarticleen blog). - twitter:card en
summary_large_imagesi quieres imagen grande en X.
Imagen social: el error que más clics cuesta
La imagen Open Graph es el anuncio visual de tu enlace. Errores frecuentes:
- Rutas relativas (
/storage/...sin dominio) que funcionan en el navegador pero fallan en crawlers externos. - Logos diminutos o capturas de pantalla con mucho texto ilegible.
- Reutilizar la misma imagen en todas las páginas y confundir al usuario.
- Olvidar actualizar la og:image al cambiar la oferta de una landing estacional.
Define una imagen por URL importante o por tipo de página, con el mismo criterio que ya aplicas al marcado Schema.org: coherencia entre lo que prometes al compartir y lo que encuentra quien entra.
Cómo probar antes de lanzar una campaña
No publiques una landing de campaña sin validar la vista previa:
- Usa el depurador de Meta (Sharing Debugger) y el validador de LinkedIn para forzar una nueva lectura de caché.
- Comparte la URL en un chat privado de WhatsApp o Slack y comprueba título e imagen.
- Revisa que la URL canónica y el
og:urlcoincidan, especialmente en webs multilingües.
Relación con SEO, cookies y analítica
El título y la meta description de Google no sustituyen a Open Graph: puedes optimizar la SERP con una redacción y usar otra más comercial al compartir en redes. Eso es válido si ambas son honestas y coherentes con el contenido.
Recuerda que, tras el banner de cookies, los píxeles de remarketing en landings compartidas deben respetar el consentimiento: una vista previa atractiva que lleva a una página con scripts bloqueados puede frustrar al usuario y hundir la conversión.
Checklist rápido para tu web de empresa
- Cada plantilla genera og:title, og:description, og:image y og:url únicos o bien heredados con sentido.
- Las imágenes sociales usan HTTPS absoluto y tamaño mínimo ~1200 px de ancho.
- Entradas de blog usan og:type
articley, si puedes, fechas en Schema BlogPosting. - Tras cada despliegue de campaña, vuelves a probar la vista previa en al menos dos canales.
- Documentas qué imagen corresponde a cada landing para que marketing no comparta enlaces «viejos».
Open Graph frente a meta description: no son lo mismo
En muchas webs de empresa copian el mismo texto en meta name="description" y en og:description. Funciona como atajo, pero limita el rendimiento: en Google buscas claridad y palabras clave; en redes buscas gancho y promesa concreta en pocas líneas.
Ejemplo: la meta description puede decir «Desarrollo web y mantenimiento en Barcelona»; el og:description puede decir «¿Tu landing de campaña se ve mal al compartirla? Revisa Open Graph antes del Black Friday». Misma página, dos intenciones. Lo importante es que ninguna de las dos mienta sobre el contenido real.
WhatsApp, Telegram y correo: el canal que más ignora el diseño
En móvil, la mayoría de enlaces de empresa llegan por WhatsApp o Telegram. Esas apps usan principalmente Open Graph. Si tu og:image pesa varios megabytes o tarda en responder, el preview tarda o falla: aparece un icono roto o un recorte mínimo.
Comprueba que el servidor responde 200 a la imagen sin autenticación, sin bloquear user-agents de Facebook o WhatsApp, y que el certificado SSL es válido en toda la cadena. Un error habitual en webs recién migradas es que la og:image sigue apuntando al dominio antiguo con redirección en cadena.
Landings de campaña: una og:image por oferta
Si reutilizas la imagen de la home para una landing de «-30 % hasta el domingo», el usuario que ve el enlace en redes no percibe la urgencia. Genera una imagen editorial por campaña (foto de producto o escena real, no un banner vectorial vacío) y nómbrala de forma predecible en tu CMS.
Cuando la campaña termina, cambia og:title y og:description a mensaje neutro o devuelve 410/redirect según tu estrategia; dejar una preview de oferta caducada erosiona confianza igual que un contador de stock falso.
Implementación técnica sin romper el CMS
En Laravel, WordPress o headless, centraliza la lógica: un helper que reciba título, descripción, imagen absoluta y URL canónica. En blog, sobreescribe los valores del post. En páginas estáticas, define defaults en la plantilla y permite campos SEO en el panel.
Evita duplicar etiquetas contradictorias: si usas un plugin SEO y un theme que inyectan Open Graph por separado, acabas con dos og:image y el crawler elige al azar. Desactiva una de las dos fuentes o fusiona en una sola capa.
Medir si el arreglo mereció la pena
Tras corregir metadatos en una landing clave, compara durante dos semanas el CTR desde redes (UTM utm_medium=social) y la tasa de rebote de esas sesiones. Un preview coherente no siempre sube clics al instante, pero suele bajar rebote porque la expectativa coincide con la página.
Siguiente paso
Si la vista previa de tu home o de tu landing estacional no refleja tu propuesta en menos de dos segundos de lectura, prioriza corregir Open Graph antes de invertir más en anuncios. Un enlace bien presentado multiplica el tráfico cualificado sin tocar el diseño de la página.
¿Quieres una revisión de metadatos sociales y plantillas en tu web? Solicita presupuesto y te indicamos qué páginas corregir primero.
