Como optimizar imágenes para SEO

Como optimizar imágenes para SEO

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on email
Email
¡Ponme nota!
5/5

Cuando te pones a optimizar de cara al SEO un site, ya sea una página estática o un blog está claro que te centras en posicionar cada una de las páginas del mismo, así como la home, y muchas veces nos olvidamos de las imágenes. Sin embargo, tener las imágenes de tu site correctamente optimizadas es de muchísima utilidad, sobre todo por dos factores fundamentales.

  1. Atraes tráfico de Google Images: Sí, es un tráfico que puedes pensar que «no tiene mucho valor» y, de hecho, no tiene tanto valor como el tráfico de Google «normal», pero las visitas son visitas y te puede salir alguna conversión de ellas, eso no lo olvides.
  2. Ayuda a posicionar tu site: si tienes una imagen correctamente posicionada para un término y ésta imagen está alojada en una página que trate sobre el mismo tema, a buen seguro tendrás un pequeño turbo de posicionamiento para la «página madre», y ésto sí que es interesante, ¿verdad?

A nuestro favor tenemos que posicionar imágenes no es ni mucho menos tan duro como posicionar páginas, y eso relaja mucho las cosas, además, con que realices un buen SEO on page es más que suficiente en la mayoría de los casos, porque tampoco nos vamos a volver locos por un tráfico que, por mayor o menor que sea, es secundario, ¿no crees?, pues aquí te dejo la lista de cinco consejos para optimizar las imágenes de cara al SEO.

Etiquetas ALT y Title

Sí, no me canso de repetirlo, si la imagen está alojada en un post o página de tu site, la imagen debe tener una etiqueta ALT descriptiva, y si puede ser en consonancia con la temática de la página y con palabras clave, mejor que mejor, esta es una de las partes que nos dará el pequeño turbo de posicionamiento a nuestra landing page como te comentaba antes.

Por otro lado, si la imagen está «suelta» en una página, no descuides la etiqueta Title, ya sabes que es de vital importancia.

Nombre de archivo

Sigue la misma lógica que sigues con todas las páginas de tu site. Si te has currado una infografía muy molona sobre los últimos datos de Facebook, por ponerte un ejemplo, te ayudará mucho más a posicionar si le pones como nombre de archivo algo parecido a «infografia-molona-facebook» que si pones «191882», ya que, en éste segundo caso, Google no tendrá ni idea de que estás representando con esa imgen.

Formato

Google y el resto de motores de búsqueda se llevan mejor con las imágenes en JPG, digamos que se ha convertido en el «estándar de Internet». Sí, sé de sobra que JPG no es ni mucho menos la panacea y tiene muchos puntos débiles, pero, querido amigo, es lo que hay.

Si no puedes utilizar JPG en tus extensiones también puedes hacerlo en GIF o en PNG, pero no te salgas de éstas tres si quieres posicionar medianamente bien.

Anchor text

El texto de enlace o anchor text es lo que le dirá a Google además de la etiqueta ALT que se puede ver en la imagen, sigue los mismos consejos que anteriormente y reforzarás el posicionamiento de la imagen para las palabras claves que escribas en éstos campos.

Tamaño

Intenta entrar dentro de los estándares, es decir, poco pinta en un site una imagen de 10 MPx a no ser que estés en un sitio de fotografía, pero, ¿qué hacer si es tu caso?, sencillo, sube la imagen tan grande como quieras pero, a la hora de ponerla en la página donde esté alojada toca el tamaño con las etiquetas height y width y ya lo tienes.

Con estos cinco sencillos pasos ya verás como se allana, y mucho, la manera en la que posicionas imágenes en Google con tu maléfico propósito de mejorar el posicionamiento orgánico de las páginas de tu site.

Sergio Ramírez

Sergio Ramírez

Me gusta más el Marketing Online que las galletas de chocolate. Poca broma.

