Problema con las miniaturas de imágenes al compartir enlace en Facebook

Problema con las miniaturas de imágenes al compartir enlace en Facebook

Desde hace algo menos de un mes he notado problemas cuando comparto un enlace de este blog de Blogger en Facebook, sencillamente no aparece la miniatura de la imagen que acompaña el artículo. Hace algún tiempo ya, tuve problemas también al compartir, ya que siempre me ponía la misma descripción (el pie de la web) y me mostraba otra imagen diferente a la de acompañamiento del artículo. Pero lo solucioné usando meta etiquetas de Facebook y algún que otro truquito.

El caso es que esto ha hecho que me enfade un poco y me ponga a investigar qué está pasando. Así que para hablar de ello voy a publicar dos artículos a la vez: éste, en el que explicaré los motivos por los cuales al compartir en Facebook no aparece la miniatura, y otro en el que hablaré de qué es Open Graph y los meta tags para los que no lo sepan, ya que es importante para entender el resto del artículo.

Hay que tener en cuenta algunas cosas sobre el funcionamiento de Facebook cuando compartes una URL. Por defecto, cogerá la primera imagen adecuada que encuentre para usarla como miniatura, el título de la página actual para el título del enlace y la primera cadena de texto que encuentre en el cuerpo del HTML que esté dentro de un párrafo para la descripción. Como ya sabemos, esta información se puede modificar usando el protocolo de Open Graph.

Uno de los problemas que nos podemos encontrar es que ahora es obligatorio usar imágenes de al menos 200x200px. Las imágenes que he venido usando hasta ahora en los artículos medían 480x150px y desde mediados del pasado mes no sirven. Esto presenta un problema para los que veníamos usando la miniatura que proporciona Blogger para compartirla en Facebook, ya que mide 72x72px. Así que lo que ocurría es que ni la miniatura ni la imagen original medían el mínimo y por tanto no se mostraban. La solución para este caso concreto es utilizar una imagen mayor en el artículo, así si la miniatura no cumple los requisitos, pillará la imagen normal.

En cualquier caso, como comentaba en el articulo de Open Graph y los meta tags, Facebook dispone de una herramienta de depuración de errores que nos será de gran utilidad.

8 respuestas a «Problema con las miniaturas de imágenes al compartir enlace en Facebook»

  1. Avatar de Gabriel
    Gabriel

    ¡Genial el artículo! Muchas gracias.
    Sólo me queda una duda: Me gustaría saber cómo se hace para que al subir un link, la imagen, en vez de quedar a la izquierda del texto y en cuadrado, quede arriba y rectangular. Ya busqué varias veces pero solo encuentro la manera estándar que vos mostrás. Alguna solución o dato para seguir buscando sería de GRAN ayuda. Muchas gracias de nuevo.

    1. Avatar de Jesús Tovar

      ¡Hola Gabriel!, me alegra que te haya servido de ayuda el artículo.

      Respecto a lo que comentas, para que la foto se muestre como quieres no tienes que hacer nada más allá de lo que sabes. Facebook muestra el contenido con una maqueta fija que no se puede cambiar, lo que imagino que te ocurre es que cuando compartes, inmediatamente después la foto se muestra a la izquierda, pero si recargas tu página verás que después aparece con la imagen en la parte superior. Haz la prueba, comparte algo y luego vuelve a cargar la página, verás cómo aparece.

      Se trata de algo curioso que desconcierta un poco, pero ya sabes que Facebook cambia constantemente y lo mismo mañana ya no lo hace, vete a saber.

      Un saludo.

  2. Avatar de Vidal
    Vidal

    cuando le doy a compartir no me deja modificar la imagen ya que sale gris.
    Primero ¿ cómo incorporo imagenes y que no me salga la misma ? segundo variar imagenes que yo pueda controlar.
    Atentamente
    vidal.

    1. Avatar de Jesús Tovar

      Hola Vidal, respondo a tus preguntas.

      Las imágenes a utilizar en las miniaturas de Facebook se definen utilizando el protocolo Open Graph (a través de unas etiquetas en el head de la página). En el artículo, encontrarás un enlace donde hablo brevemente de él y las referencias (externas) donde se explica su uso e implementación.

      Un saludo.

  3. Avatar de Iván
    Iván

    En mi blog las imagenes miden 640×400 aproximadamente y no aparecen en Open Graph porque me colocan "s72c" delante de la imagen:

    Imagen original: .../s640/tumblr_mtqvqrUPFa1qaoqu9o1_1280.jpg
    Imagen Open Graph: .../s72-c/tumblr_mtqvqrUPFa1qaoqu9o1_1280.jpg

    ¿Esto porque es? No puedo poner la imagen más grande en el post porque no cogería en la plantilla y me estoy volviendo loco.

    Alguna solución, porque yo no entiendo nada.

    Gracias

    1. Avatar de Jesús Tovar

      Hola Iván,
      eso que comentas es precisamente el problema. En Blogger, cuando publicas un artículo, se genera automáticamente una miniatura de la primera imagen que encuentra. Esta miniatura mide 72x72px y se guarda con el mismo nombre de la imagen original más el «s72c» que has podido comprobar.

      Aunque originariamente la miniatura era utilizada para los artículos relacionados, ahora se usa también para facebook a través del Open Graph. Desgraciadamente, el tamaño de la miniatura no se puede cambiar, al menos directamente en Blogger, ya que ésta tiene que estar disponible cuando se carga el < head > y eso sólo se puede hacer accediendo a las funciones de la plataforma (a las que no se puede acceder).

  4. Avatar de María José
    María José

    Hola, he leído tus dos entradas. Apuntan ideas interesantes, pero como reflexión en aras de aportar un comentario que sirva para mejorar, si puede ser de interés, al no poner la solución al problema, en la práctica, además de apuntar ideas podrían haber sido útiles.

    Y de no tener la solución, haberlo comentado para no quedar frustrado y con la sensación de que a las entradas les falta lo esencial: su resolución.

    De todos modos, las ideas son buenas para seguir buscando por la red la solución (la pena es no haberlo podido hacer aquí: las entradas apuntaban maneras interesantes).

    Un saludo,

    1. Avatar de Jesús Tovar

      ¡Hola María José!
      En primer lugar, quiero agradecerte que hayas comentado ya que mi intención es que el contenido sea de utilidad.

      Lamento que te haya dado la impresión de no haber puesto la solución al problema, pero sí que lo he hecho. Si te fijas, es justo al final de este artículo cuando digo que ahora es necesario para Facebook que las imágenes midan más de 200x200px. Precisamente las que venía utilizando en el blog eran inferiores, por eso no aparecían las miniaturas. La solución en este caso es usar imágenes mayores, dada las limitaciones de Blogger en el tamaño de sus miniaturas (72x72px).

      Un saludo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *