Facebook puede ser un gran lugar para compartir publicaciones y empezar a publicitar tu contenido. Sin embargo, puedes notar que algunos de tus enlaces compartidos no contienen las imágenes destacadas adecuadas. A veces, Facebook puede utilizar una imagen antigua o, peor aún, ¡ninguna imagen!
Afortunadamente, puedes solucionar fácilmente este tipo de problemas utilizando una herramienta llamada Depurador de contenido compartido. Esta herramienta puede detectar errores de visualización específicos o problemas con tus metaetiquetas. Utilizando este software, puedes permitir que Facebook anuncie adecuadamente tus publicaciones con las imágenes correctas.
En esta entrada, te explicaremos qué es Facebook Debugger y cómo puedes utilizarlo para arreglar tus imágenes de WordPress. ¡Empecemos!
Cómo Funciona el Rastreador de Facebook
Antes de empezar a utilizar el Depurador de Contenido compartiro, tendrás que entender cómo Facebook rastrea tu contenido. Cada vez que alguien utiliza un botón para compartir en redes sociales o copia y pega un enlace a tu página, Facebook rastrea el HTML de tu sitio web. Luego, genera una imagen en miniatura, un título y una descripción basados en esta información.
Estos son algunos de los requisitos generales que debe seguir tu sitio para garantizar que este proceso se desarrolle sin problemas:
- Codificación gzip y deflactada en tu servidor
- Lista de propiedades open graph dentro de 1 MB de su HTML
- Limita el tiempo de carga de la página a unos pocos segundos
- Añade las cadenas de agentes de usuario o direcciones IP del rastreador a la lista de permitidos de tu sitio
- Asegúrate de que tu política de privacidad es rastreable
Ahora que ya sabes un poco más sobre el rastreador de Facebook y su funcionamiento, vamos a profundizar en algunos problemas a los que podrías enfrentarte al compartir contenidos en esta plataforma.
Cómo Obtiene Facebook la Información
Cada vez que compartes contenido con Facebook, éste almacena en caché tus imágenes en sus servidores y en la Red de Distribución de Contenidos (CDN). Si realizas actualizaciones en tu sitio, es posible que Facebook siga mostrando una imagen antigua cuando vayas a compartirla. Esto se debe a que no obtiene información nueva, sino que sirve la información que ya tiene almacenada en la caché.
Lo mismo ocurre con la información sobre tu enlace y el contenido en sí. Obtienen lo que denominan «Metaetiquetas Open Graph». Según Facebook, el protocolo Open Graph convierte una página web en un elemento enriquecido de un gráfico social. Básicamente, se trata de etiquetas (código) que indican a Facebook información sobre lo que se comparte.
Aunque no estés familiarizado con las metaetiquetas de Open Graph, es probable que ya las estés utilizando. Si has instalado plugins populares como Yoast SEO o Social Warfare, éstos añaden automáticamente las metaetiquetas por ti en segundo plano.
Tomemos como ejemplo nuestra guía de optimización de la velocidad del sitio web. Si miramos el código fuente de ese post, podemos ver los siguientes datos relativos a Open Graph. Nota: Open Graph utiliza diferentes atributos, como og:title y el que realmente nos interesa para este tutorial, que es og:image.
<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®" />
<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" />Este es el código de nuestro sitio que Facebook mira para determinar qué imagen destacada, título y descripción debe mostrar. Una vez que estos datos se hayan almacenado en la caché, tendrás que utilizar la herramienta Sharing Debugger para actualizar los detalles de tu publicación.
Cómo Utilizar el Depurador de Contenido Compartido de Facebook para Arreglar las Imágenes de WordPress
Cualquier plataforma o herramienta tendrá problemas o peculiaridades que tendrás que solucionar. La herramienta Depurador de Contenido Compartido de Facebook se creó para ayudarte a resolver problemas con tus Meta Tags de Open Graph, así como para solucionar el problema del almacenamiento en caché.
Puedes encontrar el Depurador de Contenido Compartido en el sitio de Meta para desarrolladores, en Herramientas. Para rastrear una publicación, simplemente introduce la URL y haz clic en Depurar:
En Kinsta, acabamos de actualizar la imagen de nuestro artículo de optimización de la velocidad del sitio web. Cuando la introduzcamos en Facebook Debugger, primero sacará la información en caché que tienen en su extremo:
En este caso, Facebook está extrayendo una imagen antigua de antes de que actualizáramos la publicación. También podemos ver que el og:image es un nombre de archivo antiguo. Esto es lo que la gente está viendo realmente cuando comparte nuestra publicación.
Paso 1: Borrar la Caché de WordPress para esa URL
Para asegurarte de que Facebook coge la información más reciente de tu publicación, tendrás que borrar la caché de WordPress. Si la imagen antigua sigue almacenada en la caché de tu sitio, Depurador de Contenido Compartido no podrá ayudarte a solucionar el problema, ya que simplemente volverá a obtener la información almacenada en la caché.
Con la caché a nivel de servidor de Kinsta, cada vez que se actualiza una entrada, la caché de esa página o entrada se borra automáticamente. Si utilizas una solución de caché diferente o un plugin de terceros, deberás consultar su documentación para asegurarte de que sabes cómo borrar la caché.
Si todo lo demás falla, siempre puedes borrar la caché de todo tu sitio de WordPress. Sin embargo, ten en cuenta que tu sitio tendrá que reconstruir la caché, lo que puede degradar la velocidad de tu sitio.
Si decides que es necesario, abre MyKinsta, navega a tu sitio de WordPress y haz clic en Herramientas. Aquí, haz clic en Borrar caché:
Si sigues teniendo problemas, es posible que tu imagen esté en la caché de tu CDN. En este caso, puede que tengas que purgar la caché de tu CDN.
Paso 2: Vuelve a Extraer en el Depurador de Contenido Compartido
Ahora que la caché se ha borrado para la publicación o la página en cuestión, tendremos que hacer un scraping de nuevo en la herramienta Facebook Debugger. Para ello, haz clic en el botón Volver a extraer.
Es posible que te encuentres con avisos que no siempre son los más precisos. Por ejemplo, vemos una advertencia de que nuestra imagen superó el tamaño máximo de 8 MB y el servidor fue demasiado lento para responder. En realidad, nuestra imagen sólo tiene 160,63 KB y la página se carga en menos de 1 segundo.
Entonces es cuando pulsamos por segunda vez el botón de «Volver a extraer«. Sí, puede parecer extraño. Pero muchas veces es necesario hacer la extracción dos veces. Después de esto, verás que aparece la nueva imagen destacada con el nuevo nombre del archivo como atributo og:image:
Es importante tener en cuenta que esto no actualizará la imagen de las publicaciones de Facebook ya compartidas. Esto sólo afecta a las publicaciones que tú u otras personas compartan después.
Consejos Adicionales de Facebook Debugger
Puedes utilizar la herramienta Depurador de Contenido Compartido no sólo para actualizar las imágenes antiguas, sino también el contenido (texto) que se ve en tus publicaciones de Facebook. Tanto el título como la descripción son metaetiquetas de Open Graph. Así que si necesitas reformular algo, actualízalo en WordPress y sigue exactamente los mismos pasos anteriores.
Corrige el Aviso de Imagen «properties are not yet available» (las propiedades aún no están disponibles)
Además, el hecho de que hayamos ignorado las advertencias anteriores no significa que no sean siempre útiles. De hecho, hay tamaños recomendados para las imágenes que deberías utilizar. De lo contrario, tu imagen podría no mostrarse de ningún modo (como se ve en esta advertencia):
Las propiedades ‘og:image’ proporcionadas aún no están disponibles porque las nuevas imágenes se procesan de forma asíncrona. Para garantizar que las acciones de las nuevas URLs incluyan una imagen, especifica las dimensiones mediante las etiquetas ‘og:image:width’ y ‘og:image:height’.
Esta advertencia se ha producido porque nuestra imagen era demasiado pequeña. El tamaño mínimo de imagen que exige Facebook es de 200 x 200 píxeles. Normalmente, cuando se trata de imágenes de Facebook, cuanto más grande sea, mejor.
En general, 1.200 x 630 píxeles parece funcionar mejor para la mayoría de la gente. Puedes hacer una imagen más grande que esto, pero Facebook la recortará. Cuando determines el tamaño de tu imagen, ten en cuenta esta relación de aspecto.
Si utilizas un plugin como Yoast SEO, también se recomienda ajustar manualmente la imagen. Las imágenes destacadas de tu tema de WordPress pueden tener una relación de aspecto o un tamaño diferente. ¡Quizás ni siquiera utilices imágenes destacadas!
En este caso, el plugin Yoast SEO te permite subir manualmente una imagen de tamaño diferente sólo para Facebook. Simplemente tendrás que encontrar la configuración social de Yoast SEO para una publicación y añadir una nueva imagen de Facebook:
Una vez que hayas subido una imagen con el tamaño correcto, ésta rellenará las metaetiquetas Open Graph que busca Facebook. Además, puedes seguir configurando manualmente el título y la descripción si es necesario.
Añade la Propiedad fb:app_id
Es posible que también veas una advertencia sobre la falta del ID de la aplicación de Facebook. Es importante tener en cuenta que esto no interfiere con la capacidad de compartir publicaciones en Facebook de ninguna manera. Muchas veces esto puede ser simplemente ignorado, pero limita tu capacidad de utilizar los datos de Facebook Insights:
Si quieres estos datos adicionales de Insights, tienes que añadir el ID de tu aplicación de Facebook a tu sitio. Primero, crea tu aplicación de Facebook. A continuación, copia el ID de tu aplicación de Facebook desde el panel de control de la aplicación.
Una vez que hayas configurado una aplicación de Facebook en producción, puedes añadir una metaetiqueta para ella en tu sitio. Aunque Yoast SEO solía admitir este proceso, recientemente ha eliminado esta funcionalidad. Como alternativa, instala el plugin gratuito Meta Tag Manager:
Para empezar a utilizar esta herramienta, ve a Configuración > Meta Tag Manager. A continuación, establece el Tipo de etiqueta como ‘propiedad’ y el Valor de la Propiedad como ‘fb:app_id’:
Para el Atributo de Contenido, pega el ID de tu aplicación de Facebook. Una vez que pulses Guardar cambios y borres la caché, esta información se añadirá a las metaetiquetas de tu sitio. Ahora puedes volver a scrapear la URL para ver si el problema se ha resuelto
Resumen
Esperamos que ahora entiendas un poco más sobre la herramienta Depurador de Contenido Compartido de Facebook y cómo puedes utilizarla para solucionar problemas y arreglar imágenes en tu sitio de WordPress. De este modo, todos tus enlaces compartidos contarán con las imágenes, los títulos y las descripciones correctas.
Cuando observes una imagen destacada incorrecta en Depurador de Contenido Compartido, borra todas las capas de caché de tu sitio web y vuelve a hacer la extracción. Tus nuevas imágenes deberían entonces aparecer correctamente para que todos las compartan en Facebook.
A menudo, puedes evitar cualquier problema con tus enlaces de Facebook limpiando regularmente la caché de tu sitio. Con un plan de alojamiento de Kinsta, la caché de tu página se purgará automáticamente cada vez que actualices el contenido
