Si usted es un blogger, un comercializador de redes sociales o incluso un pequeño empresario, en algún momento probablemente se encontrará con el problema de que Facebook no muestra la imagen correcta de su sitio WordPress. A veces, Facebook saca una imagen vieja o peor aún, ninguna imagen en absoluto. Afortunadamente, puede solucionar fácilmente estos problemas usando una herramienta llamada Facebook Debugger. Vea algunos escenarios comunes a continuación que puede encontrar y cómo resolverlos.

Cómo Facebook Extrae Información

Cada vez que comparte cosas con WordPress, Facebook almacena sus imágenes en sus servidores y CDN. Puede pensar en esto de la misma manera que funciona la cache de su sitio, a veces tiene que borrarla para que las cosas funcionen nuevamente. Lo mismo ocurre a veces con Facebook. Si realiza actualizaciones en su sitio, Facebook puede mostrar una imagen anterior cuando vaya a compartirla, esto es porque no busca información nueva, sino que sirve la información que ya ha almacenado en cache.

Lo mismo ocurre con la información sobre su enlace y el contenido en sí. Buscan lo que llaman Open Graph Meta Tags. De acuerdo con Facebook, el protocolo de Open Graph permite que cualquier página web se convierta en un objeto en un gráfico social. Básicamente, estas son etiquetas (código) que le informan a Facebook sobre lo que está compartiendo.

¿No está seguro de si está utilizando Open Graph Meta Tags en su sitio? Bueno, probablemente lo esté, pero es posible que no lo sepa. ? Si está usando plugins populares como Yoast SEO o Social Warfare, estos de hecho, agregan automáticamente estas etiquetas detrás de escena.

Tomemos nuestra guía de optmización de velocidad de sitio web como ejemplo. Si miramos el código fuente de esa publicación, podemos ver los siguientes datos con respecto a Open Graph. Nota: Open Graph usa diferentes atributos, como og:title y el que realmente nos importa para este tutorial esog:image. Este es el código en nuestro sitio que Facebook examina para determinar qué imagen, título y descripción destacados mostrar.

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="A Beginner's Guide to Website Speed Optimization (WordPress-Friendly)" />
<meta property="og:description" content="In-depth website speed optimization guide that shows you how important it is to have a snappy website. DIY instructions and tricks to improve load times." />
<meta property="og:url" content="https://kinsta.com/learn/page-speed/" />
<meta property="og:site_name" content="Kinsta Managed WordPress Hosting" />
<meta property="article:publisher" content="https://www.facebook.com/kinstahosting" />
<meta property="article:author" content="https://www.facebook.com/mark.gavalda" />
<meta property="article:tag" content="webdev" />
<meta property="article:tag" content="webperf" />
<meta property="fb:app_id" content="148976462317083" />
<meta property="og:image" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />
<meta property="og:image:secure_url" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />

Usando el Facebook Debugger

Al igual que con cualquier plataforma o herramienta, tendrá problemas o peculiaridades para solucionar, especialmente si no sigue las pautas establecidas para las mejores prácticas. La herramienta Facebook Debugger se creó para ayudarle a resolver problemas con sus de Open Graph Meta Tags, así como para solucionar la caching.

Puede encontrar Facebook Debugger en el sitio del desarrollador de Facebook en Herramientas y soporte. Si usted comparte mucho contenido en Facebook, este es un buen enlace al marcador para referencias futuras.

Herramienta Facebook Debugger

Herramienta Facebook Debugger

Para rastrear una publicación, simplemente ingrese la URL y haga clic en «Depurar». De hecho, vamos a utilizar un caso en vivo en nuestro ejemplo. Recientemente actualizamos la imagen en nuestro artículo de optimización de la velocidad del sitio web. Cuando lo ingresemos en el Facebook Debugger, primero extraerá la información cacheada que tienen en su parte (como se ve a continuación).

Esto es lo que las personas realmente están viendo cuando comparten nuestra publicación. Sin embargo, en este caso, está sacando una imagen anterior antes de actualizar la publicación. ? También Podemos ver que og:image es el nombre de archivo viejo.

Imagen y URL vieja mostrándose en Facebook Debugger

Imagen y URL vieja mostrándose en Facebook Debugger

Entonces, ¿qué podemos hacer? Hay dos cosas que deben ser hechas. Siga los pasos a continuación.

Paso 1 – Borre la WordPress Cache para esa URL

Lo primero que debemos hacer para asegurar que Facebook capte la información más reciente y limpiar la cache en nuestro sitio WordPress. Así es, técnicamente hay dos capas de caching que podrían estar involucradas aquí. Si todavía se almacena en cache la imagen anterior en su sitio, el Facebook Debugger no podrá ayudar a solucionar su problema ya que simplemente extraerá la información en cache.

Con respecto a WordPress caching, estamos listos (y podemos pasar al paso 2), porque con la caching a nivel del servidor Kinsta, cada vez que se actualiza una publicación, la cache para esa página o publicación se borra automáticamente. Lea más sobre cómo funciona la caching de Kinsta. Si está utilizando una solución de caching diferente o un plugin de terceros, necesitará consultar su documentación para asegurarse de saber cómo borrar la cache de una URL. Aquí hay algunos enlaces a algunas de las populares soluciones de caching:

Si todo lo demás falla, siempre puede borrar la cache en todo su sitio WordPress (como se ve a continuación). Sin embargo, por razones de rendimiento, esto generalmente no se recomienda ya que su sitio tendrá que volver a regenerarse de la cache, lo que degrada los tiempos de carga entretanto.

Borrar la WordPress Cache

Borrar la WordPress Cache

Y si todavía tiene problemas, su imagen también puede cargarse de la cache de su CDN. En cuyo caso puede necesitar purgar la cache de su CDN.

