¿Qué Son las Etiquetas Open Graph? Una Guía para Vistas Previas de Enlaces y Compartir en Redes Sociales

Cuando compartes un enlace en Facebook, LinkedIn, Slack o Twitter, generalmente aparece una tarjeta de vista previa — con un título, descripción e imagen. Estas vistas previas no son magia. Están controladas por etiquetas Open Graph (OG) en el HTML de tu página.

Implementar correctamente las etiquetas Open Graph significa que tus enlaces compartidos se ven profesionales y reciben más clics. Hacerlo mal significa vistas previas feas, imágenes faltantes o texto genérico de respaldo.

¿Qué Es el Protocolo Open Graph?

Open Graph es un protocolo creado por Facebook en 2010 que permite a las páginas web definir cómo aparecen cuando se comparten en plataformas sociales. Utiliza etiquetas meta en la sección <head> del HTML:

<meta property="og:title" content="El Título de Tu Página" />
<meta property="og:description" content="Un resumen corto de la página" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

Cuando una plataforma social detecta una URL compartida, obtiene la página y lee estas etiquetas para construir la tarjeta de vista previa.

Etiquetas Open Graph Esenciales

og:title

El título mostrado en la tarjeta de vista previa. Mantenlo bajo 60 caracteres para el mejor display en todas las plataformas.

<meta property="og:title" content="Cómo Crear Enlaces Cortos Personalizados" />

Consejos:

No simplemente dupliques tu etiqueta <title> — optimiza para engagement en redes sociales
Coloca las palabras importantes al principio
Evita sensacionalismo (las plataformas pueden penalizarlo)

og:description

Un resumen breve mostrado debajo del título. Apunta a 120-160 caracteres.

<meta property="og:description" content="Crea enlaces cortos personalizados con seguimiento de clics y análisis. Configura en 5 minutos." />

og:image

La imagen mostrada en la vista previa. Esta es la etiqueta más impactante — las publicaciones con imágenes reciben significativamente más engagement.

<meta property="og:image" content="https://example.com/social-preview.jpg" />

Requisitos de imagen por plataforma:

Plataforma	Tamaño Recomendado	Relación de Aspecto
Facebook	1200 × 630 px	1.91:1
Twitter	1200 × 628 px	1.91:1
LinkedIn	1200 × 627 px	1.91:1
Slack	500 × 500 px mín	Cualquiera

Usa 1200 × 630 píxeles para cubrir todas las plataformas.

og:url

La URL canónica de la página. Esto le dice a las plataformas qué URL mostrar y ayuda a prevenir contenido duplicado.

<meta property="og:url" content="https://example.com/page" />

og:type

Describe el tipo de contenido. Valores comunes:

website — para páginas de inicio y páginas generales
article — para publicaciones de blog y artículos
product — para páginas de productos

Etiquetas de Twitter Card

Twitter usa sus propias etiquetas meta (además de Open Graph) para tarjetas de vista previa:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Tu Título" />
<meta name="twitter:description" content="Tu descripción" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Si las etiquetas de Twitter card no están presentes, Twitter se respalda en las etiquetas Open Graph. La mayoría de sitios establecen ambas para máximo control.

Cómo las Plataformas Sociales Obtienen Datos de Open Graph

Cuando compartes una URL:

1El rastreador de la plataforma visita la URL
2Lee el HTML <head> buscando etiquetas OG
3Cachea los datos de la tarjeta de vista previa
4Los compartidos posteriores de la misma URL utilizan la versión cacheada

Importante: Los cambios en las etiquetas OG no se reflejan inmediatamente. Las plataformas cachean agresivamente, así que es posible que necesites limpiar manualmente el caché (ver depuración abajo).

Personalizando Vistas Previas de Enlaces con Linkly

¿Qué pasa si estás compartiendo una URL que no controlas — o quieres diferentes tarjetas de vista previa para diferentes contextos?

La función de vistas previas sociales personalizadas de Linkly te permite anular los datos de Open Graph para cualquier enlace acortado:

Establece un título, descripción e imagen personalizados
Diferentes vistas previas para diferentes audiencias
No es necesario editar el HTML de la página de destino
Funciona para cualquier URL, incluso páginas que no posees

Esto es especialmente útil cuando:

Compartes contenido de terceros con tu propia marca
Pruebas A/B diferentes tarjetas de vista previa para ver cuál obtiene más clics
La página de destino tiene etiquetas OG pobres o faltantes

Depurando Etiquetas Open Graph

Herramienta de Depuración de Compartir de Facebook

La herramienta de Facebook te permite previsualizar y actualizar datos OG cacheados:

1Ingresa tu URL
2Haz clic en Debug
3Ve lo que Facebook lee de tu página
4Haz clic en Scrape Again para limpiar el caché

Validador de Twitter Card

El validador de Twitter muestra cómo aparecerá tu tarjeta e highlighting cualquier problema.

Inspector de Publicación de LinkedIn

La herramienta de LinkedIn previsualizará tu tarjeta de enlace y actualiza los datos cacheados.

Consejos Generales

Verifica la fuente: Visualiza el código fuente de tu página y busca og: para verificar que las etiquetas estén presentes
Usa URLs absolutas: Las URLs de imagen deben ser absolutas (comenzar con https://), no relativas
Prueba después de cambios: Siempre limpia el caché de la plataforma después de actualizar etiquetas OG
Verifica la representación de JavaScript: Algunas plataformas no pueden ejecutar JavaScript, así que las etiquetas OG deben estar en la respuesta HTML inicial

Errores Comunes

1Falta og:image: Las publicaciones sin imágenes reciben 2-3x menos clics
2Imagen demasiado pequeña: Usa al menos 1200 × 630 píxeles
3Relación de aspecto incorrecta: Las imágenes se recortan de manera extraña
4Caché obsoleto: Actualizaste tus etiquetas OG pero olvidaste limpiar los cachés de las plataformas
5Etiquetas duplicadas: Múltiples etiquetas OG del mismo tipo causan comportamiento impredecible
6Imágenes HTTP: Usa HTTPS para URLs de imagen — algunas plataformas bloquean imágenes HTTP
7URLs relativas: Los rastreadores de plataformas no pueden resolver rutas relativas

Open Graph para Diferentes Tipos de Contenido

Publicaciones de Blog

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Tu Nombre" />

Productos

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

Videos

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

Conclusión

Las etiquetas Open Graph son una pequeña adición a tu HTML que tienen un gran impacto en cómo tu contenido aparece en toda la web social. Implementarlas correctamente — con el título, descripción e imagen correctos — aumenta directamente las tasas de clics cuando tus enlaces se comparten.

¿Quieres vistas previas de enlaces personalizadas sin editar HTML? Comienza con Linkly y personaliza la tarjeta de vista previa social para cualquier enlace acortado — establece tu propio título, descripción e imagen.