Etiquetas Open Graph: La Guía Completa para Vistas Previas en Redes Sociales
· 12 min de lectura
Tabla de Contenidos
- ¿Qué es Open Graph?
- Cómo Funcionan las Etiquetas Open Graph
- Etiquetas Open Graph Requeridas
- Etiquetas Open Graph Opcionales
- Twitter Cards y Plataforma X
- Especificaciones de Imagen y Mejores Prácticas
- Diferencias Específicas por Plataforma
- Guía de Implementación
- Herramientas de Depuración y Prueba
- Errores Comunes a Evitar
- Consejos Avanzados de Optimización
- Preguntas Frecuentes
Cuando compartes un enlace en Facebook, LinkedIn, Twitter o aplicaciones de mensajería, la tarjeta de vista previa que aparece se genera a partir de las etiquetas Open Graph (OG) en el HTML de tu página. Configurar correctamente estas etiquetas marca la diferencia entre una vista previa atractiva y digna de clic, y un enlace roto o de aspecto genérico.
Esta guía completa cubre todo lo que necesitas saber sobre las etiquetas Open Graph, Twitter Cards y la optimización de vistas previas en redes sociales. Ya seas un desarrollador implementando etiquetas OG por primera vez o un especialista en marketing buscando mejorar el engagement social, encontrarás información práctica y ejemplos útiles a lo largo de la guía.
¿Qué es Open Graph?
Open Graph es un protocolo creado originalmente por Facebook en 2010 que permite que las páginas web se conviertan en objetos enriquecidos en un grafo social. Al agregar meta etiquetas OG a tu HTML, controlas exactamente cómo aparece tu contenido cuando se comparte en plataformas de redes sociales.
Sin etiquetas Open Graph, las plataformas intentan extraer el contenido de tu página automáticamente, a menudo produciendo vistas previas pobres o incorrectas. ¿El resultado? Imágenes rotas, títulos faltantes o descripciones genéricas que no logran captar la atención en feeds sociales saturados.
El protocolo utiliza meta etiquetas en la sección <head> de tu HTML con el atributo property prefijado con og:. Estas etiquetas proporcionan datos estructurados que las plataformas sociales pueden analizar y mostrar de manera confiable.
Plataformas que Soportan Open Graph
Open Graph se ha convertido en el estándar de facto para vistas previas en redes sociales. Las principales plataformas que soportan el protocolo incluyen:
- Facebook – El creador original e implementador principal
- LinkedIn – Utiliza etiquetas OG para compartir contenido profesional
- Pinterest – Depende de imágenes OG para vistas previas de pines
- WhatsApp – Muestra vistas previas enriquecidas en conversaciones de chat
- Telegram – Muestra tarjetas de vista previa con datos OG
- Slack – Despliega enlaces usando información Open Graph
- Discord – Crea tarjetas incrustadas a partir de etiquetas OG
- iMessage – Genera vistas previas de enlaces en dispositivos iOS
Consejo profesional: Usa nuestro Verificador de Open Graph para validar instantáneamente cómo aparecen tus etiquetas en diferentes plataformas antes de publicar.
Cómo Funcionan las Etiquetas Open Graph
Cuando alguien comparte tu URL en una plataforma social, el rastreador de la plataforma (a menudo llamado "bot" o "scraper") visita tu página y busca meta etiquetas Open Graph en la sección <head> del HTML. Estas etiquetas proporcionan información estructurada sobre tu contenido.
El rastreador extrae estos datos y los utiliza para generar una tarjeta de vista previa, también llamada "fragmento enriquecido" o "vista previa de enlace". Esta tarjeta típicamente incluye un título, descripción, imagen y URL.
El Proceso de Rastreo
Esto es lo que sucede detrás de escena cuando compartes un enlace:
- Envío de URL – Un usuario pega o comparte tu URL en una plataforma social
- Envío de rastreador – La plataforma envía un bot para obtener tu página
- Análisis de HTML – El bot lee el HTML de tu página y extrae las etiquetas OG
- Almacenamiento en caché – La plataforma almacena en caché los datos extraídos (generalmente durante 24-48 horas)
- Generación de vista previa – Se renderiza una tarjeta de vista previa usando los datos en caché
- Visualización – La vista previa aparece en el feed o mensaje del usuario
Entender este proceso es crucial porque explica por qué los cambios en tus etiquetas OG no aparecen inmediatamente. La mayoría de las plataformas almacenan en caché los datos de vista previa de manera agresiva para reducir la carga del servidor.
Consejo rápido: Después de actualizar tus etiquetas OG, usa herramientas de depuración específicas de cada plataforma para forzar una actualización de caché. Cubriremos estas herramientas en la sección de depuración.
Etiquetas Open Graph Requeridas
Cuatro etiquetas OG se consideran requeridas para un objeto Open Graph correctamente definido. Aunque las páginas sin estas etiquetas aún pueden generar vistas previas, los resultados son impredecibles y a menudo de mala calidad.
Aquí está la implementación mínima que necesitas:
<meta property="og:title" content="Your Page Title">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">og:title
El título de tu contenido tal como debería aparecer en la vista previa de redes sociales. Esta es posiblemente la etiqueta más importante porque es lo primero que ven los usuarios.
Mejores prácticas:
- Mantenlo por debajo de 60 caracteres para evitar truncamiento en la mayoría de las plataformas
- Hazlo convincente y descriptivo – este es tu titular
- No incluyas el nombre de tu sitio (usa
og:site_namepara eso) - Coloca las palabras clave importantes al principio para mejor visibilidad
- Prueba cómo se ve cuando se trunca a 40 caracteres (vista móvil)
Ejemplo:
<meta property="og:title" content="10 Proven Strategies to Double Your Email Open Rates">og:type
El tipo de contenido que representa tu página. Esto ayuda a las plataformas a entender la naturaleza de tu contenido y puede afectar cómo se muestra o categoriza.
Valores comunes:
website– Sitios web genéricos y páginas de destinoarticle– Publicaciones de blog, artículos de noticias y contenido editorialvideo.movie– Páginas de películas y contenido cinematográficovideo.episode– Episodios de programas de TVmusic.song– Canciones individualesmusic.album– Álbumes de músicaprofile– Perfiles personales o empresarialesbook– Páginas de libros y literatura
Para la mayoría de los sitios web y publicaciones de blog, usarás website o article. El tipo article habilita etiquetas adicionales como article:published_time y article:author.
Ejemplo:
<meta property="og:type" content="article">og:image
La URL de la imagen que debería aparecer en la tarjeta de vista previa. Esto es crítico para el engagement – las publicaciones con imágenes reciben significativamente más clics y compartidos que las vistas previas de solo texto.
Requisitos:
- Debe ser una URL absoluta (no relativa)
- Debería servirse sobre HTTPS
- Debe ser públicamente accesible (sin autenticación requerida)
- Tamaño mínimo recomendado: 1200×630 píxeles
- Relación de aspecto: 1.91:1 (horizontal) funciona mejor en todas las plataformas
Ejemplo:
<meta property="og:image" content="https://example.com/images/social-preview.jpg">Profundizaremos en las especificaciones y optimización de imágenes en la sección dedicada más abajo.
og:url
La URL canónica de tu página. Esta debería ser la URL permanente y preferida que quieres asociar con este contenido.
Mejores prácticas:
- Usa la URL canónica (sin parámetros de seguimiento)
- Incluye el protocolo (https://)
- Coincide con tu etiqueta de enlace canónico si tienes una
- Usa minúsculas para consistencia
- No incluyas IDs de sesión o parámetros temporales
Ejemplo:
<meta property="og:url" content="https://example.com/es/blog/email-marketing-guide">Consejo profesional: El valor de og:url debería coincidir con tu URL canónica. Esto ayuda a consolidar señales sociales y previene problemas de contenido duplicado. Usa nuestro Generador de Meta Etiquetas para asegurar consistencia en todas tus meta etiquetas.
Etiquetas Open Graph Opcionales
Más allá de las cuatro etiquetas requeridas, Open Graph soporta numerosas etiquetas opcionales que proporcionan contexto adicional y mejoran cómo aparece tu contenido en plataformas sociales.
og:description
Una breve descripción de tu contenido. Esto aparece debajo del título en la mayoría de las tarjetas de vista previa.
Mejores prácticas:
- Mantenla entre 150-160 caracteres para visualización óptima
- Hazla convincente y accionable
- Incluye palabras clave relevantes de manera natural
- No dupliques el título
- Termina con un llamado a la acción cuando sea apropiado
Ejemplo:
<meta property="og:description" content="Learn proven email marketing strategies that top marketers use to achieve 40%+ open rates. Includes templates and real examples.">og:site_name
El nombre de tu sitio web o marca. Esto aparece separado del título de la página y ayuda con el reconocimiento de marca.
Ejemplo:
<meta property="og:site_name" content="SEO-IO">og:locale
El idioma y formato regional de tu contenido. El valor predeterminado es en_US si no se especifica.
Ejemplo:
<meta property="og:locale" content="en_GB">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="es_ES">Etiquetas Específicas de Artículos
Cuando uses el valor article en og:type, puedes incluir metadatos adicionales:
<meta property="article:published_time" content="2026-03-31T09:00:00Z">
<meta property="article:modified_time" content="2026-03-31T14:30:00Z">
<meta property="article:author" content="https://example.com/author/john-doe">
<meta property="article:section" content="Email Marketing">
<meta property="article:tag" content="email">
<meta property="article:tag" content="marketing">
<meta property="article:tag" content="conversion">Estas etiquetas ayudan a las plataformas a entender el contexto de tu contenido y pueden influir en cómo se categoriza o muestra.
Etiquetas de Mejora de Imagen
Proporciona información adicional sobre tu imagen OG:
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Infographic showing email open rate statistics">
<meta property="og:image:type" content="image/jpeg">Incluir ancho y alto ayuda a las plataformas a renderizar vistas previas más rápido sin descargar primero la imagen. El texto alternativo mejora la accesibilidad y proporciona contexto de respaldo.
Twitter Cards y Plataforma X
Twitter (ahora X) desarrolló su propio sistema de meta etiquetas llamado Twitter Cards antes de que Open Graph se generalizara. Aunque Twitter Cards usa nombres de etiquetas diferentes, sirven el mismo propósito que las etiquetas Open Graph.
La buena noticia: Twitter recurre a las etiquetas Open Graph si las etiquetas Twitter Card no están presentes. Sin embargo, usar etiquetas específicas de Twitter te da más control sobre cómo aparece tu contenido en la plataforma.
Tipos de Twitter Card
Twitter soporta varios tipos de tarjetas, pero principalmente usarás estas dos:
| Tipo de Tarjeta | Caso de Uso | Tamaño de Imagen |
|---|---|---|
summary |
Tarjeta predeterminada con imagen cuadrada pequeña | Relación de aspecto 1:1 (ej., 400×400) |
summary_large_image |
Tarjeta de imagen grande (recomendada para la mayoría del contenido) | Relación de aspecto 2:1 (ej., 1200×600) |
app |
Promoción de aplicaciones móviles | Varía |
player |
Contenido de video o audio | Varía |
Para la mayoría de los sitios web y publicaciones de blog, usa summary_large_