Etiquetas Open Graph
Técnico e InfraestructuraEtiquetas meta que controlan cómo aparece el contenido al compartirlo en redes sociales como Facebook.
Definición
Las etiquetas Open Graph (OG) son metaetiquetas HTML colocadas en la sección `<head>` de una página web que controlan cómo aparece esa página cuando su URL se comparte en plataformas de redes sociales, aplicaciones de mensajería y otros servicios que generan vistas previas de enlaces. El protocolo fue creado originalmente por Facebook en 2010 y se ha convertido en el estándar universal para las vistas previas de enlaces en toda la web. Las etiquetas OG definen cuatro propiedades principales: `og:title` (el titular en la vista previa), `og:description` (el texto resumen), `og:image` (la miniatura de vista previa) y `og:url` (el enlace canónico). Propiedades adicionales como `og:type`, `og:site_name` y `og:locale` proporcionan más contexto. Sin etiquetas OG, las plataformas intentan adivinar qué mostrar analizando la página, lo que a menudo produce imágenes rotas, texto truncado o contenido irrelevante.
Por Qué Es Importante
Cada enlace compartido en redes sociales genera una tarjeta de vista previa. Esa tarjeta es lo primero y a menudo lo único que las personas ven antes de decidir si hacer clic. Una imagen OG bien configurada, un título claro y una descripción convincente pueden multiplicar las tasas de clics comparadas con una vista previa genérica o ausente. Para los editores que distribuyen [flipbooks](/glossary/flipbook) a través de canales sociales, la tarjeta de vista previa funciona como un anuncio en miniatura del contenido. Las etiquetas OG también afectan cómo aparecen los enlaces en aplicaciones de mensajería como WhatsApp, Slack e iMessage, lo que significa que influyen en el comportamiento de clics mucho más allá de los feeds de redes sociales.
Cómo Funciona en FlipLink
La función [SEO y vistas previas sociales](/features/seo-and-social-previews) de FlipLink te permite configurar etiquetas OG para cada publicación. Configuras un título personalizado, una descripción y una imagen de vista previa a través de los ajustes de publicación, y FlipLink genera automáticamente las metaetiquetas `og:title`, `og:description`, `og:image`, `og:url` y `og:type` correctas. Esto significa que cada enlace de [flipbook](/glossary/flipbook) compartido muestra una tarjeta de vista previa pulida y de marca sin requerir ninguna edición de HTML. La imagen OG puede ser la portada del flipbook o un gráfico personalizado diseñado para compartir en redes sociales.
Lista de Verificación
Sigue estos pasos para configurar correctamente las etiquetas OG y maximizar el impacto al compartir en redes sociales:
1. **Establece og:title** - Mantenlo bajo 60 caracteres. Usa un título descriptivo que incluya el tema del contenido, no solo el nombre de tu marca. Ejemplo: "Catálogo Colección Primavera | TuMarca" en lugar de solo "TuMarca."
2. **Escribe og:description** - Apunta a 120-155 caracteres. Incluye una propuesta de valor o llamada a la acción. Describe qué encontrará el lector dentro del flipbook.
3. **Elige og:image** - Usa una imagen de al menos 1200x630 píxeles. La portada del flipbook funciona bien, pero un gráfico social personalizado con texto superpuesto puede rendir mejor. Evita imágenes con demasiado texto pequeño ya que se muestran como miniaturas.
4. **Verifica og:url** - Este debe ser la [URL canónica](/glossary/canonical-url) de la publicación. Si tu flipbook es accesible a través de múltiples URLs, og:url debe apuntar a la principal.
5. **Establece og:type** - Usa "website" para páginas de destino y "article" para publicaciones individuales o posts de blog.
6. **Prueba antes de compartir** - Usa el Depurador de Compartición de Facebook, el Validador de Cards de Twitter o el Inspector de Posts de LinkedIn para previsualizar cómo aparecerá tu enlace antes de compartirlo públicamente.
Preguntas Frecuentes
**¿Qué pasa si no establezco etiquetas OG?**
La plataforma social intentará analizar tu página y adivinar el título, descripción e imagen. Los resultados son impredecibles: podrías obtener una imagen aleatoria de la página, un título HTML truncado o ninguna vista previa. Establecer etiquetas OG explícitas elimina esta incertidumbre por completo.
**¿Las etiquetas OG afectan el posicionamiento SEO?**
Las etiquetas OG no influyen directamente en el posicionamiento en motores de búsqueda. Sin embargo, afectan significativamente las tasas de clics en enlaces compartidos, lo que genera tráfico. Más tráfico y engagement pueden mejorar indirectamente tu visibilidad de búsqueda con el tiempo.
**¿Las etiquetas OG son lo mismo que las Twitter Cards?**
Twitter tiene sus propias metaetiquetas (`twitter:card`, `twitter:title`, `twitter:image`), pero recurre a las etiquetas OG cuando las etiquetas específicas de Twitter no están presentes. La mayoría de las plataformas, incluidas LinkedIn, WhatsApp, Slack e iMessage, usan las etiquetas OG como fuente principal para las vistas previas de enlaces.
Detalles Técnicos
Las etiquetas OG siguen una estructura HTML directa dentro del elemento `<head>`:
- `og:title` - El título mostrado en la vista previa. Debería diferir del tag `<title>` de la página si el título incluye breadcrumbs de navegación o sufijos que no tienen sentido en un contexto social.
- `og:description` - Un resumen conciso. A diferencia de la meta descripción usada para motores de búsqueda, la descripción OG debe estar optimizada para el contexto social: más corta, más directa y orientada a la acción.
- `og:image` - Una URL absoluta al archivo de imagen. Facebook recomienda 1200x630 píxeles. Imágenes más pequeñas que 200x200 píxeles podrían no renderizarse en algunas plataformas.
- `og:type` - Categoriza el contenido. Valores comunes son "website", "article", "product" y "video.other".
- `og:url` - La URL canónica. Esto previene tarjetas de vista previa duplicadas cuando el mismo contenido es accesible desde múltiples URLs.
- `og:locale` - Especifica el idioma del contenido (ej. "en_US", "es_ES"). Útil para publicaciones multilingües.
Cuando se comparte una URL, el crawler de la plataforma obtiene la página, lee las etiquetas OG del HTML y almacena el resultado en caché. Por eso los cambios en las etiquetas OG no surten efecto inmediato en plataformas que ya almacenaron la vista previa anterior. Usa la herramienta de depuración de cada plataforma para forzar un nuevo rastreo después de actualizar las etiquetas.
Términos relacionados
Pasarela de Pago
Un servicio que procesa pagos en línea, como Stripe, permitiendo la venta de documentos a través de FlipLink.
PDF.js
La biblioteca JavaScript de código abierto de Mozilla que renderiza archivos PDF directamente en navegadores web.
Aplicación Web Progresiva (PWA)
Una aplicación web que funciona sin conexión y puede instalarse en dispositivos como una app nativa.
Diseño Responsivo
Adaptar automáticamente el diseño y el contenido para funcionar bien en pantallas de todos los tamaños y dispositivos.
Incrustación Responsiva
Un código de incrustación que ajusta automáticamente el tamaño del flipbook a cualquier contenedor o ancho de pantalla.
Funciones Relacionadas
Disponible en otros idiomas
¿Listo para transformar
tus PDFs?
Únete a miles de empresas que usan FlipLink para crear contenido atractivo e interactivo a partir de sus PDFs. Empieza gratis — sin tarjeta de crédito.