Etiquetas Open Graph: Controla Cómo Aparece Tu Contenido Al Compartirse

31 de marzo de 2026 · 12 min de lectura

¿Qué Es el Protocolo Open Graph?

El protocolo Open Graph, creado originalmente por Facebook en 2010, es un conjunto de metaetiquetas HTML que indican a las plataformas de redes sociales cómo mostrar tu página web cuando alguien la comparte. Sin etiquetas Open Graph, las plataformas adivinan qué mostrar—a menudo eligiendo la imagen incorrecta, truncando el título o mostrando una descripción genérica. Con etiquetas OG adecuadas, controlas exactamente qué aparece.

Piensa en la última vez que compartiste un enlace en Facebook, LinkedIn o en una aplicación de mensajería. ¿Esa tarjeta de vista previa enriquecida con la imagen, título y descripción? Eso es Open Graph en acción. La diferencia entre una vista previa OG bien configurada y una rota puede significar la diferencia entre que alguien haga clic en tu enlace o lo ignore.

El protocolo se ha expandido mucho más allá de Facebook. Hoy en día, Twitter, LinkedIn, Pinterest, Slack, Discord, WhatsApp, Telegram y prácticamente todas las plataformas que generan vistas previas de enlaces leen las etiquetas Open Graph. Implementarlas una vez mejora la apariencia de tu contenido en todas partes.

Para propietarios de sitios web y especialistas en marketing, las etiquetas OG no son opcionales—son esenciales. Las páginas compartidas en redes sociales sin etiquetas OG se ven poco profesionales y generan significativamente menor participación en comparación con el contenido correctamente etiquetado. Los estudios muestran que las publicaciones con vistas previas enriquecidas reciben hasta un 40% más de clics que aquellas sin ellas.

Etiquetas Open Graph Esenciales

Cada página web debe incluir estas cuatro etiquetas Open Graph básicas como mínimo. Estas son la base de cómo aparece tu contenido en las plataformas sociales:

<meta property="og:title" content="El Título de Tu Página">
<meta property="og:description" content="Una descripción convincente de tu página">
<meta property="og:image" content="https://tudominio.com/og-image.jpg">
<meta property="og:url" content="https://tudominio.com/pagina">

og:title

El og:title es el titular que aparece en la tarjeta de vista previa. Debe ser conciso, convincente y representar con precisión tu contenido. Mantenlo entre 60-90 caracteres para una visualización óptima en todas las plataformas.

Tu título OG no necesita coincidir exactamente con la etiqueta <title> de tu página. De hecho, es posible que desees optimizarlos de manera diferente—el título de la página para SEO y motores de búsqueda, el título OG para compartir en redes sociales y participación.

og:description

La descripción proporciona contexto sobre tu página. La mayoría de las plataformas muestran 2-3 líneas, lo que se traduce en aproximadamente 150-200 caracteres. Haz que cada palabra cuente—este es tu discurso de ascensor para visitantes potenciales.

Escribe descripciones que creen curiosidad o prometan valor. En lugar de "Este artículo discute las etiquetas Open Graph", prueba "Aprende cómo controlar exactamente qué aparece cuando tu contenido se comparte en redes sociales."

og:image

La imagen es el elemento visualmente más prominente de tu tarjeta de vista previa. A menudo es lo primero que la gente nota y puede determinar si alguien hace clic en tu enlace o no. La URL de la imagen debe ser absoluta (no relativa) y debe estar alojada en un CDN confiable.

Profundizaremos en la optimización de imágenes en la siguiente sección, pero la versión rápida: usa 1200×630 píxeles, mantén el tamaño del archivo por debajo de 1MB y asegúrate de que la imagen se vea bien en diferentes tamaños.

og:url

La URL canónica de tu página. Esta debe ser la URL permanente y preferida que deseas asociar con este contenido. Usa la URL completa incluyendo el protocolo (https://) y evita parámetros de seguimiento.

El og:url ayuda a las plataformas a deduplicar contenido y consolidar métricas de participación. Si tu página es accesible a través de múltiples URLs, la URL OG indica a las plataformas cuál es la versión "real".

og:type

Aunque no siempre es requerido, og:type indica a las plataformas qué tipo de contenido estás compartiendo. Los valores comunes incluyen:

• website - Predeterminado para la mayoría de las páginas
• article - Publicaciones de blog y artículos de noticias
• video.movie - Páginas de películas
• music.song - Contenido musical
• product - Páginas de productos de comercio electrónico

Para la mayoría de los sitios web, usarás website o article. El tipo puede desbloquear propiedades adicionales específicas para ese tipo de contenido.

Propiedades Open Graph Avanzadas

Más allá de las etiquetas esenciales, Open Graph admite docenas de propiedades adicionales que proporcionan un contexto más rico y habilitan funciones específicas de la plataforma. Aquí están las etiquetas avanzadas más útiles:

Etiquetas Específicas de Artículos

Cuando uses og:type configurado como article, puedes incluir metadatos adicionales:

<meta property="article:published_time" content="2026-03-31T10:00:00Z">
<meta property="article:modified_time" content="2026-03-31T15:30:00Z">
<meta property="article:author" content="https://tudominio.com/autor/nombre">
<meta property="article:section" content="Tecnología">
<meta property="article:tag" content="Open Graph">
<meta property="article:tag" content="Redes Sociales">

Estas etiquetas ayudan a las plataformas a entender el contexto y la frescura de tu contenido. Algunas plataformas muestran fechas de publicación en las tarjetas de vista previa, mientras que otras usan estos datos para clasificación algorítmica.

Dimensiones de Imagen y Texto Alternativo

Proporciona dimensiones de imagen explícitas para ayudar a las plataformas a renderizar vistas previas más rápido sin esperar las descargas de imágenes:

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Texto descriptivo para accesibilidad">

La etiqueta og:image:alt es crucial para la accesibilidad. Proporciona texto alternativo para usuarios que no pueden ver imágenes, y algunas plataformas lo muestran cuando las imágenes no se cargan.

Configuración Regional e Idioma

Especifica el idioma y la variante regional de tu contenido:

<meta property="og:locale" content="es_ES">
<meta property="og:locale:alternate" content="es_MX">
<meta property="og:locale:alternate" content="en_US">

Esto ayuda a las plataformas a servir la versión correcta a usuarios en diferentes regiones y puede mejorar cómo aparece tu contenido en feeds localizados.

Nombre del Sitio

El og:site_name identifica tu marca o nombre del sitio web, separado del título de la página:

<meta property="og:site_name" content="DLKit">

Muchas plataformas muestran esto como un subtítulo o atribución, ayudando a construir reconocimiento de marca a través de las comparticiones.

Etiquetas de Video y Audio

Si tu página presenta contenido de video o audio, puedes incrustarlo directamente en las vistas previas sociales:

<meta property="og:video" content="https://tudominio.com/video.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">

Plataformas como Facebook y LinkedIn pueden reproducir videos directamente en el feed, aumentando dramáticamente la participación en comparación con imágenes estáticas.

Optimizando Tu Imagen OG

Tu imagen Open Graph es el elemento visual más importante de tu vista previa social. Una imagen convincente puede aumentar