Etiquetas Open Graph Explicadas: Cómo se Construyen las Previsualizaciones de Enlaces en Redes Sociales

Cada vez que comparte un enlace web en una publicación de Facebook, pega un artículo en un grupo de Telegram o envía un mensaje de texto a la página de un producto a un amigo en Twitter, espera ver aparecer una tarjeta de vista previa visual pulida. Esa tarjeta, que presenta una imagen de banner nítida, un titular atractivo y un resumen conciso, no surge por casualidad. Se construye a través de una especificación web estandarizada llamada protocolo Open Graph. Pero si el código de su sitio web carece de estas metaetiquetas, las plataformas sociales mostrarán un cuadro gris feo y roto o seleccionarán una miniatura aleatoria de su página. Aprender la mecánica de las etiquetas de gráficos abiertos es esencial para los desarrolladores web y los especialistas en marketing técnico.

Introducido originalmente por Facebook en 2010, el protocolo Open Graph fue diseñado para integrar páginas web externas en redes sociales de gráficos. Antes de Open Graph, las redes sociales tenían que adivinar de qué se trataba un artículo raspando el texto del párrafo sin formato y escaneando etiquetas de imágenes HTML, lo que a menudo resultaba en vistas previas visuales embarazosas. Hoy en día, Open Graph se ha convertido en el estándar universal de Internet respaldado por LinkedIn, Pinterest, Twitter, Telegram, Discord, Slack y WhatsApp. En esta inmersión técnica profunda, aprenderá la sintaxis exacta de las etiquetas OG principales, comprenderá los requisitos de dimensión de la imagen y descubrirá cómo depurar y optimizar las tarjetas de vista previa para lograr la máxima participación social.

Al dominar los metadatos de Open Graph, se asegura de que cada enlace compartido desde su dominio parezca cautivador, profesional y optimizado para compartir en redes sociales.

Más allá de las fuentes públicas de redes sociales, las etiquetas Open Graph también gobiernan cómo se representan los enlaces dentro del software de colaboración privado y herramientas de mensajería en equipo como Slack, Microsoft Teams y Discord. Cuando un miembro del equipo pega su URL en un canal de Slack de la empresa o en un servidor de Discord del desarrollador, el robot interno de la aplicación analiza sus metadatos de Open Graph en tiempo real y muestra su título, miniatura y fragmento de resumen directamente en la transmisión del chat. Los metadatos de alta calidad garantizan que las partes interesadas internas y los miembros de la comunidad interactúen con su enlace de inmediato.

¿Qué es el protocolo Open Graph?

El protocolo Open Graph es un conjunto de metaetiquetas estructuradas que los desarrolladores web colocan dentro de la sección <head> de un documento HTML. Cuando un rastreador automatizado (como facebookexternalhit o TelegramBot) visita su página, analiza estas etiquetas para crear un objeto de vista previa enriquecido interactivo.

Sin etiquetas Open Graph, un enlace compartido es simplemente texto plano. Con las etiquetas Open Graph, su enlace se transforma en una tarjeta visual interactiva de alta visibilidad que genera tasas de clics significativamente más altas en las redes sociales.

Las etiquetas principales de Open Graph que debes incluir

Cada página web pública debe incluir cuatro etiquetas Open Graph fundamentales para garantizar una representación consistente en todas las plataformas principales:

Asegúrese siempre de que og:url coincida con su etiqueta de enlace canónico, evitando que los recuentos de interacciones sociales y las señales de vínculos de retroceso se fragmenten entre las variaciones de URL.

Optimización de imágenes de Open Graph para pantallas modernas

La imagen es, con diferencia, el elemento más importante de cualquier tarjeta de vista previa. Para garantizar que sus gráficos se reproduzcan con una nitidez impecable en las pantallas modernas de teléfonos inteligentes de alta resolución, siga estas especificaciones técnicas:

