Facebook Sharing Debugger: Cómo usarlo y solucionar problemas OG
A la hora de compartir un enlace en Facebook se genera automáticamente una previsualización del contenido de dicho enlace (imagen, título y descripción). El problema es que a veces esta información no se muestra correctamente por diversos motivos y puede llegar a ser un verdadero quebradero de cabeza.
Para solucionar estos problemas Facebook tiene una herramienta llamada Facebook Sharing Debugger que sirve para poder previsualizar cómo se verá el enlace al ser compartido y solucionar varios de los posibles errores que estén causando que no se muestre correctamente.
En este artículo te voy a explicar en detalle qué es Facebook Sharing Debugger y cómo utilizarlo para solucionar los problemas más comunes.
- Qué es el Facebook Sharing Debugger y para qué sirve
- Cómo usar el Facebook Sharing Debugger
- Cómo acceder al Facebook Sharing Debugger
- Qué información analiza el Facebook Sharing Debugger
- Problemas más comunes y cómo arreglarlos con Facebook Sharing Debugger
- Facebook no muestra la imagen correcta o actualizada al compartir
- El botón de Volver a extraer o Scrape again no actualiza la vista previa
- Facebook no muestra imagen al compartir
- Facebook no muestra el título o descripción correctos o actualizados
- Facebook Debugger y WordPress: configuración correcta de Open Graph
- Configurar Open Graph en Rank Math
- Configurar Open Graph en Yoast SEO
- Cómo optimizar tu hosting para que el debugger funcione correctamente
Qué es el Facebook Sharing Debugger y para qué sirve
Estoy seguro que alguna vez te ha pasado: vas a compartir un enlace en Facebook, y te pasa alguna de estas cosas:
- La imagen no es la correcta.
- La imagen no carga.
- El título o descripción no se corresponden.
Seguramente hayas actualizado alguna de estas cosas (imagen de compartir, título, etc.), Facebook no se ha enterado del cambio y por lo tanto no muestra la información actualizada. Es un error bastante molesto pero por suerte tiene fácil solución: Facebook Sharing Debugger o Depurador de contenido compartido.
Esta herramienta es totalmente gratuita y ha sido creada por la propia gente de Meta. Sirve para hacer una vista previa de cómo se va a ver tu enlace cuando lo compartas en Facebook y además (y esto es lo interesante) también sirve para “refrescar” los metadatos de dicho enlace. Te explico a continuación cómo funciona.
Cómo usar el Facebook Sharing Debugger
Lo cierto es que el Depurador de Contenido Compartido de Facebook es una herramienta muy fácil de usar ya que es muy intuitiva. Basta con pegar una URL y pulsar en el botón “Depurar”, para ver una vista previa. Pero vamos a verlo paso a paso.
Cómo acceder al Facebook Sharing Debugger
Meta proporciona una serie de recursos orientados a desarrolladores en su web (Meta for Developers) . Desde este enlace puedes acceder al Depurador de contenido compartido desde el menú Recursos > Herramientas para desarrolladores > Depurador de contenido compartido.
Pero para que puedas acceder fácilmente te dejo aquí el enlace directo. Desde él puedes acceder directamente a Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
Eso sí, para poder utilizar la herramienta tienes que iniciar sesión en tu cuenta de Facebook, por lo que es imprescindible que estés registrado. No necesitas más que una cuenta normal de Facebook.
Como ya te dije antes, una vez hayas accedido verás que tienes un campo en el que pegar el enlace a analizar y un botón de “Depurar”. También verás arriba una pestaña de “Invalidador de lote” o “Facebook Batch Invalidator” que sirve por si quieres analizar varias URL a la vez (debes introducirlas separadas por un espacio). Es importante que introduzcas la URL canónica y que no tenga redirección a otra URL, para evitar problemas.
Qué información analiza el Facebook Sharing Debugger
Tras introducir una URL y darle a “Depurar”, verás los resultados del análisis. Para poder explicarte cómo interpretar los resultados que devuelve Facebook Sharing Debugger voy a hacer una prueba con la URL de la página principal de Raiola, como puedes ver en la siguiente imagen.
En primer lugar puedes ver el tiempo exacto que ha pasado desde la última vez que Facebook escaneó y extrajo los datos de la URL, el código de respuesta y la vista previa del enlace tal y como se verá al compartirlo en Facebook. Además verás que al lado del tiempo de extracción hay un botón de “Volver a extraer”, que sirve para forzar la actualización de los metadatos del enlace.
Más abajo verás información relativa a las etiquetas Open Graph, que son unas etiquetas de HTML que se colocan dentro del <head> de tu página. Sirven para que Facebook sepa que información sobre tu página debe compartir: qué imagen para la vista previa, qué título, qué descripción, etc. Te explico las más importantes:
- fb:app_id: Es el ID de tu aplicación de Facebook, que conecta con tu sitio web.
- og:url: La dirección de la página.
- og:type: El tipo de contenido. En el caso de este ejemplo “website”.
- og:title: El título que se utilizará al compartir el enlace.
- og:description: La descripción que se utilizará al compartir el enlace.
- og:image: La imagen que se utilizará al compartir el enlace. Lo recomendado es que sea de 1200x630px y en formato jpg, png o webp.
- og:image:alt: El texto alternativo para la imagen de compartir.
El protocolo Open Graph fue creado por Facebook (Meta) en 2010 con el objetivo de estandarizar los metadatos de las páginas web.
Si no configuras estás etiquetas en tu web, Facebook elegirá la información que considere, por lo que es conveniente configurarlas para asegurarte de que todo se muestra exactamente como tu quieres. Si necesitas más información o simplemente quieres saber más sobre este tema puedes echar un vistazo a este artículo sobre las etiquetas Open Graph.
Problemas más comunes y cómo arreglarlos con Facebook Sharing Debugger
Ahora que ya hemos visto qué es el Facebook Sharing Debugger o Depurador de contenido compartido y cómo interpretar los resultados al utilizarlo, es buen momento para empezar a ver cómo solucionar los problemas más frecuentes.
Facebook no muestra la imagen correcta o actualizada al compartir
Es uno de los problemas más comunes, por ello es importante entender cómo funciona Facebook a la hora de mostrar los enlaces compartidos.
Imagina que en un artículo de tu web cambias la imagen de compartir, pero cuando vas a compartir el enlace en Facebook sigues viendo la imagen antigua. ¿Por qué ocurre esto? Porque Facebook guarda los metadatos del enlace en caché y seguramente está mostrando la imagen cacheada. Facebook puede tardar hasta 30 días en volver a extraer información de tu enlace, y seguro que no quieres tener que esperar tanto tiempo, así que para solucionar esto sigue las siguientes instrucciones:
- Abre el Depurador de contenido compartido de Facebook: https://developers.facebook.com/tools/debug/
- Introduce la URL y pulsa en “Depurar”.
- En la siguiente pantalla, pulsa el botón “Volver a extraer” o “Scrape again” para forzar la actualización de los metadatos del enlace.
Haciendo lo anterior, le estarás diciendo a Facebook que escanee de nuevo tu enlace y actualice la información de título, descripción, imagen destacada, etc. Ten en cuenta que a veces puede que tengas que hacer un par de intentos o incluso esperar unos minutos.
El botón de Volver a extraer o Scrape again no actualiza la vista previa
Si has seguido todos los pasos del punto anterior y aun así no consigues ver los metadatos de tu enlace correctamente actualizados, no te agobies porque vamos a ver por qué puede estar sucediendo esto.
Si usas algún tipo de caché, puede que le estés dando a Facebook una versión cacheada de tu URL, por lo que aunque vuelvas a pulsar en “Volver a extraer” no obtendrás resultados distintos. Si utilizas NGINX o Varnish como sistema de caché en tu servidor, utilizas WordPress en tu web y algún plugin de caché como WP Rocket o LiteSpeed o usas una CDN como Cloudflare o BunnyCDN, vacía la caché antes de volver a escanear tu URL con Facebook Sharing Debugger. Una vez vaciada la caché correspondiente vuelve a extraer los datos de la URL con el botón “Volver a extraer”.
Si aun con esto no consigues ver los metadatos actualizados de tu URL puedes probar a escanear la URL con algún parámetro para intentar “engañar” al depurador de contenido y que piense que es una URL diferente. Por ejemplo, en vez de usar miweb.com prueba con miweb.com?test=on. Realmente el contenido es el mismo, pero para la herramienta la URL es diferente por lo que con suerte lograrás que los metadatos se actualicen.
Facebook no muestra imagen al compartir
Si tu problema es que directamente no se muestra ninguna imagen de compartir puede que el problema esté en las etiquetas de Open Graph que te he mencionado al principio del post. Algunos de los posibles problemas son:
- og:image not specified: Seguramente no exista la etiqueta en tu página. Añádela correctamente para solucionarlo.
- og:image could not be downloaded: La URL de tu imagen no es accesible. Puede ser porque hayas escrito mal la URL de la imagen, porque esté bloqueada en el robots.txt, etc.
- Image too small: La imagen es demasiado pequeña. Aunque el tamaño de 1200x630px es recomendado, el mínimo obligatorio es de 200x200px.
En resumen: asegúrate de tener las etiquetas Open Graph necesarias incluidas en el <head> de tu página, asegúrate de que la ruta de la imagen no está bloqueada y es accesible y asegúrate de que la imagen cumple con las medidas requeridas por Facebook.
Facebook no muestra el título o descripción correctos o actualizados
En algunos casos el problema no es la imagen si no el título o la descripción. Si el problema es que has cambiado el título y/o la descripción de tu enlace y no lo estás viendo actualizado en la vista previa, simplemente sigue los mismos pasos que hemos visto antes con el caso de la imagen.
Además existen una serie de errores comunes relacionados con el título y descripción en Facebook Sharing Debugger:
- og:title too long: El título que has incluido en las etiquetas Open Graph es demasiado largo. Lo ideal es que sea de menos de 90 caracteres.
- og:description not specified: No hay incluida una etiqueta Open Graph para la descripción.
Facebook Debugger y WordPress: configuración correcta de Open Graph
Si utilizas WordPress y quieres asegurarte de tener bien configuradas las etiquetas de Open Graph sigue leyendo porque te voy a explicar cómo hacerlo. Para ello me voy a basar en 2 de los plugins más utilizados para trabajar el SEO de tu web en WordPress: Rank Math y Yoast SEO. Si utilizas algún otro plugin no te preocupes porque el proceso seguramente sea similar. De todos modos, si tienes alguna duda al respecto no te lo pienses y deja un comentario en este artículo e intentaremos echarte un cable.
Configurar Open Graph en Rank Math
Rank Math es probablemente el mejor plugin de SEO para WordPress. Entre otra cosas permite trabajar el Schema de tu sitio, monitorizar errores 404, configurar redirecciones, generar sitemaps, y por supuesto configurar las etiquetas Open Graph de tus publicaciones o páginas. Veamos cómo.
Si vas a Rank Math SEO > Títulos y meta podrás configurar globalmente la imagen de compartir, título, descripción y algunos ajustes más.
En la pestaña Meta Global podrás configurar la miniatura de Open Graph y el tipo de tarjeta de X (Twitter).
En la pestaña Meta Social puedes configurar los ajustes relativos a tus cuentas de Facebook y X.
En las pestañas Entradas y Páginas (si tienes algún CPT creado, tendrás también su pestaña correspondiente para configurarlo) podrás configurar el título y descripción que van a tener tus páginas / entradas de blog / tipos de contenido personalizado o CPTs (además de otras cosas como el tipo de Schema, etc).
Por supuesto para configurar estos campos puedes utilizar valores dinámicos (entre símbolos de %) como por ejemplo:
- %title%
- %page%
- %sitename%
- %currentdate%
Si quieres ver todos los valores dinámicos disponibles en Rank Math puedes hacerlo en el siguiente link: https://rankmath.com/kb/variables-in-seo-title-description/
Como te decía, estos son ajustes globales los cuales Rank Math utilizará por defecto en cualquier página, entrada o CPT salvo que le indiques lo contrario de forma individual. Dicho de otra forma, puedes configurar las etiquetas Open Graph de título, descripción, imagen de compartir, etc. individualmente por cada post, página o entrada de CPT, pero si no lo haces Rank Math utilizará los que hayas configurado por defecto. Veamos como configurar Open Graph individualmente en una página, post o entrada de un Custom Post Type.
Si editas la entrada, post o entrada de un CPT verás que hay una sección de Rank Math SEO. En esa sección pulsa en la pestaña Social. En el popup que se abrirá verás un “toggle” para previsualizar cómo se verá el enlace al ser compartido en Facebook y X. Debajo podrás seleccionar una imagen específica para la etiqueta Open Graph de ese post así como un título y descripción.
Configurar Open Graph en Yoast SEO
Otro de los grandes plugins de SEO para WordPress es Yoast SEO. Con Yoast también es posible configurar correctamente todo el tema de Open Graph en tu sitio web, te enseño cómo hacerlo.
Lo primero que te recomiendo hacer es ir a Ajustes > General > Representación del sitio y cubrir los datos de “Organización” y perfiles sociales.
Después ve a Ajustes > General > Básicos del sitio y rellena la “Información del sitio”. Aquí verás campos como la “Imagen del sitio” que es la imagen por defecto que se usará como imagen de compartir cuando no elijas una específica.
De nuevo dentro de la pestaña General, ve a “Características del sitio” y asegúrate de que en la sección “Compartir en redes sociales” tienes marcadas las casillas de “Datos de Open Graph” y “Datos de la tarjeta de X”.
Finalmente, en Ajustes > Tipos de contenido podrás configurar el título y descripción de Open Graph para las entradas, páginas y Custom Post Type que tengas. En este caso, configurar una imagen de compartir por defecto diferente para páginas, entradas y CPTs es una opción premium, así como elegir una imagen de compartir específica para cada post, página o entrada de CPT.
Como te decía en el párrafo anterior, con Yoast también puedes configurar individualmente título, descripción e imagen de compartir para cada página, entrada de blog o entrada de tus Custom Post Types, aunque es una opción que solo está disponible si pagas el Premium. Si tienes cuenta premium de Yoast, tan solo tienes que editar la página/post y en la sección Yoast SEO configurar los campos que están dentro de la pestaña “Social”
Cómo optimizar tu hosting para que el debugger funcione correctamente
El funcionamiento de la herramienta de Facebook Sharing Debugger no deja de ser un bot de Facebook que rastrea las URL de tu web para mostrarte un análisis y vista previa de los mismos. Por ello es importante que tu web funcione correctamente para, por decirlo de alguna forma, ponérselo fácil al bot y que no tenga problemas a la hora de rastrearla. Si tu hosting no gestiona bien aspectos como la caché o las redirecciones, es bastante habitual encontrarse con este tipo de problemas. Por ejemplo nuestro hosting para WordPress te garantiza un rendimiento óptimo ya que utiliza discos SSD NVMe y servidor web LiteSpeed.
Más allá del uso del debugger, hay ciertos factores técnicos que pueden afectar a cómo Facebook interpreta tu web:
- Tiempo de carga: Asegúrate de que tu web cargue rápido, si tu web es lenta puede que el bot “se canse” y abandone.
- Redirecciones: Revisa si la URL que estás escaneando tiene redirecciones del tipo “http a https”, “sin www a www”, etc. No es recomendable que la URL a escanear tenga largas cadenas de redirecciones.
- Certificado SSL: Asegúrate de tener correctamente instalado un certificado SSL para que el bot del Depurador de contenido compartido no “proteste”.
- Imágenes accesibles: Las imágenes que utilices como imagen de compartir deben estar accesibles. Utiliza siempre la URL absoluta y asegúrate que no estén bloqueadas en el .htaccess
- Sistema de caché: Si usas algún sistema de caché en el servidor, algún plugin de caché para WordPress, etc. y estas teniendo problemas con Facebook Sharing Debugger recuerda vaciar caché antes de escanear tus URL.
