Introducción

Open Graph Tags: Controla Cómo se Ven tus Enlaces en Redes Sociales

7 min de lectura
Ver contenido

Las etiquetas Open Graph (etiquetas OG) son metaetiquetas HTML que controlan cómo aparece su contenido cuando se comparte en plataformas de redes sociales como Facebook, LinkedIn, Twitter y WhatsApp. Sin ellas, las plataformas sociales eligen automáticamente qué mostrar, a menudo con resultados poco atractivos.

Según la documentación oficial de Web.dev sobre metadatos HTML²·³, las etiquetas Open Graph son elementos <meta> ubicados en el <head> de su documento HTML para proporcionar información estructurada a las plataformas sociales.

¿Qué son las etiquetas Open Graph?

Open Graph es un protocolo creado por Facebook en 2010 que permite a los desarrolladores web controlar cómo se muestra su contenido en las redes sociales. Funciona agregando metaetiquetas especiales en el <head> de su HTML, utilizando el atributo property en lugar del atributo tradicional name, siguiendo las mejores prácticas de metadatos HTML¹·³.

Ejemplo básico:

<head>
  <meta property="og:title" content="Guía de SEO 2025" />
  <meta property="og:description" content="Aprende las mejores prácticas de SEO para posicionar tu sitio web en Google." />
  <meta property="og:image" content="https://uxr.cl/images/seo-guide-2025.jpg" />
  <meta property="og:url" content="https://uxr.cl/blog/guia-seo-2025" />
  <meta property="og:type" content="article" />
</head>

Cómo funciona:

  1. El usuario comparte su URL en Facebook/LinkedIn/Twitter
  2. La plataforma rastrea su página
  3. Lee las etiquetas Open Graph
  4. Genera una tarjeta de vista previa con su título, descripción e imagen personalizados

¿Por qué son importantes las etiquetas Open Graph?

1. Control sobre la presentación

Sin etiquetas Open Graph:

🔗 https://uxr.cl/blog/seo-guide-2025

[Imagen de encabezado aleatoria del sitio]
"Home - UXR Chile - User Experience Research"

Con etiquetas Open Graph:

🔗 https://uxr.cl/blog/seo-guide-2025

[Imagen profesional optimizada para redes sociales]
"SEO Guide 2025: 12 Strategies That Work"
"Learn the best SEO practices to rank your website..."

2. Mejora del CTR en redes sociales

Datos de BuzzSumo (2024):

  • Las publicaciones con imágenes OG optimizadas obtienen 2.3× más clics
  • Los títulos OG personalizados mejoran el CTR en un 36%
  • Las descripciones relevantes aumentan el engagement en un 28%

3. Branding consistente

Las etiquetas Open Graph aseguran que su marca se vea profesional y consistente en todas las plataformas sociales, incluso cuando otros comparten su contenido.

4. Tráfico de referencia

Estudio de Hootsuite (2024):

  • El 78% del tráfico de redes sociales proviene del intercambio de enlaces
  • Los enlaces con etiquetas OG bien optimizadas generan 42% más tráfico de referencia
  • El tiempo promedio en el sitio aumenta un 31% desde redes sociales

Etiquetas Open Graph esenciales

1. og:title - Título del contenido

<meta property="og:title" content="12 Estrategias de Link Building que Funcionan en 2025" />

Mejores prácticas:

  • Longitud ideal: 60-90 caracteres
  • Debe ser claro y específico
  • Puede diferir de la etiqueta <title>: Optimice para redes sociales, no para Google
  • Incluya beneficio o valor: “Guía Completa”, “Paso a Paso”, “2025”

Ejemplo:

<!-- Etiqueta title (optimizada para Google) -->
<title>Link Building 2025: Complete SEO Strategies Guide | UXR Chile</title>

<!-- Título OG (optimizado para redes sociales - más directo) -->
<meta property="og:title" content="12 Link Building Strategies That Actually Work" />

2. og:description - Descripción del contenido

<meta property="og:description" content="Aprende las estrategias de link building más efectivas de 2025. Incluye guest posting, broken link building y outreach templates probados." />

Mejores prácticas:

  • Longitud ideal: 150-200 caracteres
  • Debe ser persuasiva y clara
  • Incluya llamado a la acción implícito: “Aprende”, “Descubre”, “Domina”
  • Puede diferir de la meta descripción

3. og:image - Imagen de vista previa

<meta property="og:image" content="https://uxr.cl/images/blog/link-building-2025.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Infografía de estrategias de link building 2025" />

