Facebook Debugger es una herramienta que le permite analizar y solucionar problemas de etiquetas OpenGraph para cualquiera de sus páginas. Con el depurador, puede concentrarse rápidamente en la fuente de errores dentro de sus fragmentos enriquecidos de redes sociales .
Dado que las redes sociales y el mismo Facebook son componentes clave en cualquier estrategia de marketing, saber cómo usar esta herramienta puede dar sus frutos con creces.
¡Hablemos del depurador de Facebook y OpenGraph!
OpenGraph se refiere a una colección de etiquetas que puede usar para agregar metadatos a sus páginas y publicaciones. Las plataformas de redes sociales usan esas etiquetas OpenGraph para generar fragmentos enriquecidos que muestran a sus usuarios:
Si no usa etiquetas OpenGraph, las plataformas de redes sociales generarán automáticamente fragmentos para sus páginas cuando las comparta. Sin embargo, con ese enfoque, pierde todo el control sobre cómo se ven esos fragmentos enriquecidos.
Esto significa que si la imagen adjunta no se ve bien, debe cambiarla dentro de WordPress. Si no te gusta la meta descripción que usa Facebook, también deberás modificar tu contenido. En general, este no es un enfoque inteligente si desea aprovechar las redes sociales como fuente de tráfico.
Incluso este ejemplo simple requiere que agregue varias etiquetas OpenGraph en segundo plano. Para el fragmento enriquecido, debe usar las siguientes etiquetas:
|
01
02
03
04
05
06
|
<meta property="og:title" content="Article Title"/><meta property="og:description" content="Article Description"/><meta property="og:type" content="article"/><meta property="og:url" content="http://example.com/link/to/article"/><meta property="og:site_name" content="Site Name"/><meta property="og:image" content="http://example.com/image/src.jpg"/> |
Este ejemplo es de un artículo anterior de Elegant Themes sobre las etiquetas OpenGraph y cómo usarlas (¡que deberías leer!). En pocas palabras, hay dos formas de agregar etiquetas OpenGraph a su contenido:
- A mano. Al igual que con el marcado Schema , puede agregar etiquetas OpenGraph a sus páginas manualmente. La desventaja es que tienes que hacer esto para cada página de tu sitio web que te gustaría compartir en las redes sociales.
- Uso de complementos. Hay muchos complementos que generan etiquetas OpenGraph para su contenido automáticamente. La opción de complemento más popular es Yoast SEO , aunque otros también pueden hacer esto.
Desafortunadamente, la versión gratuita de Yoast SEO no incluye la funcionalidad de vista previa de fragmentos enriquecidos. Sin embargo, le permite modificar las etiquetas OpenGraph de su contenido usando un editor simple.
Si ya está utilizando Yoast SEO, aprovechar su funcionalidad OpenGraph es la forma más fácil de garantizar que sus fragmentos de redes sociales se vean exactamente como usted desea.
Por qué debería usar el depurador de Facebook para OpenGraph
Facebook Debugger es una herramienta que puede ayudarlo a garantizar que sus fragmentos enriquecidos de redes sociales funcionen perfectamente en todos los ámbitos. Para usarlo, simplemente visite la página Sharing Debugger para desarrolladores de Facebook. Aquí, ingrese la URL de la página cuyas etiquetas desea verificar y haga clic en el botón Depurar :
Ni siquiera necesita una cuenta de Facebook para usar el depurador. Tan pronto como analice una URL, le mostrará una vista previa de su fragmento enriquecido junto con información como su URL canónica :
Si se desplaza hacia abajo, puede analizar todas las etiquetas OpenGraph de la página:
Tenga en cuenta que el Depurador de Facebook no le permite corregir errores ni modificar sus etiquetas directamente. Sin embargo, le muestra una vista previa de cómo se verá su contenido en Facebook. Más importante aún, también te da advertencias si detecta errores en tus etiquetas de OpenGraph:
Este error en particular es uno de los tres que le mostraremos cómo solucionar en la siguiente sección.
Cómo usar el depurador de Facebook para corregir 3 errores comunes de OpenGraph
Para esta sección, nos basaremos principalmente en el depurador de Facebook. Sin embargo, si está utilizando Yoast SEO, también le mostraremos cómo el complemento puede ayudarlo a corregir un par de errores de OpenGraph. ¡Hagámoslo!
1. Raspe una URL nuevamente para actualizar las imágenes asociadas
Uno de los errores más comunes con los que te puedes encontrar con las etiquetas de OpenGraph es que el depurador de Facebook mostrará imágenes destacadas desactualizadas. Esto sucede porque no se actualiza en Facebook automáticamente cuando actualizas una página o la imagen asociada a una publicación. Cuando usa etiquetas OpenGraph para imágenes, Facebook almacena en caché esos archivos para mejorar el rendimiento. En consecuencia, si actualiza las imágenes destacadas por su parte, debe «obligar» a Facebook a hacer lo mismo por su parte.
La forma más fácil de hacer esto es usar la funcionalidad Scrape Again de Facebook Debugger . Puede encontrar esta opción justo debajo de Cuándo y cómo extrajimos la URL por última vez :
Haga clic en el botón Raspar de nuevo y vea si la imagen destacada de su página cambia en la sección Vista previa del enlace . Si no es así, a veces hacer clic en el botón nuevamente funciona (no es una tecnología muy avanzada, ¡pero funciona!)
Si la imagen no se carga, es posible que tenga un problema de almacenamiento en caché en su sitio web. En este caso, querrá borrar el caché de su sitio y luego usar el botón Raspar de nuevo para forzar a Facebook a actualizar la información de su imagen.
2. Solucione el error «las propiedades aún no están disponibles»
La etiqueta og:image es lo que OpenGraph usa para declarar qué archivo de imagen deben mostrar las plataformas de redes sociales para cada página. En algunos casos, es posible que se encuentre con el error «og: las propiedades de la imagen aún no están disponibles».
Esto significa que podría haber un problema con la resolución de la imagen destacada. Si el tamaño de su imagen es inferior a 200 × 200, no funcionará en absoluto.
Idealmente, las imágenes que configure para sus fragmentos enriquecidos de redes sociales deben tener 1080 píxeles de ancho o más. Las imágenes destacadas grandes no solo se ven mejor, sino que también pueden ayudar a llamar la atención sobre su contenido en las redes sociales:
Si desea leer más sobre las imágenes y la etiqueta og:image , hay otro artículo en el blog de Elegant Themes. En pocas palabras, si el Depurador de Facebook devuelve un error relacionado con el tamaño de su imagen, generalmente puede solucionarlo utilizando uno de estos dos enfoques:
- Actualice la imagen destacada de la página con una versión de mayor resolución (¡y siga usando imágenes de alta calidad a partir de ahora!).
- Use Yoast SEO para indicar un archivo de imagen diferente dentro de su etiqueta og:image .
Para Yoast SEO, puede encontrar la opción para cambiar su «imagen de Facebook» en la pestaña Social para la publicación o página que desea actualizar:
Una vez que actualice su imagen o la etiqueta correspondiente, use el botón Scrape Again en el depurador de Facebook. La advertencia «og: las propiedades de la imagen aún no están disponibles» debería desaparecer y su imagen debería mostrarse correctamente.
3. Agregue la propiedad fb:app_id faltante a su sitio web
Volvamos a una advertencia presentada anteriormente en el artículo:
Esta advertencia significa que no hay una ID de aplicación de Facebook asociada con su sitio web. No necesita una identificación de aplicación para compartir su contenido en las redes sociales, pero le permite obtener acceso a Facebook Insights.
Dado que Facebook Insights puede ayudarlo a mejorar sus esfuerzos de marketing y medir el rendimiento de las publicaciones, vale la pena dedicarle un poco de tiempo a la configuración. Si está interesado en obtener acceso a esos análisis, deberá generar una ID de aplicación de Facebook para su sitio web.
Una vez que tenga la ID de la aplicación, puede usar Yoast SEO para agregarla a sus páginas usando la propiedad fb:app_id . Para hacer esto, vaya a la pestaña SEO > Social > Facebook en su sitio y busque el campo ID de la aplicación de Facebook :
Agregue su ID de aplicación, guarde los cambios en la configuración del complemento y estará listo para comenzar. De ahora en adelante, el Depurador de Facebook no debería devolver ningún error relacionado con una propiedad fb:app_id faltante .
Conclusión
El Depurador de Facebook es notablemente simple de usar. Sin embargo, algunos errores con los que se puede encontrar son difíciles de entender sin una comprensión básica de las etiquetas de OpenGraph . En términos generales, si usa un complemento como Yoast SEO , no tendrá que preocuparse por configurar las etiquetas manualmente.
Con el depurador de Facebook, puede solucionar rápidamente los errores de OpenGraph al:
- Raspar una URL nuevamente para actualizar las imágenes asociadas.
- Corrección del error «og: las propiedades de la imagen aún no están disponibles».
- Agregar la propiedad fb:app_id faltante a su sitio web.
¿Tienes alguna pregunta sobre cómo usar el depurador de Facebook? ¡Hablemos de ellos en la sección de comentarios a continuación!
Imagen en miniatura del artículo de Sergey Targasov / shutterstock.com.