¿Qué es Open Graph? Guía práctica para mejorar tus previews

1) Open Graph: definición, ventajas y cómo funciona

Open Graph (OG) es un conjunto de metadatos que añadimos en el <head> de una página para que, cuando alguien comparte esa URL en redes o apps de mensajería (WhatsApp, LinkedIn, Facebook, X/Twitter, etc.), la vista previa sea consistente: título, descripción e imagen correcta.
¿El beneficio real? Mejorar el CTR social. Si el snippet refleja con claridad el beneficio de la página y el contenido se previsualiza bien, la gente hace más clic. A nivel SEO, OG no cambia rankings por sí mismo, pero sí amplifica el alcance y la tasa de clics desde social, lo que se traduce en más tráfico de calidad y señales de marca.

En España, donde WhatsApp y LinkedIn tienen mucha tracción, un OG cuidado evita “previews rotas” al compartir fichas de producto, artículos o eventos. Además, conviene ajustar el og:locale a es_ES cuando el público principal está aquí.

2) Las 4 etiquetas obligatorias (y las opcionales que sí importan)

Obligatorias:

og:title — titular legible y enfocado al beneficio.
og:type (por ejemplo article, product, website).
og:image — la miniatura; cuidaremos tamaño, peso y composición.
og:url — URL preferida para compartir (normalmente igual a la canonical).

Muy recomendables:

og:description — 1–2 frases que rematen la propuesta de valor.
og:site_name (marca o medio).
og:locale (es_ES para España; si hay varias versiones, añadid og:locale:alternate).
Equivalentes de Twitter Cards: twitter:card (usamos summary_large_image por defecto), twitter:title, twitter:description, twitter:image.

Muddle dice: Hacemos que og:title sea consistente con el title SEO pero lo optimizamos a clic para social: beneficio claro + susto cero + branding mínimo (p. ej., “– Marca” al final).

3) Open Graph vs. Twitter Cards: qué usar y cómo combinarlas

Twitter (X) entiende OG, pero su sistema brilla con Twitter Cards. La combinación ganadora para nosotros:

Mantener OG completo (las 4 obligatorias + opcionales útiles).
Añadir twitter:card=summary_large_image y sus twitter:title/description/image.
Reutilizar el mismo contenido salvo que X requiera un recorte diferente de imagen.

4) Checklist de implementación

WordPress (Yoast/RankMath)

Activar la salida OG en el plugin (evitar duplicados con el tema).
Definir plantillas para posts, páginas, categorías y productos:
- og:title → plantilla basada en título + modificador de beneficio.
- og:description → extracción de resumen con ajuste manual en piezas clave.
- og:image → imagen destacada; si no hay, fallback por tipo de contenido.
- og:url → URL preferida para compartir (normalmente igual a la canonical).
Comprobar que el tema no emite OG adicional. Si lo hace, desactivarlo desde functions.php o ajustes del tema para evitar OG duplicado.
Para sitios en España con varias regiones/idiomas, usar es_ES como principal y og:locale:alternate cuando corresponda.

Snippet orientativo (functions.php) para retirar OG del tema si hace falta:

Proyectos a medida y Next.js (metadatos por ruta)

Generar metadatos por ruta para que cada URL tenga su preview correcta (ideal para catálogos y blogs).
En Next.js App Router, podemos usar generateMetadata o la Metadata API:

// app/[slug]/page.tsx

export async function generateMetadata({ params }) {

const post = await getPost(params.slug);

return {

title: post.title,

description: post.excerpt,

openGraph: {

title: post.title,

description: post.excerpt,

url: `https://dominio.es/blog/${post.slug}`,

type: 'article',

siteName: 'Marca',

locale: 'es_ES',

images: [{ url: post.ogImage, width: 1200, height: 630, alt: post.title }],

},

twitter: {

card: 'summary_large_image',

title: post.title,

description: post.excerpt,

images: [post.ogImage],

},

};

}

Puntos que siempre cuidamos: coherencia entre title SEO y og:title, URLs absolutas, y una sola fuente de metadatos (evitar emitir OG desde múltiples capas).

5) Imágenes que convierten: tamaño, peso y composición de `og:image`