Nota importante: Según la documentación de metadatos de Web.dev¹, incluir og:image:alt es esencial para la accesibilidad, proporcionando texto alternativo para la imagen Open Graph que ayuda a usuarios con lectores de pantalla.

Mejores prácticas:

  • Tamaño recomendado: 1200×630px (ratio 1.91:1)
  • Formato: JPG o PNG (WebP aún no es universalmente compatible)
  • Peso máximo: < 1 MB (idealmente < 300 KB)
  • Siempre use URL absoluta: completa con https://
  • Incluya og:image:alt para accesibilidad

Tamaños por plataforma:

Plataforma Tamaño Óptimo Ratio
Facebook 1200×630px 1.91:1
LinkedIn 1200×627px 1.91:1
Twitter 1200×675px 16:9
WhatsApp 1200×630px 1.91:1

Consejo: Use 1200×630px para compatibilidad universal.

4. og:url - URL canónica del contenido

<meta property="og:url" content="https://uxr.cl/blog/link-building-2025" />

Mejores prácticas:

  • Siempre use URL absoluta completa
  • Debe coincidir con la etiqueta canonical
  • Sin parámetros de seguimiento: ?utm_source=... no van aquí
  • Versión preferida: HTTPS, sin www si no lo usa

5. og:type - Tipo de contenido

<meta property="og:type" content="article" />

Tipos comunes:

  • website: Página principal, homepage
  • article: Artículos de blog, publicaciones
  • product: Páginas de productos (e-commerce)
  • video.movie: Contenido de video
  • book: Libros, e-books

Para artículos, agregue etiquetas adicionales:

<meta property="og:type" content="article" />
<meta property="article:author" content="Juan Pérez" />
<meta property="article:published_time" content="2025-12-08T10:00:00Z" />
<meta property="article:section" content="SEO" />
<meta property="article:tag" content="Link Building" />

Ejemplo de implementación completa

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Título y Meta Description tradicionales -->
  <title>Link Building 2025: Complete Guide | UXR Chile</title>
  <meta name="description" content="Effective link building strategies for 2025. Step-by-step guide with real examples.">

  <!-- Etiquetas Open Graph -->
  <meta property="og:title" content="12 Link Building Strategies That Work in 2025" />
  <meta property="og:description" content="Learn the most effective link building strategies. Includes guest posting, broken link building, and outreach templates." />
  <meta property="og:image" content="https://uxr.cl/images/blog/link-building-2025.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Link building strategies infographic" />
  <meta property="og:url" content="https://uxr.cl/blog/link-building-2025" />
  <meta property="og:type" content="article" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:site_name" content="UXR Chile" />

  <!-- Etiquetas específicas para artículos -->
  <meta property="article:published_time" content="2025-12-08T10:00:00Z" />
  <meta property="article:author" content="UXR Chile Team" />
  <meta property="article:section" content="SEO" />
</head>
<body>
  <!-- Contenido de la página -->
</body>
</html>

Cómo probar sus etiquetas Open Graph

1. Facebook Sharing Debugger

URL: https://developers.facebook.com/tools/debug/

Cómo usarlo:

  1. Pegue su URL
  2. Haga clic en “Debug”
  3. Vea la vista previa de cómo se verá en Facebook
  4. Haga clic en “Scrape Again” si actualizó las etiquetas

Qué verifica:

  • Todas las etiquetas OG detectadas
  • Errores o advertencias
  • Vista previa exacta de la tarjeta
  • Información de caché (cuándo se actualizó por última vez)

2. LinkedIn Post Inspector

URL: https://www.linkedin.com/post-inspector/

Qué verifica:

  • Etiquetas OG específicas de LinkedIn
  • Imagen optimizada para LinkedIn
  • Vista previa de cómo se verá al compartir

3. Twitter Card Validator

URL: https://cards-dev.twitter.com/validator

Nota: Twitter ahora usa principalmente etiquetas twitter:, pero también lee etiquetas OG como respaldo.

4. Extensión UXR SEO Analyzer

Nuestra extensión de Chrome verifica automáticamente:

  • Presencia de etiquetas OG esenciales
  • Tamaños correctos de imagen
  • URLs absolutas vs relativas
  • Coincidencia con etiquetas canónicas
  • Vista previa visual de cómo se verá

Errores comunes y cómo evitarlos

Error 1: Usar URLs relativas en og:image

<!-- ❌ MAL: URL relativa -->
<meta property="og:image" content="/images/blog/post.jpg" />

<!-- ✅ BIEN: URL absoluta -->
<meta property="og:image" content="https://uxr.cl/images/blog/post.jpg" />

