SEO técnico: Open Graph y datos estructurados

Controla la previsualización de tus páginas en las redes sociales con Open Graph y aspira a resultados enriquecidos con schema.org en JSON-LD.

8 min · 3 preguntas

Cuando se comparte una URL en una red social o en una app de mensajería, un scraper lee el HTML para construir la tarjeta de previsualización. El protocolo Open Graph gobierna esa tarjeta: og:title, og:description, og:type, og:url y, sobre todo, og:image, que debe ser una URL absoluta (la mayoría de plataformas ignoran las rutas relativas). Una trampa del mundo real: estos scrapers no ejecutan JavaScript. Si tus etiquetas las inyecta tu framework del lado del cliente, la previsualización quedará vacía; deben estar presentes en el HTML servido inicialmente (SSR o generación estática).

<meta property="og:title"
      content="The filter coffee guide">
<meta property="og:type" content="article">
<meta property="og:url"
      content="https://example.com/cafe-filtre">
<meta property="og:image"
      content="https://example.com/cover-1200.jpg">
<meta property="og:description"
      content="Ratios and techniques for a clean cup.">

Dos añadidos completan la base. <link rel="canonical"> designa la URL de referencia cuando una página es accesible en varias direcciones (parámetros de seguimiento, paginación): es tu defensa contra el contenido duplicado. Y las etiquetas de Twitter Cards: la plataforma recurre a Open Graph para el contenido, pero twitter:card sigue siendo necesario para elegir el formato de visualización, en particular summary_large_image.

<link rel="canonical"
      href="https://example.com/cafe-filtre">
<meta name="twitter:card"
      content="summary_large_image">

Los datos estructurados de schema.org describen el significado de tu contenido para los motores de búsqueda: artículo, producto, receta, migas de pan, FAQ. Existen tres sintaxis (microdata, RDFa, JSON-LD), pero Google recomienda JSON-LD: un bloque autónomo dentro de un <script type="application/ld+json">, desacoplado del marcado visual y, por tanto, fácil de generar y mantener. Este marcado es lo que hace que tu página sea elegible para los resultados enriquecidos: estrellas de reseñas, precios y fechas de eventos directamente en la página de resultados.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "The filter coffee guide",
  "datePublished": "2026-05-12",
  "author": {
    "@type": "Person",
    "name": "Ana Costa"
  }
}
</script>

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué restricción se aplica al valor de og:image?
   • Debe ser una URL absoluta, dominio incluido
   • Debe apuntar a un archivo en formato WebP
   • Debe estar codificada en base64 dentro de la etiqueta
2. ¿Por qué recomienda Google JSON-LD frente a microdata?
   • JSON-LD se ejecuta como JavaScript, por lo que es más rápido
   • JSON-LD es un bloque autónomo, desacoplado del marcado visible y fácil de generar
   • Microdata ya no lo leen los motores de búsqueda
3. ¿Qué garantiza un marcado schema.org válido y completo?
   • Resultados enriquecidos mostrados siempre
   • Un impulso directo al posicionamiento de la página
   • Elegibilidad para los resultados enriquecidos, sin garantía de visualización