Entendiendo las Etiquetas Open Graph
El protocolo Open Graph fue introducido por Facebook en 2010 para permitir que las páginas web se conviertan en objetos ricos en un grafo social. Cuando alguien comparte una URL en Facebook, LinkedIn, Pinterest u otras plataformas sociales, la plataforma obtiene la página y lee sus meta etiquetas Open Graph para determinar qué título, descripción, imagen y otros metadatos mostrar en la vista previa de compartición. Sin estas etiquetas, las plataformas hacen su mejor suposición a partir del contenido de la página, lo que frecuentemente resulta en vistas previas pobres con imágenes faltantes, títulos truncados o descripciones irrelevantes.
El protocolo define cuatro propiedades requeridas: og:title (el título de la página), og:type (el tipo de objeto, como "website" o "article"), og:image (la URL de la imagen a mostrar) y og:url (la URL canónica). Propiedades opcionales adicionales incluyen og:description, og:site_name, og:locale y etiquetas específicas para medios de video y audio. Estas etiquetas se colocan en la sección <head> de su HTML como elementos <meta property="og:..." content="...">.
Twitter Cards
Twitter usa su propio sistema de meta etiquetas llamado Twitter Cards, pero recurre a las etiquetas Open Graph cuando las etiquetas específicas de Twitter no están presentes. La etiqueta twitter:card es la más importante, controlando el formato de visualización. El tipo de tarjeta "summary" muestra una pequeña imagen cuadrada junto al título y la descripción, adecuada para contenido general. El tipo de tarjeta "summary_large_image" muestra una gran imagen rectangular sobre el título y la descripción, ideal para publicaciones de blog, artículos y contenido visual que se beneficia de una imagen de vista previa prominente.
Las etiquetas específicas de Twitter como twitter:title, twitter:description y twitter:image anulan sus equivalentes Open Graph en Twitter. Si estas no están configuradas, Twitter recurre automáticamente a og:title, og:description y og:image. Esto significa que solo necesita agregar etiquetas específicas de Twitter cuando quiera que la vista previa de Twitter difiera de la de Facebook. La etiqueta twitter:site también puede especificar su nombre de usuario de Twitter para que se muestre con la tarjeta.
Mejores Prácticas para Imágenes
La imagen de vista previa es el elemento más impactante de una compartición social. Facebook recomienda imágenes de al menos 1200 x 630 píxeles para pantallas de alta resolución, con un mínimo de 600 x 315 píxeles. Las tarjetas summary_large_image de Twitter funcionan mejor con 1200 x 628 píxeles en una relación de aspecto 2:1. Mantenga los tamaños de archivo por debajo de 5 MB. Use JPEG para fotografías y PNG para gráficos con texto o transparencia. Evite imágenes con texto excesivo, ya que Facebook puede reducir la distribución de publicaciones con imágenes que contienen más del 20 por ciento de superposición de texto. Siempre pruebe sus imágenes con las herramientas de depuración de la plataforma antes de publicar.
Depuración y Validación
Las plataformas sociales almacenan en caché agresivamente las URLs compartidas, por lo que los cambios en sus etiquetas OG pueden no aparecer inmediatamente. El Sharing Debugger de Facebook le permite escanear una URL para actualizar su caché y ver exactamente cómo se analizan sus etiquetas. El Card Validator de Twitter muestra la vista previa de su Twitter Card y valida el markup. El Post Inspector de LinkedIn realiza una validación similar. Después de actualizar las etiquetas OG, siempre escanee la URL en estas herramientas para limpiar la vista previa en caché. Los problemas comunes incluyen URLs de imágenes relativas (siempre use URLs absolutas), etiquetas requeridas faltantes, imágenes demasiado pequeñas y errores de certificado SSL que impiden que el rastreador de la plataforma obtenga la imagen.
Preguntas Frecuentes
¿Qué son las etiquetas Open Graph?
Meta etiquetas HTML que controlan cómo aparecen las URLs cuando se comparten en redes sociales. Especifican el título, descripción, imagen y URL para las vistas previas de compartición en Facebook, LinkedIn y otras plataformas.
¿Por qué son importantes las etiquetas Open Graph?
Sin ellas, las plataformas sociales adivinan qué mostrar, lo que frecuentemente resulta en vistas previas pobres. Las etiquetas OG adecuadas aumentan las tasas de clics y aseguran la consistencia de marca en la compartición social.
¿Qué es la meta etiqueta twitter:card?
Controla cómo se muestra el contenido en Twitter. "summary" muestra una imagen pequeña, "summary_large_image" muestra una imagen grande tipo banner. Twitter recurre a las etiquetas OG para título, descripción e imagen si las etiquetas específicas de Twitter están ausentes.
¿Qué tamaño de imagen debería usar?
Facebook recomienda un mínimo de 1200 x 630 píxeles. Las tarjetas summary_large_image de Twitter funcionan mejor a 1200 x 628 píxeles (relación 2:1). Mantenga los archivos por debajo de 5 MB. Use URLs absolutas y formato JPEG o PNG.
¿Cómo depuro las etiquetas Open Graph?
Use el Sharing Debugger de Facebook, el Card Validator de Twitter o el Post Inspector de LinkedIn. Estas herramientas muestran cómo las plataformas analizan sus etiquetas y le permiten actualizar las vistas previas en caché.
Save your results & get weekly tips
Get calculator tips, formula guides, and financial insights delivered weekly. Join 10,000+ readers.
No spam. Unsubscribe anytime.