Verificador de Open Graph: Optimizar tus Previsualizaciones

Que es Open Graph

Open Graph es un protocolo creado por Facebook que permite controlar como se muestra tu pagina web cuando alguien la comparte en redes sociales. Las etiquetas Open Graph definen el titulo, la descripcion, la imagen y el tipo de contenido que aparecen en la previsualizacion del enlace.

Sin etiquetas Open Graph, las redes sociales intentan adivinar el titulo y la descripcion de tu pagina a partir del contenido HTML. El resultado suele ser impredecible: un titulo truncado, una descripcion irrelevante o una imagen incorrecta. Con Open Graph, controlas exactamente que se muestra.

Twitter usa un protocolo similar llamado Twitter Cards con sus propias meta etiquetas. Sin embargo, Twitter tambien lee las etiquetas Open Graph como respaldo, por lo que configurar Open Graph correctamente cubre ambas plataformas en la mayoria de casos.

Etiquetas esenciales

Las cuatro etiquetas minimas son og:title para el titulo, og:description para la descripcion, og:image para la imagen y og:url para la URL canonica de la pagina. Estas cuatro etiquetas cubren lo basico para una previsualizacion completa en cualquier plataforma.

La imagen Open Graph es el elemento con mayor impacto visual. El tamano recomendado es 1200 por 630 pixeles, lo que da una proporcion de 1.91:1. Imagenes mas pequenas pueden mostrarse como miniaturas en lugar de previsualizaciones grandes, reduciendo significativamente la visibilidad del enlace compartido.

Etiquetas adicionales como og:type definen el tipo de contenido: article para publicaciones de blog, product para productos, y website para paginas generales. El tipo article permite anadir metadatos adicionales como autor, fecha de publicacion y seccion.

La etiqueta og:locale especifica el idioma del contenido. Para un sitio multilingue, og:locale:alternate lista los idiomas alternativos disponibles, permitiendo que las plataformas muestren la version correcta segun el idioma del usuario.

Errores comunes de configuracion

La imagen con URL relativa en lugar de absoluta es el error mas frecuente. Las plataformas sociales descargan la imagen desde sus propios servidores, por lo que necesitan una URL completa que empiece con https. Una URL relativa como barra imagenes barra og.jpg no les sirve.

Las imagenes demasiado pequenas o con proporciones incorrectas se muestran recortadas o como miniaturas. Facebook ignora imagenes de menos de 200 por 200 pixeles. LinkedIn requiere al menos 1200 por 627 para previsualizaciones grandes.

Las etiquetas duplicadas confunden a los rastreadores. Tener multiples og:title o og:image en la misma pagina, a menudo causado por plugins de CMS que inyectan etiquetas sin verificar si ya existen, puede resultar en que se muestre el contenido incorrecto.

El cache de las plataformas es otro problema comun. Despues de corregir tus etiquetas Open Graph, las plataformas pueden seguir mostrando la version antigua porque la han cacheado. Facebook, LinkedIn y Twitter ofrecen herramientas para forzar la actualizacion de la cache.

Verificar y depurar

Las herramientas de verificacion analizan la URL de tu pagina y muestran exactamente que etiquetas Open Graph detectan y como se renderizara la previsualizacion. Esto te permite identificar problemas antes de que alguien comparta tu pagina y vea una previsualizacion deficiente.

Facebook ofrece el Sharing Debugger, Twitter el Card Validator, y LinkedIn el Post Inspector. Cada uno muestra su propia interpretacion de tus etiquetas y permite forzar la recarga del cache despues de hacer correcciones.

Usar nuestro verificador Open Graph

Nuestro Verificador de Open Graph analiza cualquier URL y muestra las etiquetas Open Graph detectadas junto con una previsualizacion de como se vera el enlace al compartirlo. Identifica etiquetas faltantes, imagenes con problemas y otros errores comunes.

La herramienta es mas rapida que verificar en cada plataforma individualmente y te da una vision completa del estado de tus metadatos sociales en un solo lugar.