Paso 2 – Raspar Nuevamente en Facebook Debugger

Ahora que la cache fue borrada para la publicación o página en cuestión, tendremos que volver a rasparla en la herramienta Facebook Debugger. Entonces ingresamos la URL y hacemos clic en el botón «Volver a raspar».

Volver a Raspar en Facebook Debugger

Volver a Raspar en Facebook Debugger

Podría encontrar una advertencia. En nuestra experiencia, estas no son siempre las más precisas. Por ejemplo, vemos una advertencia que dice que nuestra imagen excedió el tamaño máximo de 8 MB o que el servidor fue demasiado lento para responder. En primer lugar, nuestra imagen no está cerca de ese tamaño, de hecho, solo pesa 160.63 KB. En segundo lugar, nuestro servidor es muy rápido y toda la página se carga en menos de 1 segundo.

Advertencia de Facebook

Advertencia de Facebook

Así que aquí es donde simplemente presionamos el botón «Raspar de nuevo» por segunda vez. Sí, suena extraño, pero muchas veces es posible que necesite raspar dos veces. Solo toma unos segundos. ¡Y bum! Podemos ver a continuación que ahora está mostrando nuestra nueva imagen destacada y si miramos el atributoog:imagede hecho es el nuevo nombre de archivo.

Nueva imagen en la herramienta Facebook Debugger

Nueva imagen en la herramienta Facebook Debugger

Es importante tener en cuenta que esto no actualizará la imagen de las publicaciones de Facebook ya compartidas. Esto solo afecta las publicaciones en las que usted u otras personas comparten después de los hechos.

Consejos Adicionales de Facebook Debugger

Puede utilizar la herramienta Facebook Debugger no solo para actualizar imágenes antiguas, sino también el contenido (texto) que se ve en sus publicaciones de Facebook. El título y la descripción son Open Graph Meta Tags. Entonces, si necesita reformular algo, actualícelo en WordPress y siga exactamente los mismos pasos anteriores.

¿Luchando con el tiempo de inactividad y los problemas de WordPress? Kinsta es la solución de alojamiento diseñada para ahorrarle tiempo! Vea nuestras características

Las Características de la ‘og:image’ Proporcionada Aún no Están Disponibles

Además, solo porque ignoramos las advertencias anteriores no significa que sean inútiles siempre. De hecho, hay tamaños recomendados cuando se trata de imágenes que debería usar. De lo contrario, cosas malas pueden suceder. Como una imagen que no aparece en absoluto (como se ve a continuación en esta advertencia).

Las propiedades proporcionadas ‘og: image’ aún no están disponibles porque las imágenes nuevas se procesan de forma asíncrona. Para garantizar que los recursos compartidos de las nuevas URLs incluyan una imagen, especifique las dimensiones con las etiquetas ‘og: image: width’ y ‘og: image: height’.

Facebook Debugger – imagen demasiado pequeña

Facebook Debugger – imagen demasiado pequeña

Lo anterior ocurrió porque nuestra imagen era demasiado pequeña. El tamaño de imagen mínimo que Facebook requiere es de 200 x 200 píxeles. Por lo general, cuanto más grande, mejor cuando se trata de imágenes de Facebook. Buffer tiene una gran publicación con todos los tamaños de imágenes recomendados para las redes sociales. 1,200 x 630 pixeles parece funcionar mejor para la mayoría de las personas. Está bien que aumente también, de hecho, nuestra imagen en nuestra publicación en el primer ejemplo fue de 1460 x 730. Solo recuerde que Facebook recortará todo lo que será mayor, por lo que mantener esa relación de aspecto es una de las partes más importantes.

Si está utilizando un plugin como Yoast SEO, también puede ser recomendado que configure la imagen manualmente. Quizás sus imágenes destacadas en su tema de WordPress tengan una relación de aspecto o tamaño diferente. ¡O quizás ni siquiera use imágenes destacadas!

En este caso, Yoast SEO plugin le permite cargar manualmente una imagen de tamaño diferente solo para Facebook, que llenará aquellas Open Graph Meta Tags . También puede establecer manualmente el título y la descripción si es necesario.

Casilla social de Yoast SEO para Facebook

Casilla social de Yoast SEO para Facebook

Las Siguientes Características Requeridas Faltan: fb:app_id

Esta advertencia también puede ver sobre la Facebook App ID faltante. Es importante notar que esto no interfiere con la capacidad de compartir publicaciones de Facebook en modo alguno. Muchas veces puede ignorarla. Sin embargo esto sí limita su capacidad de usar los datos de Facebook Insights.

Las Siguientes Características Requeridas Faltan: fb:app_id

Las Siguientes Características Requeridas Faltan: fb:app_id

Las Siguientes Características Requeridas Faltan: fb:app_id

Si quiere datos adicionales de Insights, necesita agregar Facebook App ID a su sitio. A continuación puede leer las instrucciones sobre cómo hacerlo.

  1. Cree su Facebook App: https://developers.facebook.com/docs/apps/register (completamente gratuito).
  2. Copie su Facebook App ID desde el panel de control de la aplicación.
  3. En su panel de control WordPress haga clic en «SEO» en el lado izquierdo
  4. Bajo la pestaña «Facebook» puede introducir su Facebook App ID.
Agregar Facebook App ID

Agregar Facebook App ID

Asegúrese de borrar la cache de su sitio antes de probar la herramienta.

Resumen

Espero que entienda un poco más sobre la herramienta Facebook Debugger  y cómo usarla para solucionar problemas y corregir imágenes en su sitio WordPress. No se olvide borrar todas las capas de caching y luego rasparlas. Sus nuevas imágenes deberían aparecer correctamente para todos que comparten su contenido en Facebook

12
Shares