Las etiquetas Open Graph

Las etiquetas Open Graph controlan la vista previa de su página cuando se comparte en redes sociales, en una mensajería, o se cita en una conversación con una IA generativa capaz de mostrar una vista previa enriquecida.

Para qué sirven las etiquetas Open Graph

Sin marcado Open Graph, una plataforma que muestra una vista previa de enlace (red social, mensajería, algunos asistentes de IA) debe adivinar qué título, qué imagen y qué descripción utilizar, a menudo extrayéndolos de forma torpe del contenido de la página: una primera imagen encontrada en el HTML sin relación con el tema, un título cortado en plena frase, o una descripción ausente. Las etiquetas Open Graph recuperan el control de esta vista previa y garantizan una presentación coherente, sea cual sea el lugar donde se comparta el enlace.

Este estándar, diseñado originalmente por Facebook, se ha convertido desde entonces en la referencia de facto adoptada por prácticamente todas las plataformas que muestran vistas previas de enlaces, lo que lo convierte en un marcado de bajo esfuerzo de implementación y de amplio beneficio: un puñado de etiquetas cubre la mayoría de los casos de uso.

Las etiquetas esenciales

<head>
  <meta property="og:title" content="Guía completa de la facturación electrónica">
  <meta property="og:description" content="Todo lo que necesita saber sobre los formatos, las obligaciones y las plataformas de facturación electrónica en 2026.">
  <meta property="og:image" content="https://ejemplo.com/images/guia-facturacion-og.jpg">
  <meta property="og:url" content="https://ejemplo.com/guia-facturacion-electronica">
  <meta property="og:type" content="article">
</head>

og:title: título de la vista previa, a menudo cercano al <title> pero puede reformularse para un contexto de compartir en redes sociales.
og:description: resumen mostrado debajo del título en la vista previa.
og:image: imagen de la tarjeta de vista previa, el elemento que más influye en la tasa de clics al compartir.
og:url: URL canónica de la página compartida.
og:type: naturaleza del contenido (article, website, product...).

Estas cinco etiquetas cubren la gran mayoría de los casos de uso. Existen otras propiedades para necesidades más específicas (og:site_name para el nombre del sitio, article:author o article:published_time para contenido editorial), pero siguen siendo secundarias frente al núcleo formado por el título, la descripción y la imagen.

Buenas prácticas para la imagen Open Graph

Una imagen con dimensiones incorrectas o ausente provoca una vista previa vacía o mal recortada, lo que reduce fuertemente la interacción al compartir. Las recomendaciones más habituales:

formato recomendado en torno a 1200 x 630 píxeles (relación 1,91:1);
peso de archivo razonable para una carga rápida de la vista previa;
texto legible incluso en tamaño pequeño si la imagen contiene texto superpuesto;
tema principal centrado, ya que algunas plataformas recortan la imagen de forma diferente según el formato de visualización (vista previa ancha, miniatura cuadrada);
una imagen por defecto definida a nivel de sitio para las páginas que no tienen una específica, en lugar de dejar el campo vacío.

Un impacto que va más allá de las redes sociales

Algunas interfaces de IA generativa que muestran resultados de búsqueda o citas de fuentes también utilizan estos metadatos para componer una vista previa visual de la fuente citada. Un marcado Open Graph completo y coherente con el contenido real de la página contribuye, por tanto, de forma indirecta, a la calidad de presentación de su marca en estos contextos.

Errores frecuentes

Ausencia de etiquetas Open Graph, lo que deja que cada plataforma adivine una vista previa de forma incoherente.
og:image que apunta a una URL relativa en lugar de una URL absoluta, lo que rompe la visualización en la mayoría de las plataformas.
og:description diferente hasta el punto de contradecir el contenido real de la página.
Olvidar actualizar estas etiquetas tras un rediseño visual o un cambio de contenido importante.

Twitter Cards, y probar su marcado antes de publicar

Algunas plataformas utilizan su propio estándar además de Open Graph. X (antes Twitter), por ejemplo, lee en primer lugar sus etiquetas twitter:card, twitter:title y twitter:image si están presentes, y recurre a las etiquetas Open Graph en su ausencia:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Guía completa de la facturación electrónica">
<meta name="twitter:image" content="https://ejemplo.com/images/guia-facturacion-twitter.jpg">

En la mayoría de los casos, basta con duplicar escrupulosamente los valores de Open Graph en estas etiquetas complementarias; no es necesario redactar un contenido totalmente distinto para cada plataforma, salvo que se dirija específicamente a una audiencia diferente en una de ellas.

Una vista previa Open Graph mal configurada generalmente no se nota al navegar por el propio sitio: el error solo aparece en el momento de compartir, a menudo después de que el enlace ya haya circulado. Las herramientas de depuración proporcionadas por las principales plataformas sociales permiten simular la vista previa antes de publicar y forzar una actualización de la caché si se ha modificado una imagen o un título después de un primer envío: estas plataformas almacenan en caché la vista previa generada y no la regeneran automáticamente en cada visita.

Las etiquetas Open Graph complementan de forma natural la etiqueta Title y la Meta Description: los tres elementos juntos definen cómo se presenta su página, ya sea en un motor de búsqueda o al compartirla. Para profundizar en el marcado estructurado, la siguiente lección lógica es la de los datos estructurados Schema.org.