Tamaño recomendado: 1200×630 (aprox. 1.91:1). Admite variantes muy cercanas (1200×627).
Peso: mantenerlas ligeras (JPG de alta calidad o PNG optimizado).
Composición: foco en un único elemento/beneficio, poco texto, logotipo pequeño y aire alrededor.
Variantes por tipo de contenido:
- Post de blog: imagen con titular corto y apoyo visual.
- Producto: foto clara + mini claim (“Envío 24/48h en España”, si aplica).
- Categoría: composición neutra y representativa.

Muddlemetrics dice: Cuando vimos que la imagen no aparecía o salía la anterior, casi siempre fue por caché (plugin/CDN) o por dimensiones/peso no válidos. En ese caso te toca regenerar la imagen al tamaño correcto, purgar cachés y validar en los depuradores.

6) Debug y caché: qué hacer cuando la preview no cambia

Verificar que la URL de og:image es pública
Purgar cachés: primero plugin (WP Rocket/Autoptimize, etc.), luego CDN.
Usar Sharing Debugger (Facebook) y Post Inspector (LinkedIn) para forzar refresco.
Corregir duplicidad OG (tema + plugin). Nos ha pasado: al dejar una sola fuente, desaparecen los conflictos.
Confirmar que og:url es la canónica y no hay redirecciones extrañas.
Revisar HTTP status de la imagen (200 OK), tamaño y tipo MIME.

7) Plantillas por tipo de contenido (posts, categorías, productos)

Posts
- og:title: “{Título} — idea/beneficio clave”
- og:description: 120–160 caracteres; evitar cortar frase.
- og:image: imagen destacada con diseño de blog.
Categorías
- og:title: “{Nombre de la categoría} | {Marca}”
- og:description: explicar qué se encuentra ahí (útil en e-commerce).
- og:image: banner genérico de la categoría.
Productos
- og:title: “{Producto} — {atributo clave}”
- og:description: envío/garantía/devoluciones (si vendéis en España, incluir “envío 24/48h en península” cuando sea real).
- og:image: foto principal a 1200×630 con fondo limpio.

8) Playbook de CTR social: de la intención al clic

Ajustar al intent: informativo, transaccional o mixto.
Títulos que abren bucles sin caer en clickbait: “Cómo…”, “Qué es… + beneficio”, “Guía + resultado”.
Descripción con gancho: resolver el “¿por qué ahora?” (p. ej., “Incluye checklist y plantillas”).
Branding mínimo: “– Marca” al final del og:title si aporta confianza.
Consistencia: que el usuario reciba en la landing lo que la preview promete.
Local nuance (España): si el valor diferencial es local (envío, soporte en español de España, horarios CET, cumplimiento fiscal/IVA), que se note brevemente en la descripción.

9) Medición y mantenimiento: validadores, inspecciones y QA continuo

Antes de publicar: revisar OG con una checklist interna (título, descripción, imagen, URL).
Tras publicar: compartir en un canal privado de WhatsApp/Slack para ver la preview real.
Mensual: crawl rápido detectando páginas sin og:image o con imágenes pesadas.
Eventos clave (rebajas, lanzamientos): preparar imágenes OG específicas con ganchos puntuales (“-20% sólo esta semana”).
Internacional: si trabajamos con varios mercados, controlar og:locale y alternates; en España, es_ES.

FAQs

¿Cuáles son las etiquetas OG imprescindibles?

og:title, og:type, og:image, og:url. Añadimos og:description, og:site_name, og:locale y Twitter Cards para redondear.

¿OG mejora el SEO directamente?

No los rankings, pero sí el CTR social, que trae más tráfico cualificado.

¿Qué tamaño uso para og:image?

1200×630 (o 1200×627), peso optimizado y formato JPG/PNG.

¿Por qué mi imagen no cambia al compartir?

Caché (plugin/CDN) o validación pendiente en los depuradores. Purgad y reintentad.

¿Debo usar es_ES?

Si el contenido está dirigido a España, sí: ayuda a mantener coherencia de idioma/locale y, si tienes versiones por país/idioma, puedes usarog:locale:alternate.

Conclusión

Open Graph es la base para que nuestras URLs brillen al compartirse. Con las 4 etiquetas obligatorias bien cubiertas, imágenes a 1200×630 ligeras y un playbook de CTR social, evitamos sustos en WhatsApp/LinkedIn y convertimos esas vistas previas en clics y negocio. La clave está en la coherencia (SEO ↔ social), en no duplicar fuentes de OG y en validar siempre que haya cambios.