8 respuestas

  1. Sergio, coincido en todo excepto en el último punto sobre el tamaño.  Google hace una serie de recomendaciones a través de Page Speed al respecto de ajustar las dimensiones de la imagen al tamaño máximo al que se van a mostrar en la web y además indicarlas en la etiqueta img de manera expresa, es decir, evitar redimensionamiento forzados tal como tu sugieres. Para una web normal recomiendo subirla como máximo de 1024x768px en el caso de que tenga formato horizontal ó 768x1024px para formato vertical, a no ser que sea un site de fotografía en cuyo caso es realmente necesario tamaños superiores para apreciar el detalle.No has comentado nada respecto a la profundidad de color de las imagenes, la óptima es de 24 bits; sobre otro parametro, la densidad de puntos por pulgada PPP con ponerla a 72ppp es suficiente, aunque con la proliferación de pantallas retina este parametro se puede ajustar a 96ppp.Asi mismo se debería eliminar toda la información EXIF que contienen normalmente las imagenes tomadas con cámaras fotográficas, ya eso no aporta nada salvo kb de peso innecesarios.Para reducir al máximo posible el peso en kb pero sin pérdida de calidad visible antes de subirlas a la web recomiendo usar JPEGMini, o Smush.it, webs que reducen impresionantemente el peso de las fotos sin detrimento de su calidad, haced la prueba y notareis la diferencia.Otra herramienta de gran utilidad para redimensionar de manera fácil y rápida una serie de imagenes, aplicarles incrustaciones de texto o marcas de agua, tipos de bordes, sombreados, convertirlas a otro tipo de archivo y renombrarlas automáticamente es Fast Stone Resizer que además es freeware.No has comentado nada sobre el formato del nombre de las imagenes, yo recomendaría ponerlo siempre en minúsculas, sin espacios ni acentos y haciendo la separación de palabras con el guión medio «-«. Asi evitamos la posible aparición de caracteres extraños en la url hacia la imagen y por tanto la posibilidad de que dicha imagen no se vea que presentan de algunos hosting baratos compartidos.Por último (y ya no me enrrollo más que al final máss que un comentario parece casi otro post) para comprobar como va una web en términos de velocidad de carga recomiendo usar la herramienta http://gtmetrix.com/ ya que analiza la web tanto con el optimizador de Google Page Speed como con el de Yahoo Yslow.Con todo esto espero haber sido útil, gracias por dejarme comentar, espero seguir aportando mi experiencia en otros post.Ah, y enhorabuena por el blog y por los gatitos, seguro que a Matt Cutts le encantan 😉

  2. Antes de nada, gracias por este pedazo de comentario 😉

    Me parece qu
    e lo que estamos proponiendo acerca de imágenes es prácticamente lo mismo, si te das cuenta al final el objetivo es subir la imagen al máximo tamaño que vas a mostrar en el site.
    Eso sí, hacer generalizaciones sobre cuál es el tamaño es un poco temerario, ¿para qué voy a subir la imagen a 1024×768 si la sección body de mi site es a 550×550?, es más lógico redimensionar.
    Aparte de esto está el tema de los thumbnails y demás historias, ya sabes que WordPress una vez subes la imagen hace tres redimensiones (menos si la foto es pequeña) para aligerar la carga de tu servidor a los tamaños grande, mediano y pequeño que hayas elegido en la configuración.
    En cuanto a la profundidad y los ppp sinceramente, vuelve a depender de cada imagen, si vas a subir una captura de pantalla de una gráfica no creo que sea menester llegar a 24 bits y 72 ppp, por ponerte un ejemplo, sino que hay que adaptarse a las necesidades y al peso de la misma.
    Con respecto al nombre está en el punto llamado «Nombre del archivo», precisamente lo que sugiere es eso…
    Por cierto, GTMetrix es una buena herramienta, ahí sí que coincido contigo.
  3. Gracias a ti por dejarme comentar y por hacerme merecedor del Top Comentaristas, es un orgullo!!!No sé porqué, pero no me permitía responderte sobre el mismo comentario, por eso lo he tenido que poner en otro, sorry!Estamos de acuerdo en todo en el fondo, sobre lo que discrepo ligeramente es en la forma de expresarlo: «sube la imagen tan grande como quieras pero, a la hora de ponerla en la página donde esté alojada toca el tamaño con las etiquetas height y width y ya lo tienes»Por mi experiencia veo a demasiada gente acostumbrada a subir las imagenes a un tamaño muchísimo más grande del que se van a mostrar y lo «apañan» tocando los atributos de ancho y alto de la etiqueta de imagen.Por eso te puntualizaba. Quizás te estás refiriendo al caso concreto de WordPress, en el cual se pueden retocar internamente el tamaño de las imagenes a través de editor propio de cada post. Si es así convendría explicarlo para que los usuarios de este gestor de contenidos sepan como sacarle el máximo partido a esa funcionalidad sin merma de su velocidad de carga.Yo me estaba refiriendo a las webs en general, tanto las estáticas hechas en HTML, como las dinámicas con cualquier gestor de contenido… lo importante para optimizar la velocidad de carga WPO es que la imagen esté subida con las mismas dimensiones que lo que indica el código fuente en su etiqueta correspondiente y no recurrir a redimensionamientos forzados. Sobre lo que dices del tamaño, cierto, cada web es un mundo, lo que quise decir es que para mostrar un portfolio por ejemplo, los 1024×768 px suelen ser más que suficientes para mostrar el nivel de detalle en una imagen que se tenga que ampliar desde un thumbnail, pero obviamente cada caso debe ser tratado de manera independiente.Sobre lo de los 3 tamaños automáticos que genera WordPress conviene ajustar este parámetro de manera personalizada para cada sitio, no siempre lo que viene de serie es lo más apropiado para todas las webs.Lo de la profundidad de color y la resolución en puntos por pulgada iba en referencia a fotografias provenientes o bien de camaras fotograficas con gran resolución o de infografias realizadas con proposito de ser impresas en cualquier soporte, lógicamente para su uso en pantalla no es necesaria esa densidad tan enorme con la que suelen salir las imagenes, por eso me pareció oportuno el indicar que dicho parámetro sea revisado.Efectivamente habrá imagenes gráficas que sea lo contrario, que no necesiten ese valor que yo doy como referencia, por ello y como he dicho antes, cada imagen debe ser tratada de manera independiente según el tipo y el uso que se le vaya a dar dentro de la web, no es lo mismo como un simple thumbnail o un icono que como una imagen ampliada al máximo de tamaño.Sobre lo que dices del nombre del archivo es cierto, lo que dices es lo mismo que digo yo, solo que no dices de manera expresa que lo del ejemplo debe ser en minúsculas, sin acentos y con los guiones como separación de palabras para que la gente sepa que asi deben ser sus nombres de archivos, es simplemente una puntualización que amplia de manera acertada tu ya de por sí brillante post.Respecto a GTMetrix como herramienta, toma nota de esto:http://gtmetrix.com/reports/reaplicante.com/trPtZaiuQue luego no se haga bueno el dicho de «En casa del herrero, cuchillo de palo».Convendría darle también una vueltecilla con ella a las webs del grupo, hay de todo ;-). Lo dicho, un placer aportar y espero seguir siendo digno del enlace dentro del «Top Comentaristas» de esta semana, por mi parte tienes el tuyo en el sidebar «Recomendamos visitar«.En próximos comentarios prometo no extenderme tanto, pero es que apasiona tanto este tema que a veces rozo el TOC en mi búsqueda de la excelencia en el SEO.Hasta pronto.

  4. Muy buenas de nuevo, normalmente en este site se habla de WordPress, de ahí que lo omitiera.

    Por cierto, te he quitado el enlace que intentabas meter en la palabra SEO, que está un poquito feo…
  5. Hola de nuevo Sergio. Ninguno de los dos hemos mencionado el uso de sprites para la gestión de las imagenes en una web, especialmente útil para las imagenes de «servicio» como el logo, los iconos y otras imagenes fijas que se repiten en las distintas secciones de un site.Lo recomiendan Page Speed y GTmetrix de manera expresa. Con esta técnica no se disminuye el peso del contenido a cargar, pero al reducirse el número de peticiones al servidor, eso se traduce en un descenso muy notable del tiempo de carga. Por último mencionar una herramienta instalable hecha en Air de Adobe para la optimización de imagenes: Shrink-O-Matic y otra específica para imagenes en PNG llamada TinyPNG que permite conservar la transparencia alpha.Espero que sean de utilidad a la comunidad en general.Por cierto, no hemos comentado nada de lo de mi comentario anterior, ya sabes que estoy abierto al dialogo.

  6. El uso de sprites como comentas es muy útil, sobre todo para cosas fijas de los themes, es cierto que ahorra mucha carga de servidor.

    Las dos herramientas no las conocía, las apunto porque parecen muy útiles.
    Con respecto al comentario anterior, para ponerte en contacto por el tema del site de SEO podrías haber utilizado el formulario de contacto, que precisamente para eso está 😛
  7. Muchas gracias por el artículo. Tengo una duda. tengo imagenes en mi prestashop con mayusculas el nombre del archivo por ejemplo Casa-De-Muñecas.jpg y las he cambiado a minusculas por el posicionamiento. Afectará esto al SEO? Lo considerara contenido duplicado? O no encontrara las imagenes?

    1. Muy buenas Silvia,

      No te va a afectar que pongas el nombre con mayúsculas o minúsculas, así que lo más normal es que no notes el cambio.

      Ahora bien, lo importante es que la imagen no esté enlazada desde la URL que quieres posicionar, para que no compitan por la relevancia en el SERP.

      ¡Un saludo!

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.