Open Graph y preview social en tu web de empresa: cómo controlar cómo se ve tu contenido al compartirlo

Compartes un enlace de tu web en LinkedIn, WhatsApp o Slack y aparece una miniatura genérica, un título cortado o la foto de un artículo antiguo. Eso no es mala suerte: casi siempre significa que faltan o están mal configuradas las etiquetas Open Graph y de preview social. En aatsoft, agencia de desarrollo web en Manresa (Barcelona), auditamos webs corporativas donde el diseño funciona, pero al compartir contenido la empresa pierde credibilidad y clics.

Qué es Open Graph y por qué importa en tu web de empresa

Open Graph es un protocolo creado por Facebook (ahora Meta) que permite describir cómo debe mostrarse una URL cuando alguien la comparte en redes sociales, mensajería o herramientas de colaboración. Las etiquetas más habituales son og:title, og:description, og:image y og:url.

Cuando un usuario pega tu enlace en WhatsApp o LinkedIn, la plataforma lee esas etiquetas y construye la tarjeta de previsualización: imagen, titular y descripción. Si no existen, el sistema intenta adivinar el contenido rascando la página. El resultado suele ser impredecible: logo pequeño, texto irrelevante o imagen recortada.

Para una empresa, cada enlace compartido es una micro landing page. Un preview social bien configurado transmite profesionalidad, refuerza tu identidad de marca y aumenta la probabilidad de que alguien haga clic.

Señales de que tu preview social está mal configurado

• Al compartir una URL aparece una imagen distinta a la del artículo o producto
• El título se corta o muestra el nombre genérico del sitio («Inicio — Empresa X»)
• La descripción repite el menú de navegación o un texto legal del pie de página
• WhatsApp o LinkedIn tardan en actualizar la miniatura aunque hayas cambiado la imagen
• Páginas distintas comparten la misma imagen OG genérica
• En móvil la tarjeta se ve sin imagen o con icono roto
• No has definido twitter:card y en X/Twitter el preview es pobre

Si reconoces dos o más de estos síntomas, conviene auditar tus meta tags antes de invertir más en contenido o campañas de redes sociales.

Las etiquetas esenciales que debe tener cada página

Open Graph básico

• og:title — Titular específico de la página, distinto del H1 si conviene acortarlo para redes
• og:description — Resumen persuasivo de 150-200 caracteres, alineado con la intención de la URL
• og:image — URL absoluta de la imagen de preview (no relativa)
• og:url — URL canónica de la página, coherente con la etiqueta canonical
• og:type — website para home, article para blog, product para fichas
• og:locale — Idioma de la página (es_ES, en_US, ca_ES)

Twitter / X Cards

Aunque el nombre haga referencia a Twitter, estas etiquetas también influyen en otras plataformas:

• twitter:card — Usa summary_large_image para imagen grande
• twitter:title y twitter:description — Pueden coincidir con OG o adaptarse
• twitter:image — Misma imagen que og:image o una variante optimizada

Complementa OG con buenos meta títulos y meta descripciones: Google y las redes no comparten el mismo algoritmo, pero partir de una base coherente ahorra trabajo.

Cómo debe ser la imagen og:image

La imagen de preview social es el elemento visual que más impacto tiene al compartir. Recomendaciones prácticas para webs de empresa:

• Proporción: 1.91:1 (1200×630 px es el estándar más seguro)
• Peso: por debajo de 300 KB si es posible, sin perder legibilidad
• Contenido: mensaje claro, marca visible, sin texto diminuto en los bordes (WhatsApp recorta)
• Formato: JPG o PNG; evita SVG porque muchas plataformas no lo renderizan
• URL absoluta: https://tudominio.com/storage/blog/imagen.jpg, no /storage/...

Si ya trabajas la optimización de imágenes, aplica los mismos criterios a las OG: calidad visual con peso controlado.

Cómo auditar tu preview social paso a paso

1. Inspecciona el código fuente de cada plantilla clave (home, servicios, blog, fichas) y localiza las etiquetas OG
2. Usa depuradores oficiales: Meta Sharing Debugger, LinkedIn Post Inspector, Twitter Card Validator
3. Comparte en entorno real: pega la URL en WhatsApp y Telegram antes de una campaña
4. Comprueba URLs absolutas en og:image y og:url, especialmente en entornos multilingües
5. Verifica coherencia con canonical y hreflang si tienes web en varios idiomas
6. Documenta plantillas para que cada nueva landing o entrada de blog herede tags correctos
7. Revisa tras cambios de diseño — un rediseño puede romper rutas de imagen sin que lo notes en el navegador

Integra esta auditoría con tu revisión periódica en Google Search Console: no miden lo mismo, pero detectar inconsistencias entre SEO y social evita sorpresas.

Errores frecuentes en webs corporativas

Una sola imagen OG para todo el sitio

La home puede usar una imagen genérica de marca, pero cada artículo, caso de éxito o landing de campaña necesita su propia og:image. Si no, todos los enlaces compartidos parecen iguales.

Imágenes demasiado pequeñas o verticales

Un logo cuadrado de 200 px se verá borroso o con bandas vacías. LinkedIn y Facebook prefieren horizontal.

Caché de plataformas sin invalidar

Meta y LinkedIn cachean el preview. Tras corregir etiquetas, usa sus herramientas de depuración para forzar la recarga.

Confundir Open Graph con datos estructurados

Los datos estructurados Schema ayudan a Google; Open Graph ayuda a redes y mensajería. Son complementarios, no sustitutos.

Etiquetas duplicadas o contradictorias

Plugins, CMS y código manual pueden generar dos og:title distintos. El crawler se queda con uno al azar.

Qué pierde tu empresa si ignoras el preview social

• Menos clics en enlaces compartidos por empleados, clientes o prensa
• Imagen de marca inconsistente entre canales digitales
• Desperdicio de contenido — un buen artículo con preview pobre no despega en LinkedIn
• Menor confianza en campañas de email marketing o newsletters con enlaces «rotos» visualmente
• Problemas en campañas pagadas cuando el tráfico social aterriza con expectativas distintas a la tarjeta mostrada

Checklist rápido antes de publicar una nueva página

• ¿og:title describe la página en menos de 60 caracteres?
• ¿og:description invita al clic sin repetir el menú?
• ¿og:image existe, carga con HTTP 200 y mide al menos 1200×630 px?
• ¿og:url coincide con la URL canónica?
• ¿twitter:card está en summary_large_image?
• ¿Has probado el enlace en WhatsApp y LinkedIn?

Conclusión: tu web también se vende en el enlace compartido

Open Graph no es un detalle técnico menor: es la carta de presentación de cada URL fuera de tu dominio. Configurarlo bien lleva pocas horas de implementación y revisión, pero el retorno se multiplica cada vez que alguien comparte tu contenido.

En aatsoft ayudamos a empresas de Manresa, Barcelona y toda Cataluña a revisar meta tags, previews sociales y SEO técnico para que cada enlace transmita la misma calidad que la web. Solicita presupuesto gratis y revisamos cómo se ve tu sitio al compartirlo.