Saltar al contenido
SEO Toolkit

· SEO Toolkit

Open Graph y Twitter Cards: cómo se ve tu web cuando la comparten (guía 2026)

Cuando alguien comparte tu enlace en WhatsApp, LinkedIn, Facebook o X, las etiquetas Open Graph deciden si se ve atractivo o feo. Guía completa con ejemplos y solucionador de problemas.

Compartes el enlace de tu última landing en LinkedIn. Esperabas una previsualización con foto, título atractivo y descripción persuasiva. Lo que sale: una URL pelada, sin imagen, con el título cortado a la mitad. Casi nadie clica.

Esto pasa constantemente en webs profesionales que se han olvidado de configurar Open Graph y Twitter Cards. Dos protocolos con nombres feos pero que deciden literalmente cómo se presenta tu marca cada vez que alguien comparte tu enlace.

En esta guía te explico qué son, cómo configurarlos correctamente en cualquier web, qué tamaños y tipos funcionan en cada red, y los errores típicos que destrozan tu presencia social.

Qué son Open Graph y Twitter Cards

Open Graph

Open Graph (OG) es un protocolo creado por Facebook (Meta) en 2010 que estandariza cómo las plataformas sociales y de mensajería leen el contenido de una URL.

Cuando alguien comparte un enlace en:

  • Facebook
  • LinkedIn
  • WhatsApp
  • Telegram
  • Discord
  • Slack
  • Pinterest
  • Casi cualquier otra red social

…la plataforma busca etiquetas og: en el <head> de tu HTML y las usa para construir la tarjeta de previsualización: imagen, título, descripción, URL.

Sin Open Graph, la plataforma intenta adivinar (mal) qué imagen poner, qué texto mostrar, etc. Casi siempre con resultados feos.

Twitter Cards

Twitter Cards es el equivalente específico de X (Twitter), creado en 2012. Funciona de forma muy similar pero con sus propias etiquetas (twitter:).

Twitter puede hacer fallback a Open Graph si no encuentra Twitter Cards, pero la presentación queda peor. Lo correcto es tener ambos.

Por qué importan tanto

En SEO indirecto

Aunque Google no usa Open Graph como factor de ranking directo, sí afecta a tu SEO de varias formas:

  1. Más clics desde redes sociales = más tráfico = más señales positivas.
  2. Mejor presentación de marca = más recall = más búsquedas de marca.
  3. Engagement social (likes, shares) = señales de autoridad indirectas.

En CTR de redes sociales

Estudios muestran que un enlace con tarjeta visual completa (imagen + título + descripción) recibe entre 3x y 7x más clics que un enlace pelado.

Si compartes tu contenido en redes y no tienes Open Graph configurado, estás dejando 70-85% de los clics potenciales en la mesa.

En presentación de marca

Una tarjeta bien hecha comunica calidad. Una tarjeta rota o sin imagen comunica abandono.

En contextos B2B (LinkedIn especialmente), la tarjeta de tu enlace es la cara de tu empresa ante posibles clientes, partners e inversores.

Las 4 etiquetas Open Graph esenciales

<meta property="og:title" content="Título de la página">
<meta property="og:description" content="Descripción atractiva">
<meta property="og:image" content="https://miweb.com/imagen-og.jpg">
<meta property="og:url" content="https://miweb.com/pagina">

og:title

El título que aparecerá en la tarjeta. Suele coincidir con tu <title> HTML, pero puedes optimizarlo de forma diferente para redes (más persuasivo, menos “SEO”).

Reglas:

  • Máximo 70 caracteres (más allá se trunca).
  • Sin keyword stuffing.
  • Persuasivo, no descriptivo.
✅ "7 herramientas SEO gratis que usan los pros (todas en español)"
❌ "Inicio | MiWeb"

og:description

La descripción breve. Aparece debajo del título.

Reglas:

  • Máximo 200 caracteres (LinkedIn corta a 100 en algunos casos).
  • Beneficio + call-to-action implícito.
  • Sin sonar desesperada (“¡Compra ya!“).
✅ "Audita, genera meta tags, valida schema y mide tu velocidad. Sin
registro, sin límites. Empieza gratis."
❌ "Esta es nuestra página principal donde tenemos información."

