La guía rápida para usar el depurador de Facebook para corregir imágenes de WordPress

Es un problema increíblemente irritante... ha escrito una publicación fantástica para su blog de WordPress, ha creado cuidadosamente una imagen destacada para la publicación y finalmente la ha publicado. Ahora es el momento de compartirlo con el mundo en Facebook. Copie el enlace de la página, escriba una descripción ingeniosa y pegue el enlace en Facebook. Unos momentos después aparece una vista previa del enlace. Pero espera... ¡está mostrando una imagen y una descripción totalmente incorrectas! ¿Que esta pasando? La buena noticia es que este es un problema común. La mejor noticia es que se puede arreglar fácilmente usando el depurador de Facebook.

Así es como lo haces.

¿Cuál es el problema y qué tiene que ver el depurador de Facebook?

Antes de que podamos usar el depurador de Facebook para solucionar el problema de la vista previa de su enlace que aparece incorrectamente, debemos entender cuál es el problema.

Cuando comparte algo en Facebook, Facebook revisa el enlace y debe obtener información relevante para esa página. Luego almacena en caché esta información para su uso en una fecha posterior. Facebook observará el contenido de su página e intentará adivinar qué sería lo mejor para mostrar en la vista previa de su enlace. Esta información luego se guarda en los servidores de Facebook y se usa cada vez que alguien crea una publicación en Facebook con un enlace a su página.

Facebook raspa su página una vez y luego almacena en caché esta información en sus servidores. Este caché no se actualiza durante 30 días, por lo que si realiza algún cambio en su página dentro de ese período de tiempo, estos cambios no se reflejarán en la vista previa de su enlace de Facebook.

La imagen y la descripción incorrectas también pueden ocurrir cuando Facebook no ha podido extraer la información correcta de su página.

Entonces, en resumen, la vista previa incorrecta del enlace puede mostrarse cuando:

1. Facebook ha recopilado información incorrecta sobre su página.
2. La página se ha actualizado, pero Facebook almacena en caché la información de la página anterior y ese caché no se ha actualizado.

Podemos resolver ambos problemas usando dos herramientas. El complemento Yoast SEO y el depurador de Facebook.

Metaetiquetas de gráficos abiertos

Como vimos anteriormente, una de las razones por las que se ha mostrado información incorrecta en la vista previa de tu enlace en Facebook es que Facebook ha borrado la información incorrecta sobre tu página. En lugar de confiar en que Facebook determine qué sería lo mejor para mostrar en la vista previa de su enlace, puede decirle a Facebook qué mostrar agregando algunas etiquetas meta de Open Graph al encabezado de su página.

Las metaetiquetas Open Graph contienen toda la información que Facebook podría querer mostrar a los usuarios sobre su página web. En otras palabras, le dice a Facebook lo que estás compartiendo.

Si está utilizando Yoast (o un complemento de optimización de búsqueda similar), la información de Open Graph se agrega automáticamente a los encabezados de su página. Puede modificar lo que se muestra sobre su página desde estos complementos. Cuando se han agregado las metaetiquetas Open Graph correctas, podemos usar el Depurador de Facebook para decirle a Facebook que vuelva a raspar su página para que actualice su caché con la información correcta.

Uso de Yoast para editar sus metaetiquetas Open Graph

La forma más fácil de editar sus metaetiquetas Open Graph es usando el complemento Yoast SEO. Este no solo es el complemento número 1 para ayudarlo a optimizar su sitio web para que se clasifique de manera efectiva, sino que también tiene una herramienta útil que hace que sea muy fácil configurar las páginas de su sitio web para mostrar la información correcta para Facebook. Si no desea utilizar Yoast, pruebe el complemento Open Graph y Twitter Card Tags.

Primero, instale el complemento Yoast SEO (si aún no lo ha hecho) y luego abra la página que desea compartir en Facebook. Desplázate hacia abajo en la página hasta que encuentres la pestaña Yoast SEO. Verá una pestaña dentro de Yoast que tiene la etiqueta 'Social'. Haga clic en esto y tendrá dos opciones. Uno para Facebook y otro para Twitter. Selecciona Facebook y verás lo siguiente:

Yoast intenta mostrar la información correcta de Open Graph para su página automáticamente, pero no siempre es correcta. En lugar de confiar en su sistema automatizado para hacer esto, puede completar los campos de Facebook con los detalles que desea que Facebook muestre junto con la imagen que desea usar. Cuando termines, esto se verá así:

Haga clic en Actualizar para enviar estos cambios a su página en vivo y ahora tendrá la información correcta de Open Graph mostrada en los encabezados de su sitio web.

Limpia tu caché de WordPress

