Ver contenido
Open Graph Tags: Controla Cómo se Ven tus Enlaces en Redes Sociales
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:
- El usuario comparte su URL en Facebook/LinkedIn/Twitter
- La plataforma rastrea su página
- Lee las etiquetas Open Graph
- 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 |
|---|---|---|
| 1200×630px | 1.91:1 | |
| 1200×627px | 1.91:1 | |
| 1200×675px | 16:9 | |
| 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, homepagearticle: Artículos de blog, publicacionesproduct: Páginas de productos (e-commerce)video.movie: Contenido de videobook: 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:
- Pegue su URL
- Haga clic en “Debug”
- Vea la vista previa de cómo se verá en Facebook
- 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:
- Optimización Open Graph: Redes Sociales Avanzadas - Etiquetas avanzadas, Twitter Cards, pruebas A/B
- Etiquetas Title: Guía Completa - Diferencias entre title y og:title
- Meta Descriptions: Guía Completa - Diferencias entre meta description y og:description
Recursos externos
- Open Graph Protocol Official - Especificación oficial del protocolo
- Facebook Sharing Debugger - Herramienta de prueba
- LinkedIn Post Inspector - Validador de LinkedIn
- Twitter Cards Guide - Documentación oficial
¿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.