Cómo utilizar el depurador OpenGraph de Facebook para corregir errores comunes

El depurador de Facebook 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 los fragmentos enriquecidos de sus redes sociales.

Dado que las redes sociales y el propio Facebook son componentes clave en cualquier estrategia de marketing, saber cómo utilizar esta herramienta puede dar sus frutos.

¡Hablemos del depurador de Facebook y OpenGraph!

¿Qué es OpenGraph (y cómo agregar etiquetas en WordPress)?

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 utilizan esas etiquetas OpenGraph para generar los fragmentos enriquecidos que muestran a sus usuarios:

Si no usa etiquetas OpenGraph, las plataformas de redes sociales generarán automáticamente fragmentos de sus páginas cuando las comparta. Sin embargo, con ese enfoque, pierde todo el control sobre el aspecto de esos fragmentos enriquecidos.

Esto significa que si la imagen adjunta no se ve bien, debe cambiarla dentro de WordPress. Si no le gusta la meta descripción que usa Facebook, también deberá modificar su contenido. En general, este no es un enfoque inteligente si desea aprovechar las redes sociales como fuente de tráfico.

Incluso este simple ejemplo requiere que agregue varias etiquetas OpenGraph en segundo plano. Para el fragmento enriquecido, debe utilizar las siguientes etiquetas:

<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 etiquetas OpenGraph y cómo usarlas (¡que debería leer!). En pocas palabras, hay dos formas de agregar etiquetas OpenGraph a su contenido:

1. A mano. Al igual que con el marcado de esquema, puede agregar etiquetas OpenGraph a sus páginas manualmente. La desventaja es que debe hacer esto para cada página de su sitio web que le gustaría compartir en las redes sociales.
2. Usando 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 hacerlo.

Desafortunadamente, la versión gratuita de Yoast SEO no incluye la funcionalidad de vista previa de fragmentos enriquecidos. Sin embargo, sí le permiten modificar las etiquetas OpenGraph de su contenido mediante un sencillo editor.

Si ya está utilizando Yoast SEO, aprovechar su funcionalidad OpenGraph es la forma más fácil de asegurarse de que sus fragmentos de redes sociales se vean exactamente como usted desea.

Por qué debería utilizar el depurador de Facebook para OpenGraph

El depurador de Facebook es una herramienta que puede ayudarlo a garantizar que los fragmentos enriquecidos de sus 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 más 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 le da advertencias si detecta errores en sus etiquetas OpenGraph:

Este error en particular es uno de los tres que le mostraremos cómo solucionar problemas 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. Vuelva a raspar una URL para actualizar las imágenes asociadas

Uno de los errores más comunes que puede encontrar con las etiquetas OpenGraph es que el depurador de Facebook mostrará imágenes destacadas desactualizadas. Esto sucede porque no se actualiza en Facebook automáticamente cuando actualiza una página o la imagen asociada a una publicación. Cuando usa etiquetas OpenGraph para imágenes, Facebook almacena en caché esos archivos en su extremo 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 sencilla de hacerlo es utilizar la función Scrape Again del depurador de Facebook. Puede encontrar esta opción justo debajo de Cuándo y cómo extraemos la URL por última vez :

Haga clic en el botón Scrape Again y vea si la imagen destacada de su página cambia en la sección Link Preview . Si no es así, a veces hacer clic en el botón nuevamente funciona (no es de muy alta tecnología, ¡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 la caché de su sitio y luego usar el botón Scrape Again para obligar a Facebook a actualizar la información de su imagen.

2. Corrija el error "las propiedades aún no están disponibles"

La etiqueta og: image es lo que utiliza OpenGraph 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 puede 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 establezca para sus fragmentos enriquecidos de redes sociales deben tener 1080 píxeles de ancho o más. Las imágenes destacadas de gran tamaño 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 imágenes y la etiqueta og: image , hay otro artículo en el blog Elegant Themes. En pocas palabras, si el depurador de Facebook devuelve un error relacionado con el tamaño de su imagen, generalmente puede solucionarlo usando uno de estos dos enfoques:

1. Actualice la imagen destacada de la página con una versión de mayor resolución (¡y limítese a usar imágenes de alta calidad a partir de ahora!).
2. Utilice Yoast SEO para indicar un archivo de imagen diferente dentro de su etiqueta de imagen og : .

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 la imagen debería mostrarse correctamente.

3. Agregue la propiedad fb: app_id faltante a su sitio web

Regresemos a una advertencia presentada anteriormente en el artículo:

Esta advertencia significa que no hay un ID de aplicación de Facebook asociado con su sitio web. No necesita una ID 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 un poco de tiempo de 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 listo. A partir de ahora, 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 muy fácil de usar. Sin embargo, algunos errores que puede encontrar son difíciles de entender sin una comprensión básica de las etiquetas OpenGraph. En términos generales, si usa un complemento como Yoast SEO, no tendrá que preocuparse por configurar etiquetas manualmente.

Con el depurador de Facebook, puede solucionar rápidamente los errores de OpenGraph al:

1. Raspando una URL nuevamente para actualizar las imágenes asociadas.
2. Se corrigió el error "og: las propiedades de la imagen aún no están disponibles".
3. Agregar la propiedad fb: app_id faltante a su sitio web.

¿Tiene alguna pregunta sobre cómo utilizar 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.