Cómo optimizar las imágenes de tu blog para las redes sociales: introducción a las etiquetas Open Graph

A todos nos ha pasado alguna vez: escribimos un post fantástico y seleccionamos una imagen principal fabulosa para que aparezca en las redes sociales, en nuestra página principal del blog y demás. Después, lo posteamos en nuestras redes sociales y, entonces, sucede: ¡las redes sociales han elegido la imagen errónea para publicar nuestro post! O peor aún: no hay ninguna imagen.

Esto no es sólo molesto, es que una mala miniatura de imagen en nuestras publicaciones, o ninguna miniatura, puede afectar negativamente el rendimiento de tu post en las redes sociales. Las imágenes ayudan a conseguir compromiso a través de tus redes sociales, y los datos muestran que ayudan a generar más "me gusta", "compartidos" y comentarios. 

Por ejemplo, publicar imágenes en LinkedIn aumenta un 98% la tasa de comentarios. Pero la imagen debe ser la correcta: no debe ser tu logo, ni un recorte de tu botón de llamada a la acción, ni cualquier otra imagen elegida al azar.

Así que, ¿cómo podemos asegurarnos de que cada una de las redes sociales que utilizamos elige la imagen que nosotros deseamos?

La respuesta es el Protocolo Open Graph, que fue creado por Facebook en 2010 y que LinkedIn ha adoptado. Twitter, por el contrario, utiliza su propio sistema Open Graph, aunque se acomoda al Protocolo Open Graph si lo tienes instaurado en tu página web.

¿Qué es el Protocolo Open Graph?

Cuando compartes una página web o un artículo en Facebook, LinkedIn o Twitter Cards, te darás cuenta de que cada una de esas redes elige automáticamente cierta información para la publicación, como el nombre de la página web, una imagen, la URL y una pequeña descripción. El Protocolo Open Graph (OG) es el proceso de extraer toda esta información desde la página web y añadirla a una publicación social. Pero, ¿de dónde saca cada red social esta información?

Aquí es donde entran en juego las etiquetas Open Graph. Cuando colocas etiquetas OG en la sección de cabecera de una página web, las redes sociales encuentran más fácilmente la información que necesitan para cada parte de una publicación. Si tu página web no tiene etiquetas OG en su código, les costará averiguar dónde encontrar la información adecuada.

Las redes sociales no suelen tener problemas con el título, la URL y la descripción, pero tienen grandes problemas para seleccionar la imagen correcta. Las etiquetas OG le dicen a la plataforma social exactamente qué imagen deben elegir.

​Si utilizas Wordpress o Hubspot para desarrollar tu contenido de blog, seleccionar tu imagen principal es sencillo. En Wordpress necesitarás simplemente descargar este plugin y ya podrás elegirla. Con Hubspot, por ejemplo, sólo necesitarás designar cuál es tu imagen principal de cada post.

Este post está dirigido para los que no utilizan ningún sistema de gestión de contenidos (CMS, por sus siglas en inglés), por lo que necesitas hacer esto con cada página de tu sitio web. Te vamos a enseñar cómo realizarlo paso a paso en cada una de las siguientes redes sociales: Facebook, LinkedIn y Twitter.

Facebook

Así se ve un post de Facebook con un enlace:

​Para asegurarnos de que Facebook selecciona la imagen adecuada desde nuestro blog al post de Facebook, necesitarás primero de todo optimizar el tamaño de la imagen para Facebook y después añadir las etiquetas OG adecuadas de tu página web.

1. Optimizar el tamaño de la imagen

Facebook necesita que utilices una imagen que mida como mínimo 200x200 píxeles.

Aunque ese es el mínimo, Facebook recomienda que se use una imagen que mida por lo menos 600x315 píxeles. Para una mejor resolución en los dispositivos, te recomiendan que eligas una imagen que tenga mínimo 1200x630 píxeles.

2. Añadir las etiquetas Open Graph

Si tu página web no es estática y no utilizas ningún sistema de gestión de contenidos, necesitarás añadir manualmente las etiquetas Open Graph para cada una de las páginas de tu blog. Las etiquetas son meta datos, por lo que debes agregarlos en la sección superior de la página del post. Si no controlas el código de tu página web tendrás que hablar con el desarrollador para que te ayude.

• Primer paso: copia esta etiqueta:

​<meta property=“og:image” content=“http://example.com/picture.jpg ” />
<meta property="og:image:width" content="180" />
<meta property="og:image:height" content="110" />

• ​Segundo paso: sustituye la URL de la imagen de ejemplo que está resaltada en rojo por la URL de tu imagen elegida. Después, cambia los valores de width (anchura) y height (altura) en verde por los valores de tu imagen, teniendo en cuenta los requerimientos de tamaño de Facebook.

• Tercer paso: copia y pega el código snippet resultante en la sección superior HTML de tu página.

​

• Cuarto paso: si ya habías publicado esta página sin etiquetas, o la habías publicado antes de darte cuenta de que las etiquetas estaban mal, necesitarás  ejecutar la URL a través del depurador de errores de Facebook cuando hayas realizado los cambios. Esto se debe hacer así porque Facebook almacena en caché las páginas que se comparten, así que si no actualizas la caché, la miniatura no se corregirá.

Tras estos pasos, cuando publiques un enlace a tu artículo en Facebook, el Protocolo Open Graph leerá la etiqueta OG:image y publicará la imagen que seleccionaste.
​

LinkedIn