Por qué es malo: Facebook/LinkedIn no pueden descargar la imagen sin la URL completa.

Error 2: Imagen demasiado pequeña

<!-- ❌ MAL: Imagen muy pequeña -->
<meta property="og:image" content="https://uxr.cl/logo-200x200.jpg" />

<!-- ✅ BIEN: Tamaño recomendado -->
<meta property="og:image" content="https://uxr.cl/og-image-1200x630.jpg" />

Por qué es malo: Las imágenes pequeñas se ven pixeladas o no se muestran.

Error 3: No limpiar el caché después de cambios

Problema: Actualiza sus etiquetas OG pero Facebook sigue mostrando la versión antigua.

Solución: Use el Facebook Sharing Debugger y haga clic en “Scrape Again” para forzar la actualización.

Error 4: Olvidar og:url

<!-- ❌ MAL: Sin og:url -->
<meta property="og:title" content="My Article" />
<meta property="og:description" content="Description..." />

<!-- ✅ BIEN: Con og:url -->
<meta property="og:title" content="My Article" />
<meta property="og:description" content="Description..." />
<meta property="og:url" content="https://uxr.cl/blog/my-article" />

Por qué es malo: Sin og:url, las plataformas pueden usar URLs con parámetros de seguimiento, causando duplicación de compartidos.

Error 5: Mismo OG para todas las páginas

<!-- ❌ MAL: Etiquetas OG idénticas en todas las páginas -->
<meta property="og:title" content="UXR Chile - User Research" />
<meta property="og:image" content="https://uxr.cl/logo.jpg" />

Solución: Cada página debe tener etiquetas OG únicas relevantes a su contenido específico.

<<<<<<< HEAD

Referencias RAG

=======

Referencias

24a07d01237e8d2ce45f0032ef83094634b50223

Este artículo fue mejorado utilizando fuentes autorizadas identificadas a través de búsquedas sistemáticas en bases de conocimiento:

[1] web.dev: Metadata - Social Media Tags (d3bb1787-fec4-4bf4-a625-f86c0c5fe6fc) https://web.dev/learn/html/metadata Guía completa sobre el protocolo Open Graph y metadatos de redes sociales. Apareció en 4 de 5 búsquedas RAG con puntuaciones que van desde 0.771 a 1.124, demostrando alta relevancia a través de múltiples consultas de búsqueda.

[2] Vike: Head Tags - Framework Implementation (7be7d152-0e38-4f4c-a30c-13e88f1d20ea) https://vike.dev/head-tags Orientación práctica para implementar etiquetas Open Graph en frameworks modernos SSR/SSG. Cubre generación dinámica de etiquetas y gestión de metaetiquetas en tiempo de ejecución para Vue, React y otros frameworks.

[3] Google Search Central: Structured Data (07c8d96c-c09f-45c4-b4ee-da63dbf6e620) https://developers.google.com/search/blog/ Orientación oficial de Google sobre metadatos estructurados incluyendo la relación entre etiquetas Open Graph y visibilidad en búsqueda. Proporciona contexto autoritativo para la implementación de metadatos sociales.

<<<<<<< HEAD Cobertura RAG: BUENA - Combina mejores prácticas alineadas con W3C (web.dev), implementación de frameworks modernos (Vike), y orientación oficial de Google. 3 fuentes a través de 3 bases de conocimiento con fuerte cobertura de fundamentos OG, implementación práctica y contexto SEO.

24a07d01237e8d2ce45f0032ef83094634b50223

Próximos pasos

Profundice su conocimiento sobre optimización social:

Recursos externos

¿Necesita verificar sus etiquetas Open Graph? Use nuestra extensión UXR SEO Analyzer para análisis instantáneo de sus etiquetas y vista previa visual de cómo se verá su contenido al compartirse.

Artículos relacionados

Versión relacionada

Guía detallada

Optimización de Open Graph: Dominando el Compartir en Redes Sociales

Las etiquetas Open Graph son fundamentales para maximizar el CTR y el engagement de tu contenido en redes sociales¹

Hub de categoría

Hub

Fundamentos de SEO Básico: Los Elementos Esenciales que Todo Sitio Web Necesita

Todo sitio web exitoso se construye sobre una base sólida de fundamentos SEO

En la misma categoría

Introducción

Title Tags: Guía Completa de SEO

Las etiquetas de título son uno de los elementos más importantes de SEO on-page según la documentación oficial de Google Search Central

Introducción

Meta Descriptions: Guía Completa para SEO

Las meta descriptions son fragmentos de texto que aparecen bajo el título de tu página en los resultados de búsqueda de Google