Guía SEO de optimización de imágenes para responsables de marketing

Guía SEO de optimización de imágenes para responsables de marketing

Cuando se habla de la gran importancia del contenido en una estrategia SEO, la tendencia es dirigir el enfoque hacia lo puramente textual y muchas veces se pasa por alto la existencia de otros tipos de contenido, como las imágenes, que pueden generar un importante volumen de tráfico desde los buscadores hacia tu sitio web.

La búsqueda universal de Google incluye a menudo imágenes en la página de resultados (SERP, del inglés Search Engine Result Page) y, en muchos casos, estas aparecen en la parte superior, intercaladas entre los primeros resultados de búsqueda. No se trata, por tanto, de una cuestión baladí, ya que puede facilitar el hecho de que nuestro sitio web sea encontrado y visitado.

Ya vimos en un artículo anterior algunos conceptos básicos de posicionamiento en buscadores. En este caso voy a ser más específico, centrándome en las imágenes y en una serie de factores que debes tener en cuenta para sacarles el máximo rendimiento.

Peso del fichero de imagen

Resulta básico e imprescindible que optimices el peso de las imágenes antes de subirlas a tu servidor, ya que va a afectar al tiempo de carga de la página en la que hayas insertado esa imagen. Este peso va a depender de las dimensiones de la imagen (intenta no exceder de 1280px) y de su calidad. Deberías procurar comprimir la imagen todo lo que sea posible, pero sin perder excesiva calidad. Busca el equilibrio entre peso y calidad. Dispones de programas como RIOT o herramientas online como Web Resizer que puedes utilizar para tal fin.

Formato de imagen

Elige el formato de imagen apropiado, según tus necesidades:

  • JPEG (Joint Photographic Experts Group): el más extendido y recomendado para las fotografías.
  • GIF (Graphics Interchange Format): soporta un máximo de 256 colores, de ahí que no sea apropiado para fotografías, pero sí para imágenes sencillas con colores planos y para animaciones. Además soporta transparencias.
  • PNG (Portable Network Graphics):
    • PNG8: muy similar al GIF, ya que se limita a 256 colores y, al igual que él, es el indicado para logotipos, gráficos de colores planos, etc.
    • PNG24: ofrece mucha más calidad que el anterior, ya que su límite de colores se encuentra en 16,7 millones y soporta canales alfa para transparencia. El peso del fichero, por tanto, será mayor. Es recomendable para fotografías que requieran transparencia.

Una vez elegido el formato, no olvides guardar la imagen a una resolución de 72ppp (píxeles por pulgada).

Nombre del fichero

Un nombre adecuado en el fichero de imagen ofrece pistas a Google acerca del contenido de la misma. Intenta que este nombre contenga la palabra clave que quieras posicionar y sea una buena descripción de lo que se representa en la imagen. Sé conciso, utiliza minúsculas, no hagas uso de acentos ni símbolos especiales y separa las palabras con guiones.

Así que olvida nombres del tipo “DSC_0008.jpg“, “imagen0037.png“, “Sintitulo.gif” o similares y apuesta por algo del tipo “zapatilla-deportiva-hombre-pegasus-azul-nike.jpg“. De esta forma, el código HTML de tu imagen presentará el siguiente aspecto:

<img src="http://www.dominio.com/imagenes/zapatilla-deportiva-hombre-pegasus-31-azul-nike.jpg" alt="" />

Imagen original

Siempre que te sea posible, trata de usar imágenes hechas por ti. A Google le gusta el contenido original y es más fácil que una imagen vaya escalando posiciones en los resultados de búsqueda siendo única, que si se trata de una copia de las cientos de miles existentes. Si a esto le añades que tenga calidad y llame la atención, será más factible que sea compartida y enlazada, lo que ayudará a sumar relevancia y popularidad.

Al tratarse de imágenes que has generado por tus propios medios, es interesante que las protejas mediante una licencia Creative Commons. De esta manera permites que puedan ser difundidas pero reconociéndote la autoría de la misma, lo que puede traducirse en un aumento de enlaces entrantes.

Texto en la imagen

No insertes texto que consideres importante en las propias imágenes, ya que ni los buscadores ni aquellos usuarios que presenten algún tipo de discapacidad visual o problemas de conexión van a poder acceder a ese contenido.

Datos Exif

Los datos Exif (Exchangeable image file format) constituyen una especificación para formatos de archivos de imagen usado por las cámaras digitales que agrega metadatos con información acerca de la configuración, modelo y marca de la cámara con la que se obtuvo la fotografía, así como la fecha, hora y localización. Eliminar esta información puede reducir un poco el peso de tu imagen, sin embargo, aunque los buscadores no lo están utilizando, no se descarta para un futuro y que pueda ser un elemento más para aumentar la relevancia.

Puedes ver o eliminar los datos utilizando la herramienta online verexif.com.

Texto alternativo (ALT)

