Esta entrada podría tener el mismo formato de comienzo que esos anuncios de la teletienda cuando un bonachón personaje – actor – va con una bandeja llena de comida y bebida a rebosar para sentarse delante del televisor, y cuando este está a punto de corbar y aposentar su honorable culo sobre el sofá, como si de una explosión dirigida por el mismísimo Michael Bay se tratara, todo sale por los aires, mientras una voz en off dice, ¿no estás cansado de que te pase lo mismo?

Pues, ahora ponte en situación, tienes un blog, has creado una imagen para destacar la entrada, todo parece ir bien, compartes el enlace en facebook, parece que va bien, lo haces el twitter, vaya, no se lee bien lo importante, la cambias, ahora en twitter genial pero… ¿que *^=·% le ha pasado a Facebook?… ¿no estás cansado de no acertar con el tamaño de tu imagen destacada de entrada?

Generar imagen puede llegar a ser una labor complicada a la hora de cómo queda en las diferentes redes sociales, y si encima el diseño no es lo tuyo la cosa se pone más tensa que un pavo el día de acción de gracias, esto es, porque Twitter, Facebook, Google +, Pinterest o LinkedIn tienen diferentes medidas a la hora de mostrar la vista previa, que además van modificando con el tiempo, con lo cual, tienes dos opciones, hacer la imagen, sin importante como queda, o gastar una cantidad de tiempo y recursos para hacer imágenes adaptadas a cada medio social, esto es especialmente crítico cuando haces una gestión de redes sociales de terceros.

Publicidad

Personalmente he podido leer varias entradas en español, donde dan consejos sobre los diferentes tamaños de las redes sociales, de cara a poner directamente una imagen, pero del mismo modo, no hay una medida común, sino que seguimos hablando de varias medidas, y a la hora de que estas medidas se vean bien en diferentes canales, te obligan a realizar un diseño, y adaptar el mismo a otro formato, lo cual dependiendo del diseño utilizado, puede llevarte más o menos tiempo.

truco-almendruco

Este punto es bastante crítico cuando lo que se está compartiendo son enlaces en las diferentes redes sociales… Facebook, Twitter, Linkedin… representan una vista previa de ese enlace, como título, entradilla e imagen, en diferentes formatos, y es cuando, dependiendo de tu imagen,esta se muestra de muy diversas maneras.

Si lo que quieres es no tener problema, y que se vean en todas de forma correcta y fiel al diseño, deberás introducirte en el maravilloso mundo del Open Graph para poder tener una única medida de imagen y de diseño, sin gastar más tiempo del necesario en re-diseñar, una sola, ni 3, ni una por cada red, una única imagen.

El protocolo Open Graph permite a los desarrolladores como nosotros, introducir una página dentro del llamado Social Graph, este permite dentro de internet interrelacionar de forma personal el contenido en internet y su relación entre si, el término lo hizo popularmente conocido Facebook hace ya más de 7 años, cuando ellos mismo lo parieron.

Open Graph nace ante la imperiosa necesidad, de compartir contenido en las numerosas, y cada una con sus propias reglas, redes sociales, de forma que pone una especie de estándar, para mediante metadatos enviados en la cabecera de la página, decirle a estas, el contenido que quieres mostrar y de la manera que lo quieres mostrar, dando una mayor información que los tradicionales metadatos que se usaban para por ejemplo el SEO y que leían los buscadores como Google, aunque ahora Google también lee estos og:, pero eso es harina de otro costal para otra entrada.

De todo el listado de posibles metadatos que Open Graph define, son vitales 3, el type, la url, y el image, y es esta última la que nos va a dar que hablar.

[quote_box_center]Cabe destacar que el Open Graph, al igual que el Dublin Core, nos ayuda a mejorar nuestro posicionamiento orgánico, por lo que es más que interesante su uso, y cuenta con una bonita documentación al respecto en su página oficial.[/quote_box_center]

El tema de usar una única imagen, resulta aún más importante, si no eres un diseñador, ya que si te puede costar hacer una única imagen, puede ser terrible pasar a la fase de adaptación, lo normal, es que en el mundo del diseño se usen herramientas del paquete Adobe Creative, pero si lo tuyo es más la escritura del blog pero no la quieres dejar huérfana de imagen, existen herramientas online, yo os recomiendo canvas, sin duda la herramienta perfecta para los que no son diseñadores. Y si además eres daltónico para eso de los colores, te recomiendo la siguiente herramienta online de Adobe Color CC.

[dropcap type=”1″]![/dropcap] El Truco

El truco es el siguiente, Open Graph, define las dimensiones de imágenes ideales de la vida en 560 píxeles de ancho por 292 píxeles de alto, lo que viene siendo un rectángulo.

Puedes diseñar de fondo, todo lo que consideres oportuno, aprovechando todo ese espacio de 560x292px que tienes disponible, pero tendrás que trabajar, uses el programa que uses, por capas y con reglas de espacio, ya que, si bien en facebook esta medida se mostrará perfectamente, ahora vamos a ver el otro truco para que el resto de plataformas no tengas el más mínimo problema.

La parte de importancia, por ejemplo el texto con el teléfono, el descuento, el código promocional, tu logo, página web… para que se vea bien en la preview, evidentemente al hacer click sobre ella, se verá dentro del artículo, sino en la preview en los diferentes canales, debes guardar este espacio interior.

guia-imagen-redes-sociales-590-292

En el margen superior, no hay problema, puedes ajustarlo al máximo, pero en los márgenes derecha e izquierda, debes dejar 40 píxeles libres de contenido, que no sea relevante, y por la parte inferior, debes dejar 10 píxeles libres de contenido, con esto lograras que en las diferentes canales sociales, una misma imagen se vea perfectamente en la vista previa cuando compartes un enlace.

Puedes usar medidas equivalentes, si lo que necesitas es crear una imagen más grande, puedes hacerla multiplicando los pixel por el factor de multiplicación, por ejemplo que la quieres un poco más grande, pues multiplicas cada cota por 1,5.

[pull_quote_center]
560x 1,5 = 840px
292x 1,5 = 438px
40×1,5 = 60px
10×1,5 = 15px
[/pull_quote_center]

Así quedaría una imagen de 840×438 con 60 de sangrado a derecha izquierda, y 15 por debajo.

Ahora si puedes creer tu imagen destacada, y ver como al compartir el enlace en las redes sociales, la preview no mata tu mensaje.