Open Graph

Cuando alguien comparte una URL en Facebook, Twitter/X, LinkedIn, WhatsApp o cualquier otra plataforma social, la plataforma genera automáticamente una previsualización con título, descripción e imagen. Esa previsualización no se genera por magia: la plataforma lee los metadatos de Open Graph (o sus equivalentes) del <head> de la página.

Sin esos metadatos, la plataforma intenta adivinar qué mostrar, con resultados habitualmente mediocres: puede tomar el primer párrafo de texto, una imagen aleatoria o simplemente mostrar solo la URL.

El protocolo Open Graph

Open Graph (OG) es un protocolo desarrollado por Facebook en 2010 que define un conjunto estándar de metadatos para describir cómo debe representarse una página web cuando se comparte. Hoy es adoptado por prácticamente todas las plataformas sociales.

Los metadatos OG se declaran en el <head> del HTML con la etiqueta <meta property="og:...">:

Metadatos OG obligatorios

<meta property="og:title" content="Breadcrumbs: implementación, tipos y datos estructurados" />
<meta property="og:description" content="El breadcrumb muestra al usuario su posición dentro de la jerarquía del sitio. Guía de implementación, tipos y marcado Schema.org." />
<meta property="og:image" content="https://www.arquitecturadelainformacion.es/img/og/breadcrumbs.jpg" />
<meta property="og:url" content="https://www.arquitecturadelainformacion.es/navegacion/breadcrumbs/" />
<meta property="og:type" content="article" />

Metadatos OG adicionales recomendados

<meta property="og:site_name" content="Arquitectura de la Información" />
<meta property="og:locale" content="es_ES" />
<meta property="og:locale:alternate" content="en_US" />

Para artículos específicamente:

<meta property="article:published_time" content="2024-11-01T10:00:00+01:00" />
<meta property="article:modified_time" content="2024-11-15T10:00:00+01:00" />
<meta property="article:author" content="https://www.arquitecturadelainformacion.es/autores/nombre/" />
<meta property="article:section" content="Navegación" />

La imagen OG: el elemento más visible

La imagen es el elemento más visible de una previsualización social. Cuando está bien definida, hace que el contenido compartido destaque. Cuando falta o es inadecuada, la previsualización pierde impacto visual.

Especificaciones técnicas recomendadas:

  • Tamaño: 1200 × 630 píxeles (ratio 1.91:1). Es el tamaño óptimo para la mayoría de plataformas.
  • Formato: JPG o PNG. WebP tiene soporte creciente pero no universal en todas las plataformas.
  • Peso: Menos de 1 MB. Idealmente menos de 300 KB.
  • Texto en la imagen: Si la imagen incluye texto (título del artículo, nombre del sitio), asegurarse de que es legible al tamaño de previsualización.

Una imagen por página: Cada página debe tener su propia imagen OG cuando sea posible. Una imagen genérica del sitio para todos los contenidos es menos efectiva que imágenes específicas por artículo o por sección.

URL absoluta: La URL de la imagen OG debe ser absoluta (con protocolo y dominio), no relativa. https://www.ejemplo.com/img/og/imagen.jpg, no /img/og/imagen.jpg.

Twitter Cards

Twitter/X tiene su propio sistema de metadatos para las previsualizaciones, aunque en la práctica lee también los metadatos OG si los específicos de Twitter no están presentes. Definir ambos es la práctica más robusta.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@nombreusuario" />
<meta name="twitter:creator" content="@autordelartículo" />
<meta name="twitter:title" content="Breadcrumbs: implementación, tipos y datos estructurados" />
<meta name="twitter:description" content="El breadcrumb muestra al usuario su posición dentro de la jerarquía del sitio." />
<meta name="twitter:image" content="https://www.arquitecturadelainformacion.es/img/og/breadcrumbs.jpg" />

Tipos de Twitter Card:

  • summary: Previsualización pequeña con imagen cuadrada. Para contenido genérico.
  • summary_large_image: Previsualización con imagen grande horizontal. Para artículos y contenido visual.
  • app: Para aplicaciones móviles.
  • player: Para contenido de vídeo o audio.

Para la mayoría de sitios editoriales, summary_large_image es el tipo más adecuado.

Implementación completa en el <head>

Un <head> bien configurado para una página de artículo combina todos los metadatos:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Título y descripción -->
  <title>Breadcrumbs: implementación, tipos y datos estructurados | AI</title>
  <meta name="description" content="El breadcrumb muestra al usuario su posición dentro de la jerarquía del sitio. Guía de implementación, tipos y marcado Schema.org." />

  <!-- Canonical -->
  <link rel="canonical" href="https://www.arquitecturadelainformacion.es/navegacion/breadcrumbs/" />

  <!-- Robots -->
  <meta name="robots" content="index, follow" />

  <!-- Open Graph -->
  <meta property="og:type" content="article" />
  <meta property="og:title" content="Breadcrumbs: implementación, tipos y datos estructurados" />
  <meta property="og:description" content="El breadcrumb muestra al usuario su posición dentro de la jerarquía del sitio." />
  <meta property="og:url" content="https://www.arquitecturadelainformacion.es/navegacion/breadcrumbs/" />
  <meta property="og:image" content="https://www.arquitecturadelainformacion.es/img/og/breadcrumbs.jpg" />
  <meta property="og:site_name" content="Arquitectura de la Información" />
  <meta property="og:locale" content="es_ES" />
  <meta property="article:published_time" content="2024-11-01T10:00:00+01:00" />
  <meta property="article:section" content="Navegación" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Breadcrumbs: implementación, tipos y datos estructurados" />
  <meta name="twitter:description" content="El breadcrumb muestra al usuario su posición dentro de la jerarquía del sitio." />
  <meta name="twitter:image" content="https://www.arquitecturadelainformacion.es/img/og/breadcrumbs.jpg" />

  <!-- Hreflang (si aplica) -->
  <link rel="alternate" hreflang="es" href="https://www.arquitecturadelainformacion.es/navegacion/breadcrumbs/" />
</head>

Herramientas de verificación

Antes de publicar, verificar que los metadatos sociales están correctamente implementados:

  • Facebook Sharing Debugger (developers.facebook.com/tools/debug/): previsualiza cómo se verá el contenido al compartirse en Facebook. También invalida la caché de previsualizaciones anteriores.
  • LinkedIn Post Inspector (linkedin.com/post-inspector/): previsualiza para LinkedIn.
  • Twitter Card Validator (cards-dev.twitter.com/validator): previsualiza para Twitter/X.
  • Open Graph Check (opengraph.xyz): herramienta genérica para verificar metadatos OG.

En WordPress

Los plugins de SEO (Yoast, Rank Math, SEOPress) gestionan automáticamente los metadatos OG y Twitter Card para todos los tipos de contenido de WordPress. Permiten configurar:

  • Imagen OG predeterminada para el sitio (usada cuando no hay imagen específica de la página).
  • Título y descripción OG específicos por página (distintos del título SEO si se desea).
  • Patrones de generación automática de títulos y descripciones OG basados en los campos del contenido.

Para profundizar