El Mejor Tamaño de Imagen o Fotos Para Usar en Todas las Redes Sociales en Internet

El Mejor Tamaño de Imagen o Fotos Para Usar en Todas las Redes Sociales en Internet
Cada red social tiene sus propios tamaños de imagen o fotos, que utilizan prácticamente según el diseño de su sistema (Puedes consultar en este link las “Medidas del Tamaño de las Imágenes y Portadas en Redes Sociales”). El problema radica para los generadores de contenido, que para que funcionen bien estas fotos o imágenes, es necesario crear varias versiones en varios tamaños…, entonces si tengo un administrador de contenidos (Content Management System CMS por sus siglas en ingles), como los populares: Wordpress, Drupal, Joomla; como hago para que al compartir mi publicación, salga una imagen a acompañada del texto?, y que además sea del tamaño adecuado?

La respuesta obvia, es hacer uso de programación, para detectar que red social está extrayendo la información, o modificar la plantilla para agregar etiquetas HTML para cada red social. Existen algunas genéricas que impulso Facebook como el “Open Graph Protocol”, pero como su nombre lo indica, son genéricas y no quiere decir que toda red social la acepte, y de todas maneras no quita el problema de servir una foto o imagen de distinto tamaño, optimizado para cada red social.

METADATOS BASICO OPEN GRAPH PROTOCOL OG

<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

METADATOS BASICO TWITTER

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />

METADATOS BASICO FACEBOOK

La mayor parte del contenido se comparte en Facebook en forma de URL, por lo que es importante que marques tu sitio web mediante etiquetas de Open Graph, con el fin de controlar cómo se muestra tu contenido en Facebook. En ausencia de estas etiquetas, el rastreador de Facebook utiliza heurística interna para intentar obtener el título, la descripción y la imagen de vista previa de tu contenido. Indica esta información de forma explícita mediante etiquetas de Open Graph para garantizar publicaciones de Facebook de la más alta calidad.

<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

METADATOS BASICO GOOGLE+ PLUS

Google+ Plus, adicionalmente acepta otro tipo de etiquetado llamado Schema.org

<meta property="og:type" content="article" />
<meta itemprop="og:headline" content="Top 10 Most Challenging Hikes in North America" />
<meta itemprop="og:description" content="Looking for a challenging hike? We spent the
past year spanning the continent for the most grueling trails. Check out the entire
ranked list, and learn about our methodology..." />
<meta property="og:image" content="http://i.sportyfitness.com/media/tough-trail-lrg.jpg" />

SOLUCIÓN

Algunas posibles soluciones podrían ser:

1. Subir los distintos tamaños de fotos en un servidor y usar las meta-etiquetas para indicar que imagen se debe de usar en cada red social, preferiblemente usar las meta-etiquitas personalizadas que prefiere cada red social.

2. Usar algún tipo de plugin que permita subir varios tamaños de imágenes (sin mostrarlas todas en la publicación) y que cree las meta-etiquetas automáticamente.

3. A nivel de servidor web, detectar que servidor está consultando una imagen (de la red social) y servir o enviar el tamaño adecuado automática (recortando, ajustando) o manualmente (varias imágenes subidas).

4. Utilizar una imagen que funcione en la mayoría (que sean centradas en artículos y no fotos e imágenes como Instagram).

SOLUCIÓN MAS FÁCIL

Aunque no hay un zapato que le horma o quede bien a todo el mundo…. La solución más fácil es usar una que se vea bien en la red social principal, y sea aceptable en las otras.

En este caso como vamos a usar Facebook podemos decir que:

· Las imágenes en miniatura de Facebook deben tener una relación de aspecto de 1,91: 1. Esto significa que el ancho debe ser 1,9 x la altura.

· Facebook recomienda un tamaño de imagen de 1200 x 628 píxeles, sin embargo, esto es muy grande y puede que no sea posible con imágenes de baja resolución.

· Por lo tanto, si su imagen es más pequeña, las mejores dimensiones para elegir son 560 x 292 píxeles, que es el tamaño que las imágenes se muestran en el móvil (En el escritorio, se muestran en 400 x 209 píxeles).

· El tamaño de imagen mínimo debe ser 200 x 200 píxeles.

IMÁGENES PARA COMENTARIOS EN FACEBOOK


¿Que pasa cuando quiero que se muestre una imagen pequeña en un comentario?... esto fue un experimento.

· 90x46 píxeles se ve bien.

· 90 x 90 píxeles lo escala.

· En el diálogo de compartir, lo recorta un poco a 158 x 158 píxeles.

CONCLUSION 2017: es mejor NO cuadradas, usar imágenes 470x246 píxeles para las pequeñas y 1024x512 píxeles para las grandes, con el objetivo de compartir la misma imagen o foto en todas las redes sociales* (que sean centradas en artículos y no fotos, imágenes o infografías como Instagram)

*Probado en Facebook, Google+ Plus, LinkedIn, Twitter.

¿Que Tal Te Pareció Este Contenido?

Califica Mi Trabajo

Javier Cañon
4.9 / 5 basado en 20 calificaciones.

Popular Últimos 30 días

Chat? Chat?
Javier Cañon $$$
Direccion:Carrera 14 #37-02, Villavicencio, Meta, 500002, CO |Tel: 57 315819050 |Email: [email protected].
|Nit No.797856401 |Horario