Hay dos lotes de caché que deben borrarse para que se muestre la información correcta en la vista previa de su enlace en Facebook. El primero es el caché en su propio sitio web. Con tantos complementos de almacenamiento en caché disponibles, deberá echar un vistazo a su propia configuración y, si es necesario, profundizar en los archivos de ayuda del complemento para averiguar cómo borrar su caché.

Si está alojando su sitio con Pressidium, puede borrar rápidamente su caché a través del complemento Pressidium que se puede encontrar en la parte superior del menú de la izquierda.

Con el caché borrado por su parte, ahora puede pasar a borrar el caché en los servidores de Facebook.

Usando el depurador de Facebook

Lo primero es lo primero y necesitamos ver inicialmente cómo Facebook está 'viendo' tu página actualmente. Para hacer esto, vaya a la página del depurador de Facebook y luego ingrese la URL de su página en la herramienta. Haga clic en 'Depurar' y verá un resumen de cómo se muestra su página junto con una vista previa del enlace. Si esto es correcto, entonces está listo, ya que esto es lo que se mostrará cuando se comparta un enlace a su página en Facebook.

Si es incorrecto, deberá verificar dos veces que haya configurado Yoast correctamente y haya borrado el caché de su sitio web. Una vez que haya hecho esto, haga clic en 'Raspar de nuevo'. Esto obliga a Facebook a actualizar su caché. ¡Esto ahora debería mostrar la información correcta! Si no es así, no se preocupe por pulsar 'Raspar de nuevo' por segunda o tercera vez. A veces, puede ser necesario un par de intentos para obligar a Facebook a obtener los detalles correctos de su página.

Más consejos de depuración de Facebook

Hay algunos otros elementos que vale la pena conocer en caso de que tenga otros problemas con la forma en que se muestra su Vista previa del enlace.

Tamaño de la imagen

Use una imagen de 1200 por 630 px cuando sea posible. Este es el tamaño óptimo para mostrar una imagen en una vista previa de enlace de Facebook. Si la relación de aspecto es diferente, es posible que encuentre elementos de su imagen 'cortados'. Si desea utilizar una imagen más grande, intente mantener esta relación de aspecto.

Si no puede ver ninguna imagen, asegúrese de que sea lo suficientemente grande. Si es más pequeño que 200 px x 200 px, Facebook no lo mostrará en absoluto.

Falta 'Fb:app_id'

Si echa un vistazo a la captura de pantalla del depurador de Facebook anterior, es posible que vea que hay un error que dice "Propiedades faltantes: faltan las siguientes propiedades: fb: app_id".

Muchas veces esta advertencia puede ignorarse. No afectará la capacidad de compartir publicaciones en absoluto. Sin embargo, afecta su capacidad para usar los datos de Facebook Insights. Si esto es algo que desea hacer, aquí le mostramos cómo solucionar este error.

1. Regístrese para una aplicación de Facebook en https://developers.facebook.com/docs/apps#register (deberá convertir su cuenta de Facebook en una cuenta de desarrollador)
2. Cree una aplicación en https://developers.facebook.com/apps y luego copie su número de identificación de la aplicación.
3. Vaya a su administrador de WordPress y luego diríjase al complemento Yoast a través del menú de la barra lateral. Haga clic en 'Social' y luego en 'Facebook'. Cerca de la parte superior, verá una sección para su ID de aplicación. Pegue esto allí y guárdelo.
4. Luego puede borrar el caché de su sitio web y luego usar el depurador de Facebook para raspar su página nuevamente. Este error ahora debería desaparecer.

Almacene previamente en caché su página con Facebook

Nuestro último consejo es almacenar previamente en caché la página de su sitio web con Facebook. Es posible que la primera persona que comparta su enlace en Facebook no vea una vista previa del enlace. Esto se debe a que Facebook aún tiene que raspar esa página (solo lo hace cuando se comparte un enlace).

Para evitar esto, puede optar por ejecutar el depurador de Facebook en cada una de sus páginas justo después de publicarlas. Esto significa que la página ahora está almacenada en caché al final de Facebook y esto significa que la primera persona que comparte la página o publicación verá instantáneamente la vista previa del enlace correcto. Solo toma unos segundos y vale la pena considerarlo si tiene una base de usuarios activa para su sitio web y desea asegurarse de que todo funcione perfectamente desde el primer momento.

Resumen

¡Usar el depurador de Facebook es una victoria rara y fácil en el mundo digital cada vez más complejo de hoy! Es una herramienta rápida y eficiente de usar. Solo recuerde borrar el caché de su propio sitio web y debería estar listo para comenzar. ¡Feliz depuración de Facebook!