Cada imagen debe tener su correspondiente texto alternativo. No solamente es útil para los buscadores, sino también para los usuarios con problemas de visión. Además, es el texto que aparecerá en pantalla si, por algún motivo (conexión lenta, un error, uso de lector de pantalla), no se muestra la imagen. Deberías incluir alguna palabra clave apropiada y relacionada con la imagen.

Teniendo esto en cuenta, y siguiendo con el ejemplo que planteaba más arriba, te quedaría el código HTML de la siguiente manera:

<img alt="Imagen frontal de la zapatilla deportiva para hombre Pegasus 31 Azul de Nike" src="http://www.dominio.com/imagenes/zapatilla-deportiva-hombre-pegasus-31-azul-nike.jpg" />

Atributo title

Representa el título de la imagen y puedes aprovecharlo para incluir algunas palabras clave. Además, si especificas este atributo, aparecerá el contenido al pasar el cursor sobre la imagen.

Volvamos al ejemplo, ahora con el atributo title:

<img title="Zapatilla deportiva para hombre Pegasus 31 Azul de Nike" alt="Imagen frontal de la zapatilla deportiva para hombre Pegasus 31 Azul de Nike" src="http://www.dominio.com/imagenes/zapatilla-deportiva-hombre-pegasus-31-azul-nike.jpg" />

Atributo longdesc

Te permite añadir descripciones largas a tus imágenes, que puedes aprovechar para incorporar palabras clave que quieras posicionar y ofrecer mayor información a los buscadores acerca de la imagen.

Como puedes comprobar en el siguiente ejemplo, el atributo longdesc no incluye directamente la descripción sino la URL de la página en la que se encuentra:

<img title="Zapatilla deportiva para hombre Pegasus 31 Azul de Nike" alt="Imagen frontal de la zapatilla deportiva para hombre Pegasus 31 Azul de Nike" src="http://www.dominio.com/imagenes/zapatilla-deportiva-hombre-pegasus-31-azul-nike.jpg" longdesc="http://www.dominio.com/acerca-de-zapatilla-deportiva-hombre-pegasus-31-azul-nike" />

Supone un buen complemento para el atributo ALT; sin embargo, su uso no es frecuente y se limita a imágenes que, por su complejidad, requieran más información para llegar a ser descritas adecuadamente.

Dimensiones de la imagen

Al proporcionar las dimensiones de la imagen vas a reducir el tiempo de carga de la página ya que, de esta forma, el navegador va a saber de antemano cuál es el espacio que tiene que reservarle sin necesidad de esperar a que termine de mostrarse y puede proseguir con la carga del resto de la página.

<img title="Zapatilla deportiva para hombre Pegasus 31 Azul de Nike" alt="Imagen frontal de la zapatilla deportiva para hombre Pegasus 31 Azul de Nike" src="http://www.dominio.com/imagenes/zapatilla-deportiva-hombre-pegasus-31-azul-nike.jpg" width="400" height="300" />

Pie de foto o caption

Puedes sacar partido del pie de foto al incorporar información descriptiva adicional bajo las imágenes, ya que les será muy útil a los buscadores para relacionarlas con el contenido. Esto lo puedes hacer mediante el empleo de la etiqueta HTML5 <figcaption>

Continuando con el ejemplo anterior:

<figure>
  <img title="Zapatilla deportiva para hombre Pegasus 31 Azul de Nike" alt="Imagen frontal de la zapatilla deportiva para hombre Pegasus 31 Azul de Nike" src="http://www.dominio.com/imagenes/zapatilla-deportiva-hombre-pegasus-31-azul-nike.jpg" width="400" height="300" />
  <figcaption>La zapatilla deportiva Pegasus 31 incorpora una amortiguación suave que la hace ideal para pistas de tierra y asfalto.</figcaption>
</figure>

Contexto

Es importante que el contenido que rodea a la imagen esté relacionado y contenga palabras clave acorde con ella ya que, en caso contrario, le hará perder relevancia de cara a los buscadores. Aprovecha los títulos (H1, H2, H3,etc) y las negritas en la página para destacar palabras clave asociadas a la imagen. En este sentido, te recomiendo que eches un vistazo a nuestra selección de herramientas SEO gratuitas , ya que puedes encontrar algunas muy interesantes para el trabajo con palabras clave, así como para el análisis y diagnóstico del estado de tu página.

Texto de anclaje o anchor text

Si utilizas vínculos que apuntan directamente a las imágenes, es una buena práctica que trates de incluir palabras clave en el texto del enlace (o anchor text) porque va a aportar más información al buscador acerca del contenido que quieres mostrar al usuario. Evita, por tanto, textos como “Ver imagen” y usa expresiones más completas y descriptivas como “Ver detalle frontal de las nueva zapatilla deportiva Pegasus de Nike”. Eso sí, busca siempre sinónimos y construcciones naturales que aporten valor al usuario, para así evitar el uso excesivo de palabras clave (o keyword stuffing) que está penalizado por Google.

Ubicación de la imagen en la página

Intenta situar las imágenes que consideres más relevantes de cara a tus palabras clave en la mitad superior de la página, ya que Google las considerará más importantes que las de la parte inferior.

Reutilización de imágenes

El hecho de utilizar la misma imagen en distintas páginas va a darle a entender a Google que esa imagen es más importante, lo que va a traducirse en un aumento de su relevancia.

Enlaces externos

Si quieres lograr que aumente la visibilidad de tus imágenes, necesitas enlaces externos que apunten directamente a ellas. Esto es recomendable porque Google tiene en cuenta el tráfico que genere para otorgarle una cierta importancia, lo que va a afectar a su posicionamiento. Puedes valerte de las distintas redes sociales como Pinterest, Instagram, Flickr, Twitter o Facebook para conseguir enlaces directos de calidad.

Microdatos Schema.org

Cada vez se está poniendo más esfuerzos en conseguir que los buscadores sean más “inteligentes” y respondan con resultados más precisos a las consultas de los usuarios. Es aquí donde entran los microdatos Schema, que son un conjunto de etiquetas extra que puedes agregar a los elementos HTML para indicar a los motores de búsqueda, de una forma más específica, cuál es su contenido, su carga semántica. De esta forma, el buscador va a poder comprender mejor el contenido y estructura de tu página web. Partiendo del ejemplo con el que estamos trabajando, podrías completarlo de esta manera:

<figure itemscope itemtype="http://schema.org/ImageObject">
  <img itemprop="contentURL" src="http://www.dominio.com/imagenes/zapatilla-deportiva-hombre-pegasus-31-azul-nike.jpg" alt="Imagen frontal de la zapatilla deportiva para hombre Pegasus 31 Azul de Nike" title="Zapatilla deportiva para hombre Pegasus 31 Azul de Nike" height="300">
  <figcaption itemprop="description">La zapatilla deportiva Pegasus 31 incorpora una amortiguación suave que la hace ideal para pistas de tierra y asfalto.</figcaption>
</figure>

Sitemap de imágenes

Si quieres que los buscadores muestren tus imágenes en los resultados de búsqueda, es imprescindible que éstas puedan ser encontradas e indexadas. Para ello es muy útil crear un sitemap para imágenes, sobre todo en sitios grandes con un gran volumen de ficheros, porque facilitas la labor a los buscadores y además reduces la posibilidad de que alguna imagen quede sin indexar correctamente.

Directorios

Agrupa todas las imágenes en un único directorio, por ejemplo “/imagenes/”, para facilitar que los buscadores las localicen. Además, a ti también te resultará mucho más útil buscar en una carpeta que en una vorágine de directorios y subdirectorios desperdigados.

Robots.txt

Utiliza el fichero robots.txt para indicarle a Google dónde se encuentra la carpeta en la que agrupas todas las imágenes, así como el sitemap que mencionamos anteriormente, para así facilitar que el buscador pueda indexar todo ese contenido. Ejemplo:

User-agent: Googlebot-Image
Allow: /imagenes/

Conclusión

A través de este artículo, has podido comprobar que las imágenes son algo más que un elemento puramente decorativo y cómo suponen un punto de apoyo con el que mejorar tu posicionamiento. La tarea de optimización no resulta excesivamente compleja, pero requiere ser meticuloso en todos los aspectos que he comentado para obtener los mejores resultados.

¿Conoces más factores relacionados con la optimización de imágenes para los motores de búsqueda que no he mencionado?


Alvaro Pastor

Experto en maquetación Web bajo estándares W3C para el desarrollo de sitios web usables y accesibles. Apasionado de HTML5, CSS3, WordPress, manejo de Preprocesadores CSS, Responsive Web Design y la optimización de código. Entusiasta del SEO, la curación de contenidos y el linkbuilding. Amplia experiencia en formación a clientes.


Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current ye@r *

2 comentarios

  • carlos dice:

    por una cuestión de espacio necesito que el figcaptio caiga sobre la image he intentado con margin-top negativo y surte efecto, como pordrìa hacerlo? puedes tirarme una idea?

    • Hola, Carlos.
      Teniendo en cuenta el siguiente código:

      <figure class="mi-imagen">
      <img src="nombre-imagen.jpg" alt="Texto alternativo" width="360" height="240">
      <figcaption class="mi-caption">Pie de foto de la imagen</figcaption>
      </figure>

      Podrías hacer lo siguiente:

      .mi-imagen {
      position: relative;
      }
      .mi-imagen img {
      display: block;
      }
      .mi-caption {
      background: #000;
      bottom: 0;
      color: #FFF;
      position: absolute;
      left: 0;
      right: 0;
      }

      Espero que el ejemplo te sirva de orientación.

      Un saludo y gracias por leernos.