• Resolución estándar (1,91:1): utilice 1200 x 630 píxeles. Este es el estándar universal para las tarjetas de resumen de Facebook, LinkedIn y Twitter.
• Alternativa de pantalla panorámica (16:9): 1200 x 675 píxeles se utiliza ampliamente para contenido de vídeo, recursos compartidos de YouTube y blogs responsivos modernos.
• Declarar dimensiones explícitamente: Incluya siempre <meta property="og:image:width" content="1200" /> y <meta property="og:image:height" content="630" />. Esto permite a los rastreadores sociales representar el diseño de la tarjeta inmediatamente durante el primer raspado sin tener que descargar y calcular las dimensiones de la imagen de forma asincrónica.
• Restricciones de tamaño de archivos: Mantenga los tamaños de archivos por debajo de 5 MB. La mayoría de los raspadores sociales cancelarán las descargas de imágenes que superen los 5 MB para preservar el ancho de banda de la red.
• Centrar texto crítico: las plataformas sociales recortan los gráficos de vista previa de manera diferente en los feeds móviles que en las barras laterales de escritorio. Mantenga todos los logotipos, encabezados de texto y rostros críticos centrados dentro de la "zona segura" central de la imagen.

Twitter Cards versus Open Graph: cómo interactúan

Twitter (X) mantiene su propio marcado de metadatos patentado llamado Twitter Cards, pero también admite de forma nativa el respaldo de Open Graph.

Para garantizar que sus enlaces se muestren como tarjetas visuales grandes y atractivas en Twitter en lugar de pequeñas miniaturas cuadradas, incluya estas etiquetas de Twitter dedicadas junto con sus etiquetas de Open Graph:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Catchy Headline" />
<meta name="twitter:description" content="Engaging summary snippet." />
<meta name="twitter:image" content="https://yourbrand.com/images/og-image.jpg" />

Configurar twitter:card en summary_large_image es obligatorio si desea vistas previas visuales de ancho completo. Si se omite, Twitter presenta de forma predeterminada una vista previa compacta de solo texto que atrae muchos menos clics.

Los editores avanzados también deben implementar propiedades complementarias de Open Graph como og:locale y article:published_time. Declarar og:locale informa a los rastreadores sobre el idioma principal y el formato regional del contenido, mientras que las marcas de tiempo de publicación ayudan a los motores de descubrimiento de contenido como Google Discover a reconocer informes editoriales recientes.

También es aconsejable mantener una jerarquía de respaldo de imágenes estructurada. Si un autor olvida cargar una imagen destacada dedicada para una publicación de blog específica, su plantilla de administración de contenido debería inyectar automáticamente un gráfico de marca predeterminado limpio y de alta resolución en lugar de permitir que los rastreadores muestren una tarjeta de vista previa en blanco.

También puede explorar cómo interactúan las etiquetas Open Graph con los subdominios de marca en nuestra guía sobre subdominios de marca.

Prueba, validación y solución de problemas de etiquetas de vista previa

Antes de lanzar una campaña de marketing o compartir enlaces públicamente, valide siempre sus etiquetas Open Graph utilizando las suites de depuración oficiales de la plataforma:

• Depurador de metacompartido: pegue su URL para obtener una vista previa de las tarjetas de Facebook, verificar las advertencias de etiquetas y forzar la actualización de la caché del rastreador como se explica en nuestra guía sobre corregir imágenes de vista previa incorrectas.
• Telegram @WebpageBot: envía tu enlace a este bot verificado dentro de Telegram para verificar la representación de la vista previa móvil y eliminar los gráficos antiguos almacenados en caché.
• Inspector de publicaciones de LinkedIn: borra la caché de vista previa de enlaces de siete días de LinkedIn e informa que faltan campos de metadatos.
• Comprobación de enlaces automatizada: verifique las cadenas de redireccionamiento, los certificados SSL y los códigos de estado utilizando nuestra herramienta de verificación de enlaces gratuita.

Al implementar metadatos completos de Open Graph y validar la representación de vista previa en todas las plataformas principales, se asegura de que sus enlaces web se destaquen en feeds abarrotados y genere la máxima participación.

Preguntas frecuentes