Open Graph y Twitter Cards: guía de optimización para SEO social
Cada vez que alguien comparte una URL en LinkedIn, Twitter/X, Facebook o WhatsApp, ocurre algo decisivo: la plataforma extrae metadatos de esa página y construye una previsualización. Si esos metadatos no están bien configurados, el resultado es una tarjeta rota, sin imagen, con un título cortado o, peor aún, con el texto por defecto que nadie ha optimizado. Según estudios de Buffer y Sprout Social, los contenidos compartidos con imágenes generan hasta un 150 % más de clics en redes sociales que los que aparecen sin previsualización visual. Esto no es un detalle estético: es tráfico referral perdido o ganado según la calidad de tu implementación de Open Graph y Twitter Cards.
Para directores de marketing y responsables de negocio en España, dominar estos protocolos es una palanca concreta de optimización SEO social que no requiere presupuesto publicitario, solo conocimiento técnico y criterio editorial.
---
Qué son Open Graph y Twitter Cards y por qué importan en SEO
El protocolo Open Graph
Open Graph es un protocolo desarrollado originalmente por Facebook en 2010 y hoy adoptado de forma universal por casi todas las plataformas sociales. Funciona mediante etiquetas especiales que se insertan en el de cada página HTML y que le indican a cualquier rastreador social qué título mostrar, qué imagen usar, qué descripción extraer y qué tipo de contenido es la página.
Sin estas etiquetas, plataformas como LinkedIn o WhatsApp intentan inferir esa información por su cuenta, con resultados impredecibles: pueden tomar la primera imagen del DOM (aunque sea un icono de 32px), truncar el de la página de formas extrañas o mostrar la meta descripción genérica que nadie ha revisado.
Las etiquetas Open Graph fundamentales son cuatro:
`html
`
A estas se suman otras etiquetas complementarias que marcan diferencia en la presentación:
og:type— El tipo de contenido (article,website,product, etc.). Para artículos de blog, usararticleactiva campos adicionales comoarticle:published_timeyarticle:author.og:site_name— El nombre del sitio, que algunas plataformas muestran junto al título.og:locale— El idioma del contenido, importante para audiencias en español (es_ES).
Twitter Cards: el formato propio de X
Twitter/X no lee las etiquetas Open Graph de forma directa para todos sus campos, sino que dispone de su propio sistema llamado Twitter Cards. Aunque la plataforma acepta como fallback varios tags de Open Graph, configurar las etiquetas específicas de Twitter garantiza el control total sobre la presentación.
Existen cuatro tipos de Twitter Cards:
- Summary — Una tarjeta pequeña con imagen cuadrada, título y descripción. Adecuada para artículos de blog o páginas de producto sencillas.
- Summary Large Image — El formato más usado para contenido editorial: imagen horizontal grande que ocupa la mayor parte de la tarjeta. Genera un CTR significativamente más alto.
- App — Diseñada para promocionar aplicaciones móviles con enlaces directos a tiendas.
- Player — Para contenido multimedia como vídeos o podcasts.
Para la mayoría de sitios web corporativos y blogs, la combinación óptima es summary_large_image:
`html
`
---
La relación entre Open Graph, Twitter Cards y el SEO
Señales indirectas, no directas
Google no utiliza las etiquetas Open Graph como factor de posicionamiento directo. Dicho esto, la influencia sobre el SEO es real aunque indirecta, y opera a través de varios mecanismos:
CTR desde redes sociales hacia la web. Un enlace compartido con una tarjeta visual atractiva genera más clics que uno que aparece como texto plano. Más tráfico referral de calidad mejora las métricas de comportamiento que Google sí pondera: tiempo en página, páginas por sesión y tasa de rebote.
Aumento de backlinks naturales. El contenido que se comparte de forma atractiva en redes tiene más probabilidades de ser visto por periodistas, bloggers y creadores que pueden enlazarlo desde sus propios sitios. Un estudio de Moz estimó que el contenido con alta viralidad social acumula un 22 % más de dominios de referencia en los 12 meses posteriores a su publicación.
Indexación más rápida. Los rastreadores de Google visitan con frecuencia las URLs que generan actividad en redes. Una publicación que recibe muchos clics desde Twitter/X puede ser re-rastreada e indexada más rápido que una que permanece estática.
Señales de marca. La coherencia entre el título y la descripción de una página en sus metadatos de Open Graph y su posicionamiento en Google refuerza la identidad de marca en múltiples touchpoints, lo que consolida la intención de búsqueda branded a largo plazo.
El impacto en LinkedIn: el caso del B2B en España
Para empresas B2B con audiencia en LinkedIn, la configuración correcta de Open Graph es especialmente crítica. LinkedIn dispone de su propio rastreador (LinkedInBot) que lee las etiquetas og: con un comportamiento propio: almacena en caché la previsualización durante periodos de hasta 7 días, lo que significa que un error en el momento de publicar puede perpetuarse aunque se corrija después.
Adicionalmente, LinkedIn lee el campo og:image con unas especificaciones de imagen concretas: la dimensión recomendada es de 1200 x 627 píxeles, con un tamaño máximo de 5 MB y formato JPG o PNG. Una imagen inferior a 200 x 200 píxeles es descartada automáticamente por el rastreador.
---
Cómo implementar Open Graph y Twitter Cards correctamente
Especificaciones técnicas esenciales
Antes de escribir una sola etiqueta, hay que conocer los requisitos de cada plataforma:
| Campo | Facebook/LinkedIn | Twitter/X | |
|---|---|---|---|
| Imagen recomendada | 1200 x 630 px | 1200 x 628 px | 1200 x 630 px |
| Formato imagen | JPG, PNG, GIF | JPG, PNG, GIF, WEBP | JPG, PNG |
| Tamaño máximo imagen | 8 MB | 5 MB | 300 KB |
| Título máximo (chars) | 60-90 | 70 | 65 |
| Descripción máxima | 200 | 200 | 100 |
La etiqueta og:image:width y og:image:height no son obligatorias, pero acelerar la carga de la previsualización declarando las dimensiones explícitamente es una buena práctica:
`html
`
Implementación en los CMS más comunes
WordPress — Los plugins Yoast SEO y Rank Math generan automáticamente las etiquetas Open Graph y Twitter Cards a partir de los campos configurados en cada entrada. Sin embargo, hay que revisar que la imagen social no se esté tomando por defecto de la imagen destacada cuando esta tiene proporciones inadecuadas. Lo óptimo es subir una imagen específica para redes (1200 x 630 px) diferente de la imagen de cabecera del artículo.
Prestashop / WooCommerce — En e-commerce, es fundamental configurar og:type como product y añadir campos como product:price:amount y product:price:currency, que Facebook lee para sus funciones de catálogo de productos. Sin esta configuración, los anuncios dinámicos de catálogo pueden no funcionar correctamente.
Headless / Next.js — En arquitecturas modernas, el componente de Next.js o la API de Metadata de Next.js 13+ permiten inyectar estas etiquetas por ruta. El error más común en estos entornos es no diferenciar los metadatos por página y servir las mismas etiquetas Open Graph para toda la web.
Validación: herramientas de diagnóstico
Después de implementar, la validación es obligatoria. Estas son las herramientas de referencia:
- Facebook Sharing Debugger (
developers.facebook.com/tools/debug) — Permite ver exactamente cómo Facebook y WhatsApp están leyendo tus metadatos y fuerza la actualización de la caché. - LinkedIn Post Inspector (
linkedin.com/post-inspector) — Equivalente para LinkedIn, con la opción de refrescar la caché almacenada. - Twitter Card Validator — Aunque X ha reducido su funcionalidad con los años, sigue siendo útil para verificar la lectura de etiquetas Twitter Cards.
- OpenGraph.xyz — Herramienta de terceros que simula cómo se vería el enlace en múltiples plataformas simultáneamente en una sola pantalla.
---
Errores frecuentes que cometen las empresas españolas
1. Imagen genérica o inexistente para toda la web
El error más extendido: definir una única imagen Open Graph en el del layout principal y que esa misma imagen aparezca en todos los artículos, fichas de producto y páginas de servicio. El impacto es doble: las previsualizaciones no distinguen el contenido (todo parece lo mismo) y se pierden oportunidades de comunicar visualmente el valor de cada página concreta.
La solución es implementar imágenes Open Graph dinámicas a nivel de página, ya sea mediante plantillas generadas automáticamente (herramientas como Vercel OG o la API de Cloudinary permiten generar imágenes con texto dinámico a partir de parámetros) o mediante un proceso editorial que asigne una imagen específica para redes en cada pieza de contenido.
2. Títulos y descripciones heredados del SEO sin adaptar
El título SEO y la meta descripción están optimizados para aparecer en los resultados de Google. El tono, la longitud y la estructura óptimos para una SERP son diferentes de los que funcionan mejor como previsualización en un feed de LinkedIn. En redes sociales, el tono conversacional, las cifras al inicio del título y las preguntas directas funcionan mejor que los títulos optimizados para la intención de búsqueda.
Plataformas como Yoast permiten definir campos og:title y og:description independientes del título SEO y la meta descripción, una funcionalidad que la mayoría de sitios web no aprovechan.
3. No renovar la caché en actualizaciones
Cuando se modifica un artículo o se corrige un error en los metadatos, las plataformas sociales siguen mostrando la versión en caché durante horas o días. No acudir al Sharing Debugger de Facebook o al Post Inspector de LinkedIn para forzar la actualización significa que las correcciones no tendrán efecto inmediato y que links ya compartidos seguirán mostrando la versión errónea.
4. Ignorar og:type y las propiedades específicas por tipo
Muchos sitios se quedan en las cuatro etiquetas básicas y no configuran las propiedades extendidas. Para artículos de blog, declarar og:type como article y añadir article:published_time, article:modified_time y article:author proporciona contexto adicional que algunas plataformas y herramientas de content curation aprovechan para clasificar y distribuir el contenido de forma más precisa.
---
Estrategia avanzada: Open Graph como parte del sistema de contenidos
Plantillas de imagen social escalables
Para sitios con decenas o cientos de páginas actualizadas regularmente, la creación manual de imágenes Open Graph no es escalable. La solución profesional es generar imágenes dinámicamente mediante servicios como:
- Cloudinary con transformaciones de texto — Permite definir una plantilla base y añadir el título de cada página como capa de texto dinámica mediante parámetros en la URL.
- Vercel OG Image Generation — Para proyectos en Next.js, genera imágenes PNG mediante código React en el servidor, con tipografías, colores y estructuras definidas en la plantilla.
- Bannerbear o Placid — Servicios SaaS que ofrecen APIs para generar imágenes de marca de forma automática a partir de variables.
Medición del impacto en Google Analytics 4
En GA4, el tráfico desde redes sociales aparece bajo la fuente referral o, si las URLs llevan parámetros UTM, bajo la dimensión de campaña correspondiente. Para medir el impacto real de una mejora en los metadatos Open Graph, la metodología correcta es:
- Registrar el tráfico referral de cada plataforma social durante 4 semanas antes del cambio.
- Implementar las mejoras de Open Graph y Twitter Cards.
- Medir durante las 4 semanas posteriores con las mismas condiciones de publicación.
- Comparar tanto el volumen de sesiones referral como el CTR implícito (impressions de Google Search Console para queries branded aumentan cuando el contenido genera notoriedad en redes).
Una mejora del 15-30 % en el CTR desde redes sociales tras una optimización de Open Graph es un resultado razonable y documentado en proyectos de SEO técnico.
---
Checklist de implementación para responsables de marketing
Antes de dar por completada la optimización de Open Graph y Twitter Cards en tu sitio, verifica estos puntos:
- [ ] Cada página tiene un
og:titleúnico y diferente del title SEO cuando corresponde - [ ] Cada página tiene un
og:descriptionadaptado al tono de redes sociales - [ ] Cada página tiene una
og:imagede 1200 x 630 px específica (o generada dinámicamente) - [ ] El campo
og:urlapunta a la URL canónica de la página (sin parámetros UTM) - [ ]
og:typeestá definido correctamente por tipo de contenido - [ ] Las etiquetas
twitter:card,twitter:title,twitter:descriptionytwitter:imageestán configuradas - [ ] La imagen social ha sido validada en Facebook Sharing Debugger y LinkedIn Post Inspector
- [ ] Los artículos del blog usan
article:published_timeyarticle:author - [ ] Las fichas de producto en e-commerce usan las propiedades de
og:type = product - [ ] Existe un proceso para actualizar la caché social tras modificaciones de contenido
---
Conclusión
La optimización de Open Graph y Twitter Cards para SEO social no es una tarea de una sola vez: es una disciplina que requiere criterio editorial, conocimiento técnico y un proceso de validación continuo. Para cualquier empresa que dependa del contenido como canal de captación, invertir en esta capa de metadatos es una de las palancas con mejor retorno relativo: no requiere inversión publicitaria, impacta en todos los canales sociales simultáneamente y mejora de forma directa el CTR de los contenidos compartidos.
En un entorno donde el 73 % de los profesionales de marketing B2B en España usan LinkedIn como canal de distribución de contenido (dato de IAB Spain 2024), una tarjeta social rota o sin imagen no es un detalle menor: es una oportunidad de negocio desaprovechada en cada publicación.
---
¿Quieres una auditoría técnica de los metadatos sociales de tu sitio? En Comunicua revisamos la implementación de Open Graph, Twitter Cards y todos los elementos de SEO técnico que afectan a tu visibilidad orgánica y social. Contacta con nuestro equipo en comunicua.com/contacto y cuéntanos tu proyecto.