og:image

La imagen que aparece grande en la tarjeta. El elemento más importante — es lo que decide el clic.

Reglas:

  • Tamaño recomendado: 1200×630 píxeles (ratio 1.91:1).
  • Formato: JPG o PNG (WebP funciona pero a veces falla).
  • Peso: < 1 MB ideal, < 5 MB máximo (Facebook lo limita).
  • URL absoluta (con https://).
  • Imagen accesible públicamente (no detrás de auth).

Por página debería ser una imagen única: la imagen del producto, la portada del post, una composición específica…

og:url

La URL canónica de la página.

Reglas:

  • URL absoluta con https://.
  • Coincide con la URL de la página (o la canonical si son distintas).
  • Sin parámetros UTM (los parámetros de tracking no van aquí).

Etiquetas Open Graph adicionales

<meta property="og:type" content="website">
<meta property="og:locale" content="es_ES">
<meta property="og:site_name" content="Mi Web">

og:type

Define el tipo de contenido. Valores comunes:

  • website — para páginas estáticas y generales.
  • article — para posts de blog y artículos.
  • product — para fichas de producto.
  • profile — para páginas de perfil.

Algunos plugins SEO permiten más tipos (book, music, video, etc.).

og:locale

El idioma del contenido. Valores comunes en hispanohablantes:

  • es_ES — español de España
  • es_MX — español de México
  • es_AR — español de Argentina
  • pt_BR — portugués de Brasil

og:site_name

El nombre de tu sitio (no el título del post). Aparece en algunas redes encima del título.

Site name: "Mi Blog SEO"
↑
Título: "Cómo hacer SEO en 2026"
Descripción: "Guía completa para principiantes..."

Las 4 etiquetas Twitter Cards esenciales

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Título">
<meta name="twitter:description" content="Descripción">
<meta name="twitter:image" content="https://miweb.com/imagen.jpg">

twitter:card

Define el tipo de tarjeta. Las dos opciones que importan:

  • summary_large_image — tarjeta con imagen grande arriba (recomendado el 95% de las veces).
  • summary — tarjeta con miniatura cuadrada pequeña a la izquierda.
summary_large_image:
[========= IMAGEN GRANDE =========]
Título
Descripción

summary:
[IMG] Título
      Descripción

summary_large_image genera 2-3 veces más clics. Úsalo siempre que tengas una buena imagen disponible.

twitter:title, twitter:description, twitter:image

Como sus equivalentes de Open Graph, pero específicos de Twitter. Si quieres optimizar el copy de forma diferente para Twitter, esta es tu oportunidad.

Si te da igual y prefieres usar lo mismo que Open Graph, pon los mismos valores.

twitter:site (opcional)

El handle de tu marca en X/Twitter. Aparece en la tarjeta como “vía @tu_marca”.

<meta name="twitter:site" content="@miweb">

Solo úsalo si tienes cuenta activa.

Tamaños y formatos por red social

Facebook

  • Imagen: 1200×630 px (ratio 1.91:1).
  • Título: hasta 100 caracteres visibles.
  • Descripción: hasta 200 caracteres visibles.
  • Caché agresivo: si cambias la imagen, usa el Sharing Debugger para purgar.

LinkedIn

  • Imagen: 1200×627 px (casi idéntico a FB).
  • Título: hasta 70 caracteres.
  • Descripción: hasta 100 caracteres (¡corta!).
  • Caché: 7 días. Usa el LinkedIn Post Inspector para forzar refresh.

X / Twitter

  • Imagen summary_large_image: 1200×675 px (ratio 16:9), mínimo 600×314.
  • Imagen summary: 144×144 px mínimo (cuadrada).
  • Título: hasta 70 caracteres.
  • Descripción: hasta 200 caracteres.

WhatsApp

  • Imagen: cualquier tamaño, escala a la pantalla.
  • Título: aprox 60 caracteres.
  • Descripción: aprox 100 caracteres.
  • Imagen mínima: 300×200 (más pequeño se ignora).

Pinterest

  • Imagen vertical recomendada: 1000×1500 px (ratio 2:3).
  • Pero también funciona la imagen horizontal estándar.

Discord, Slack, Telegram

  • Usan Open Graph estándar.
  • Imagen 1200×630 funciona perfecto.

El tamaño universal: 1200×630

Si solo vas a tener una imagen Open Graph para tu web, hazla 1200×630 píxeles y olvídate. Funciona perfectamente en:

  • ✅ Facebook
  • ✅ LinkedIn (acepta 1200×627, casi idéntico)
  • ✅ Twitter summary_large_image
  • ✅ WhatsApp, Telegram, Discord
  • ✅ Slack
  • ⚠️ Pinterest (acepta pero prefiere vertical)

Cómo implementar Open Graph en tu CMS

WordPress

Si usas un plugin SEO (Yoast, Rank Math, SEOPress), ya tienes Open Graph configurado automáticamente. Solo asegúrate de:

  1. Subir una imagen destacada a cada post (será la og:image).
  2. Configurar el título y descripción social en la metabox del plugin (puede ser distinto al SEO).
  3. Verificar con Facebook Debugger que se ve bien.

Shopify

Shopify genera Open Graph automáticamente desde el tema. Si quieres personalizarlo:

  1. Edita theme.liquid y añade tus etiquetas custom en el <head>.
  2. Asegúrate de que cada producto tiene imagen destacada en alta resolución.

Web custom

Añade en el <head> de cada página:

<!-- Open Graph -->
<meta property="og:title" content="Título">
<meta property="og:description" content="Descripción">
<meta property="og:image" content="https://miweb.com/og-image.jpg">
<meta property="og:url" content="https://miweb.com/pagina">
<meta property="og:type" content="website">
<meta property="og:locale" content="es_ES">
<meta property="og:site_name" content="Mi Web">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Título">
<meta name="twitter:description" content="Descripción">
<meta name="twitter:image" content="https://miweb.com/og-image.jpg">

Generador rápido

Si solo necesitas las etiquetas para una página puntual, usa nuestro Generador de Meta Tags + Preview SERP. Te genera todo el HTML al instante con preview de cómo se verá en Google, Facebook y X.

Cómo probar tu implementación

Antes de compartir tu enlace en una red social importante, valídalo con la herramienta oficial:

Facebook Sharing Debugger

developers.facebook.com/tools/debug/

  • Pega tu URL.
  • Te muestra exactamente cómo se verá en Facebook.
  • Detecta errores (imagen no accesible, etiquetas mal formadas).
  • Bonus: te permite purgar la caché si has cambiado la imagen.

LinkedIn Post Inspector

linkedin.com/post-inspector/

  • Igual que el de Facebook pero para LinkedIn.
  • Útil para forzar el refresh tras cambios.

Twitter Card Validator

X retiró la herramienta oficial en 2023. Alternativas:

  • Cardyb (cardyb.b-cdn.net) — clon no oficial pero funciona.
  • OpenGraph.xyz — preview multi-plataforma.
  • Twitter app móvil — pega la URL y verás la tarjeta real.

Validador multi-plataforma

Hay generadores de preview tipo opengraph.xyz que te muestran cómo se verá tu URL en varias plataformas a la vez. Útil para auditoría rápida.

Errores comunes en Open Graph

1. Sin og:image (la imagen no aparece)

Síntoma: tu enlace se comparte sin imagen.

Causa: falta la etiqueta og:image o la URL no es accesible.

Solución:

  • Añade la etiqueta con URL absoluta y accesible públicamente.
  • Sube la imagen a un host público, no a un servicio privado (Google Drive, Dropbox).

2. Imagen demasiado pequeña

Síntoma: Facebook muestra la imagen muy pequeña o como icono.

Causa: la imagen es < 600×315 px.

Solución: sube imágenes mínimo 1200×630.

3. Caché agresiva

Síntoma: cambias la imagen pero sigues viendo la antigua.

Causa: Facebook, LinkedIn y otros cachean agresivamente las previsualizaciones.

Solución:

  • Usa el Sharing Debugger para forzar el refresh.
  • O cambia el nombre del archivo de imagen (de og.jpg a og-v2.jpg).

4. URL en og:url no coincide con la real

Síntoma: las plataformas redirigen a otra página al hacer clic.

Causa: og:url apunta a una URL distinta a la actual.

Solución: asegúrate de que og:url coincide con la URL de la página visible.

5. Mismo og:image en todas las páginas

Síntoma: todas tus URLs en redes se ven igual.

Causa: has hardcodeado la imagen Open Graph.

Solución: una imagen distinta por página importante (post, producto, landing).

6. Texto sobre la imagen ilegible

Síntoma: la imagen tiene texto pero apenas se lee en la previsualización.

Causa: texto demasiado pequeño o con bajo contraste.

Solución:

  • Texto mínimo 36-48px.
  • Alto contraste (texto oscuro sobre fondo claro o viceversa).
  • Margen de seguridad del 10% por cada lado (algunas plataformas recortan).

7. Imagen Open Graph muy lejana del aspect ratio

Síntoma: la imagen aparece recortada o con franjas blancas.

Causa: ratio incorrecto (cuadradas, verticales, panorámicas).

Solución: siempre 1200×630 (1.91:1) para uso universal.

8. Información sensible en og:image

Síntoma: la imagen Open Graph se filtra a buscadores y aparece en Google Images.

Causa: og:image es pública por diseño.

Solución: no pongas datos sensibles en og:image (precios privados, nombres de clientes, etc.).

Cómo hacer una buena imagen Open Graph

Reglas básicas

  1. 1200×630 píxeles.
  2. Texto grande (mínimo 36px, mejor 48-72px).
  3. Alto contraste entre texto y fondo.
  4. Logo de marca en una esquina.
  5. Mensaje claro que comunique el contenido.

Template típico

┌────────────────────────────────────┐
│ [Logo]                             │
│                                    │
│   TÍTULO GRANDE Y CLARO            │
│   DEL POST O PÁGINA                │
│                                    │
│   Subtítulo o autor                │
│                                    │
│                       miweb.com    │
└────────────────────────────────────┘

Herramientas para diseñar

  • Canva — la más fácil, plantillas Open Graph listas.
  • Figma — para diseños custom y branding consistente.
  • Bannerbear, OG Image Builder — generación dinámica para sites con muchos posts.

Auto-generación dinámica

Para webs con muchos posts (blogs, e-commerce), puedes generar las imágenes Open Graph dinámicamente desde el título:

  • Cloudinary — transformaciones de imagen on-the-fly.
  • Vercel OG Image — para sites Next.js / Astro con SSR.
  • astro-og-canvas — para Astro estático.

Así cada post tiene su imagen única sin diseñarla a mano.

Open Graph para e-commerce

En tiendas online, Open Graph adquiere importancia especial:

Para fichas de producto

<meta property="og:type" content="product">
<meta property="og:title" content="Zapatillas Running X1 - 89,99€">
<meta property="og:description" content="Las zapatillas más vendidas. Talla 36-46. Envío 24h.">
<meta property="og:image" content="https://tienda.com/producto-x1.jpg">
<meta property="og:url" content="https://tienda.com/zapatillas-x1">

Para categorías

Tipo website con imagen representativa de la categoría.

Schema Product complementario

Combina Open Graph con Schema Product para máxima visibilidad: en redes Y en Google con rich snippets de precio.

Conclusión

Open Graph y Twitter Cards son una de las pocas optimizaciones SEO que:

  • Tardan 15-30 minutos en implementarse bien.
  • Funcionan automáticamente en docenas de plataformas.
  • Se mantienen años sin modificación.
  • Multiplican 3-7 veces los clics desde redes sociales.

No hay excusa para no tenerlas en 2026. Y si las tienes pero hace años que no las revisas, audita tus 5 páginas más compartidas.

Tu plan de acción

  1. Audita tu home abriendo view-source: y buscando og:. ¿Tienes las 4 esenciales?
  2. Pasa por el Facebook Sharing Debugger. ¿Se ve bien?
  3. Genera nuevas etiquetas con nuestro Generador de Meta Tags si te falta alguna.
  4. Crea una imagen Open Graph única para tus posts más importantes.
  5. Audita el resto del SEO con nuestro Analizador SEO.

Lecturas relacionadas