Cuando alguien comparte un enlace de tu sitio en LinkedIn, Facebook, Twitter o WhatsApp, la plataforma genera una "card" con imagen, título y descripción. Si no has configurado Open Graph ni Twitter Cards, la plataforma elige estos elementos de forma automática — y suele elegir mal. El resultado: previsualizaciones sin imagen, con el título incorrecto o con texto irrelevante.
Qué es Open Graph (OG)
Open Graph es un protocolo creado por Facebook en 2010 que permite a cualquier página web definir cómo debe aparecer cuando se comparte en redes sociales. Lo usan Facebook, LinkedIn, WhatsApp, Telegram, Slack y la mayoría de plataformas que generan previsualizaciones de enlaces.
Las etiquetas Open Graph esenciales
<head> <!-- Básico: requerido para una card completa --> <meta property="og:title" content="Título que aparece en la card social" /> <meta property="og:description" content="Descripción de 2-3 líneas visible en la preview." /> <meta property="og:image" content="https://ejemplo.com/imagen-og.jpg" /> <meta property="og:url" content="https://ejemplo.com/pagina/" /> <meta property="og:type" content="article" /> <!-- Recomendado: mejora la card --> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="Descripción de la imagen para accesibilidad" /> <meta property="og:site_name" content="Nombre de tu sitio" /> <meta property="og:locale" content="es_ES" /> </head>
Especificaciones de la imagen Open Graph
La imagen es el elemento más impactante de la card social. Una imagen mal dimensionada se recorta, se pixela o se muestra de forma incorrecta.
| Especificación | Valor recomendado | Notas |
|---|---|---|
| Dimensiones | 1200 × 630 píxeles | Ratio 1.91:1 — se muestra correctamente en todas las plataformas |
| Formato | JPG o PNG | JPG para fotos, PNG para diseños con texto |
| Tamaño de archivo | < 1 MB | Facebook rechaza imágenes de más de 8 MB; optimiza siempre |
| Contenido del texto en imagen | < 20% del área | Facebook puede reducir el alcance de posts con mucho texto en imagen |
| URL de la imagen | Absoluta con HTTPS | Las URLs relativas o HTTP pueden fallar en algunas plataformas |
Los tipos og:type más comunes
- •website: para páginas generales, portadas y páginas de herramientas.
- •article: para artículos de blog, noticias y contenido editorial. Permite propiedades extra como article:author y article:published_time.
- •product: para páginas de producto (ecommerce). Permite propiedades de precio y disponibilidad.
- •profile: para páginas de perfil de usuario o autor.
Twitter Cards: qué cambia en X
X lee tus etiquetas og: cuando no encuentra las suyas, así que con un Open Graph correcto ya tienes tarjeta. Solo necesitas añadir twitter:card para elegir el diseño. Los cuatro tipos de tarjeta, las etiquetas propias y los motivos por los que X ignora un enlace tienen su propia guía:
Cómo implementar Open Graph en los CMS más comunes
En WordPress con Yoast SEO
Yoast SEO genera automáticamente las etiquetas og: y twitter: para cada página. Ve a Yoast SEO → Social para configurar la imagen por defecto para páginas sin imagen específica, y verifica que Facebook y Twitter están activados. En cada post, el panel de Yoast permite definir una imagen og: específica diferente a la imagen destacada del post.
En Next.js con el App Router
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
const post = getPostBySlug(params.slug)
return {
openGraph: {
title: post.title,
description: post.description,
type: 'article',
publishedTime: post.date,
images: [{
url: `https://ejemplo.com/og/${params.slug}.jpg`,
width: 1200,
height: 630,
alt: post.title,
}],
},
twitter: {
card: 'summary_large_image',
title: post.title,
description: post.description,
images: [`https://ejemplo.com/og/${params.slug}.jpg`],
},
}
}Verifica tu implementación antes de compartir
El Previsualizador Meta Tags de iRankly muestra cómo se verá tu página cuando se comparta en redes sociales, incluyendo la preview de Open Graph y Twitter Card. Comprueba que la imagen, el título y la descripción son los correctos antes de publicar.
Prueba la herramienta gratis
Analiza tus URLs con Previsualizador Meta Tags de iRankly. Sin registro, sin tarjeta.
Facebook cachea las etiquetas Open Graph agresivamente. Si corriges un error y la preview de Facebook sigue mostrando el contenido antiguo, usa el Facebook Sharing Debugger (developers.facebook.com/tools/debug/) para forzar la actualización del caché.
El resto de etiquetas que deciden cómo se ve tu página: