Descubre el Secreto para Mostrar Imágenes Grandes al Compartir tus Posts en Facebook

Cuando tú o alguno de tus lectores comparte tus artículos en Facebook ¿Aparece la imagen que tu escogiste en grande y completa?

¿O se muestra una imagen aleatoria, del tamaño de una estampilla y truncada?

Hace más de dos años que Facebook está mostrando imágenes grandes, cuando  los enlaces cumplen ciertas condiciones. Uno pensaría que esta es una información ampliamente conocida en el mundillo del marketing digital.

Sin embargo, hace unas semanas, durante una conferencia, un reconocido experto en marketing digital, sugirió que era algo aleatorio. Esa teoría pareció confirmarse hace unos días, al compartir un artículo de Enrique Dans.

En mi página de Facebook, el enlace aparece con una imagen grande, pero truncada de modo que resulta incomprensible. En cambio, en mi perfil, se observa a misma imagen, completa, pero en pequeño.

Por otro lado, si me sigues en Facebook, es posible que hayas notado que, cuando publico un artículo antiguo de mi blog (#repost), usualmente aparece la imagen pequeña. Pero, en los artículos nuevos, siempre se muestra la imagen grande.

No es casualidad.

Desde finales del año pasado, cuando retomé el blog, procuro seguir la recomendaciones de Facebook (EN) para generar vistas preliminares grandes:

1. Dimensiones: Para que la imagen preliminar aparezca grande, debe tener un tamaño mínimo de 600×315 px. Es decir, un ancho mínimo de 600 píxeles y un alto mínimo de 315 píxeles. La imagen utilizada por E. Dans es de 591×864 px, por lo tanto no cumple con el ancho mínimo.
   1. Adicionalmente Facebook recomienda un tamaño mínimo de 1200×630 px para una mejor visualización en dispositivos de alta resolución. Sin embargo, en monitores de hasta 1920×1080 px (más del 99% de los dispositivos), Facebook muestra las imágenes de los enlaces en el tamaño 487×255 px. Para reducir el tiempo de carga de las imágenes en el blog, yo he decidido ignorar esta recomendación.
   2. Si tus imágenes tienen un tamaño menor a 200×200 px, no aparecerán en la publicación.
2. Relación de Aspecto: Si observas la imagen grande del artículo de E. Dans, verás que aparece truncada. Facebook recomienda utilizar la relación de aspecto 1,91:1 (las imágenes deben ser 91% mas anchas que altas). Si no cumples este requisito, tus imágenes se recortarán, a lo alto o a lo ancho, para adaptarlas al espacio especificado. Yo estoy usando 16:9 (78% mas ancha que alta), que es mucho mas estándar (tu cámara probablemente te permite tomar fotos en esa relación de aspecto), pero se cortan ligeramente a lo alto. Otra opción es utilizar la relación 2:1 (el doble de ancho que de largo), que es ideal para Twitter, pero Facebook las recortará un poco a lo ancho.
3. Etiquetas Open Graph: Facebook recomienda utilizar las etiquetas og:image:width y og:image:height. Sin embargo esta recomendación es ignorada por la gran mayoría de las webs (incluyendo la de E. Dans y las otros expertos en marketing digital).
   1. Lo que si recomiendo es utilizar la etiqueta og:image, para indicarle a Facebook cuál es la imagen que deseas que aparezca al compartir tu artículo. Así te aseguras de que utiliza la que tu quieres. Si usas WordPress y no sabes o no quieres programar, encontrarás muchos plugins que te pueden ayudar, incluyendo el popular SEO by Yoast.
   2. Puedes utilizar múltiples etiquetas og:image para ofrecerle al lector la posibilidad de escoger cuál imagen desea que aparezca al compartir tus artículos. Esto puede ser útil si tienes seguidores muy «frikis».
   3. LinkedIn lee la etiqueta og:image. Usarla te garantiza que en esta red social, al compartir tus enlaces, aparecerá la misma imagen que en Facebook. Sin embargo, usa un tamaño mucho menor (180×110 px) con una relación de aspecto similar (1,64:1), aunque menos alargada.

¿Qué puedes hacer si la imagen que deseas utilizar no se adapta a estos requisitos?

Este probablemente fue el caso de Enrique Dans: Su artículo se basa en una imagen publicitaria. Lo idóneo era presentarla tal cual.

Algunas soluciones para mejorar los resultados son:

• Si las dimensiones son menores de 600×315:
  1. Usando Google Images, podrías encontrarla en un tamaño mayor (aquí está la del ejemplo en 736×1101).
  2. Agrandarla. Esto normalmente es mala idea, ya que las imágenes tienen a pixelarse, perdiéndose los detalles y la calidad de los textos que contengan. Sin embargo, en este caso, bastaba con un 1,5%, lo que podría resultar imperceptible.
  3. Agregar un marco: En el ejemplo que estamos usando, con un marco de 5 píxeles de ancho hubiese sido suficiente. Si, el fondo de tu blog es blanco y usas un marco de ese color, probablemente nadie lo notará. Si usas otro color, el marco será visible en Facebook.
• Si la relación de aspecto no es la adecuada:
  1. Evita colocar textos u otros detalles relevantes cerca de los bordes. Es la solución ideal si la relación de aspecto de tu imagen es similar a 1,91:1 (entre 16:9 y 2:1 es fácilmente aplicable).
  2. Cortarla. Ya sabes que Facebook cortará la imagen. Adelántate y selecciona el área mas relevante. Para la foto del ejemplo, los pantalones y zapatos del modelo no aportan nada. Lo importante es el reloj que lleva en la muñeca.
  3. Cambia el tamaño del lienzo: Cualquier editor de imágenes, te permitirá cambiar el «lienzo» sobre el cual aparece la imagen, por uno mas grande, que tenga el tamaño y las proporciones adecuadas. El espacio adicional debe ser blanco o del color de fondo de tu blog. Esta es una solución sencilla, que no requiere sacrificar la calidad ni partes de la imagen.
  4. Utiliza una imagen para el blog y otra para Facebook. La etiqueta og:image te permite indicar una imagen distinta de la que encabeza tu artículo. Incluso, podrías utilizar una que no forme parte del post. Sin embargo, esto lo hacen frecuentemente los distribuidores de spam y malware, por lo que Facebook podría limitar esa opción en cualquier momento. Prefiero recomendarte que utilices una imagen que forme parte del artículo, aunque no sea la del encabezado. Si esto no es posible, al menos procura que esté alojada en el mismo dominio que tu web.

Truco Final

Ahora probablemente irás a tu blog a cambiar la imagen de tu último post por una mas adecuada. Luego, presionarás el botón de compartir en Facebook. Descubrirás que sigue mostrando la misma imagen que antes.

El problema es que Facebook cachea las imágenes. Para solucionarlo debes utilizar el Open Graph Object Debugger.

Coloca la URL de tu artículo y presiona Show existing scrape information.

Al final de la página, te mostrará la imagen y el texto que se utilizarán cuando se comparta el post en Facebook.

Luego de realizar algún cambio, presiona Fetch new scrape information, para forzar la actualización del caché de Facebook. Puede ser necesario esperar algunos minutos o hacer varios intentos.

Si utilizas algún sistema de cacheado en tu web, es mejor desactivarlo durante estas pruebas.

Ya tienes toda la información necesaria para que las imágenes que aparezcan, al compartir tus artículos en Facebook y LinkedIn, sean las adecuadas, se muestren en tamaño grande y sin truncar.

Ahora falta resolver, de forma automatizada, las imágenes de los artículos antiguos. Pero eso será en otro post…