Twitter también utiliza el Protocolo Open Graph así que, cuando compartes un enlace en tu red de LinkedIn, éste rastrea en el artículo para encontrar el título, las imágenes y la URL y luego utiliza esa información para rellenar tu publicación de LikedIn.

Para asegurarte de que LinkedIn escoge la imagen adecuada de tu post para utilizarla como miniatura, necesitarás optimizar su tamaño y agregarle las etiquetas OG a tu página web. Este proceso es similar al de Facebook.

1. Optimizar el tamaño de la imagen

LinkedIn necesita que las imágenes mida como mínimo 150x80 píxeles. Si tu imagen no alcanza este mínimo, escogerán otra imagen de tu página que sí encaje con esas dimensiones.

También te recomiendan utilizar una imagen menor de 180x110 píxeles que sea más rectangular que cuadrada. Esto es porque en las novedades de los usuarios ellos utilizan miniaturas dee 180x110 píxeles, independientemente del tamaño que hayas seleccionado tú.

2. Añadir etiquetas Open Graph

Como en Facebook, si tu página es estática y no usas un CMS, necesitarás añadir manualmente las etiquetas OG en cada página donde tengas tus posts.

• Primer paso: copia esta estiqueta:

​<meta property=“og:image” content=“http://example.com/picture.jpg ” />
<meta property="og:image:width" content="180" />
<meta property="og:image:height" content="110" />

• Segundo paso: sustituye la URL de la imagen de ejemplo en rojo por la URL de tu imagen. Reemplaza la anchura y la altura en verde con las dimensiones adecuadas de tu imagen, teniendo en cuenta las exigencias de LinkedIn.

​

• Tercer paso: copia y pega el código snippet en la sección superior del HTML de tu página web.

Y ya está. Después de seguir estos pasos, cada vez que publiques un enlace de tu artículo en LinkedIn, el Protocolo Open Graph leerá la etiqueta OG:image y seleccionará la imagen adecuada.

Nota importante si publicas tanto en Facebook como en LinkedIn

Es posible que hayas visto el conflicto que hay entre los tamaños de la imagen para LinkedIn y Facebook. El primero exige una imagen de menos de 180x110 píxeles, mientras que Facebook necesita que sea mayor de 200x200 píxeles..

Podrías redimensionar tu imagen lo más próximo a 180x110 píxeles sin pasarte, y así la imagen estaría optimizada para LikedIn, pero tendrías una imagen muy pequeña para Facebook (recuerda que te recomiendan que no sea menor de 600x315 píxeles).

Puedes evitar este conflicto incluyendo 2 etiquetas OG para la misma imagen, en dos tamaños diferentes, en la cabecera de tu página utilizando este código:
<meta property="og:image" content="image-180x110.jpg " /> <!-- 180x110 Image for Linkedin -->
<meta property="og:image:width" content="180" />
<meta property="og:image:height" content="110" />
<meta property="og:image" content="image-600x315.jpg " /> <!-- 600x315 Image for Facebook -->
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />

Recuerda cambiar los valores a las dimensiones de tus imágenes, teniendo en cuenta las exigencias de una y otra plataforma social.

Twitter

Twitter utiliza un sistema similar a las etiquetas Open Graph llamado etiquetas Twitter Card. Para poder utilizarlo necesitas tener Twitter Cards en tu cuenta.

Si ya tienes las etiquetas OG en tu web, no te preocupes. El equipo de Twitter ha simplificado el proceso de generar una Twitter Card sin tener que duplicar las etiquetas y datos. Cuando el procesador de Twitter Card rastrea etiquetas en tu página, primero chequea si se encuentran las etiquetas Twitter. Si no las encuentra, selecciona las de OG. 

Las Twitter Cards se parecen mucho a cómo Facebook y LinkedIn publican: necesitan un título, una imagen, la URL y una pequeña descripción. 

Para establecer las etiquetas de Twitter Cards, necesitarás optimizar el tamaño de tus imágenes y añadir las etiquetas adecuadas a tu página web.

1. Optimiza el tamaño de la imagen

Twitter requiere que tu imagen sea más grande que 60x60 píxeles y que pese menos de 1MB cada archivo. Pero redimensionan automáticamente tus imágenes que sean mayores de 120x120 píxeles.

2. Añadir etiquetas de Twitter Card

Tal y como pasa con Facebook y LinkedIn si tu página es estática y no usas un CMS, necesitarás añadir las etiquetas de Twitter Card manualmente en cada una de las páginas donde están tus posts. Como las etiquetas de las otras redes sociales, las etiquetas de Twitter son metadatos, así que necesitas incluirlos en la sección de cabecera de la página donde tengas el post.

Primer paso: copia esta etiqueta:
​<meta name=”twitter:image” content=" http://example.com/picture.jpg”>

Segundo paso: sustituye la URL de la imagen de ejemplo en rojo por la URL de tu imagen.

Tercer paso: copia y pega el código snippet resultante en la sección de cabecera de HTML de tu página.

De esta manera Twitter sabrá qué imagen es la que quieres seleccionar para tu publicación en su plataforma.

Ahora ya sabes cómo optimizar tus imágenes para publicarlas en tus redes sociales. Nosotros te recomendamos utilizar un sistema de gestión de contenido. Si quieres saber cómo mejorar tu presencia en redes sociales, contacta gratuitamente con nosotros.

¡Contacta con nosotros!

Marketing 27/03/2017

20 términos esenciales del marketing online

Lead nurturing 28/12/2016

Cómo enviar mensajes personalizados