Atributo ALT en las imágenes. Optimizadas y accesibles.

Cuando hablamos de optimizar imágenes en el blog tenemos que pensar en tres cosas básicas:

  • El tamaño debe ajustarse a nuestro blog y pesar poco.
  • Debemos usar nuestras palabras clave para que google las pueda indexar.
  • Que las imágenes que acompañan un texto sean accesibles y los programas que leen texto para ciegos las puedan también leer.

Para la primera lo más importante es conocer el tamaño de las imágenes en nuestra plantilla y adaptar las fotos siempre a ese tamaño. Por ejemplo, en mi tema o plantilla de wordpress las imágenes destacadas son de 1170px por 550px así que si las creo en ese tamaño me aseguro de que una vez insertadas en el post no va a cambiar, cortar o escalar nada.

Sobre el peso, una imagen de 100-200 Kbytes es muy correcta, si subís directamente desde la cámara o el móvil sin editar antes una fotografía os podéis encontrar con que pesan muchísimo y eso os perjudicará tanto en el tamaño general de vuestro blog como en el tiempo de carga (y tened en cuenta que hablamos de milisegundos, y a google no le gusta nada que las páginas tarden mucho en cargar).

Para la segunda y la tercera usaremos el atributo ALT en las imágenes, eso hará tanto que google pueda indexar nuestra imagen debidamente, como que se muestre un texto descriptivo en el caso de que las imágenes no se puedan cargar, o que una aplicación de lectura de páginas web para ciegos pueda leer la descripción de la imagen.

Hay que tener en cuenta que el titulo de la imagen no es lo mismo que el atributo ALT (o texto alternativo) y en ningún caso sirven para lo mismo. El título nos ayudará a buscar la foto en nuestra galería, hay poca evidencia de que el título sea importante sume para SEO pero aun así, mal no hace tenerlo bien y que no quede un feísimo IMG3245.jpg porque también muchos navegadores es el texto que muestran al pasar el ratón por encima de la foto.

captiura de pantalla del editor de imágenes de WP

Cómo configuramos el atributo ALT en wordpress y blogger o HTML

En la captura de pantalla de arriba podéis ver la pantalla que nos aparece cada vez que se sube una foto a wordpress, en el recuadro de abajo que se llama “texto alternativo” escribiremos nuestra descripción.

En blogger pincharemos sobre la imagen para acceder a sus propiedades, y ahí lo editaremos.

captura de pantalla del editor de imagenes en blogger

Si queremos editar el HTML de una imagen una vez está puesta para modificar este atributo es también muy fácil, y lo haremos con el siguiente código:

<img src=”nombredelarchivo.jpg” alt=”aquí escribimos el ALT” title=’aquí escribimos el título’ />
Pero del HTML nos podemos olvidar ya que tanto worpdress como blogger lo escribirán automáticamente cuando nosotros escribamos el “texto del alt” en el editor de imágenes.

Cómo elegir un buen atributo ALT en nuestras imágenes

Hay unas cuantas cosas a tener en cuenta a la hora de elegir un buen texto alt para nuestras imágenes, lo más importante es que siempre lo rellenemos. Tened en cuenta que es la forma en la que el buscado leerá, entenderá e indexará nuestra foto y luego aparecerá cuando la gente haga búsquedas por imágenes, así que nos puede ayudar al posicionamiento y va a reforzar nuestras palabras clave para el SEO.

  • Usad las palabras clave de vuestro post (en la medida de lo posible).
  • Que no sea excesivamente largo, una descripción corta y concisa.
  • Que sea diferente al nombre del archivo y al título, pero si vuestro nombre de archivo ya es la descripción de la foto podéis usar el mismo.

¿Qué otras cosas hay que tener en cuenta cuando subimos imágenes?

Lo que os decía la principio sobre el peso del archivo, pero que la imágen sea nítida y con calidad. También añadir nuestro logo o marca de agua nos va ayudar a que no nos roben fotografías y a reforzar nuestra marca personal.

Que las imágenes sean siempre propias, hayamos pagado por ellas o sean sacadas de un banco de imágenes gratuito. Recordad que el encontrar una imágen en google no quiere decir que la podáis usar libremente. En caso de usar una imagen que no sea vuestra, preguntad antes o citad siempre al autor/a.

Si ponemos texto en las imágenes, ni los lectores de pantalla ni google los va a leer, pero son muy positivos en las redes sociales y también pueden atraer tráfico o llamar más la atención sobre nuestras publicaciones.

Una recomendación personal

Aquí quiero aprovechar para recomendar dos blogs, de la misma persona, The Vikings Mama, en su blog personal y en 6 sense travel, dedicado a los viajes y el turismo inclusivo.

¿Tenéis alguna duda? ¿Usáis el ALT para describir vuestras imágenes?

 

Un +1 o un compartido nos ayuda a seguir escribiendo :)

16 comentarios

  1. […] cuidadosos en configurar correctamente el texto alternativo al subirlas. Os recomiendo que leais este post de Annabel, de La Nave del Bebé, donde explica como configurar correctamente el atributo […]

  2. […] configurar las imágenes con ALT te recomiendo este post del blog de Annabel Verneda:  http://lanavedelbebe.com/atributo-alt-las-imagenes-optimizadas-accesibles/ ¿Y tú? ¿Te unes a hacer de las redes un lugar más […]

  3. Muchas gracias por las explicaciones. Ya había puesto la foto en #MM, así que he seguido tus indicaciones y he puesto u texto alternativo. No sé si he hecho lo correcto. Si algo está mal me gustaría que me lo dijeras.
    Muchas gracias.

  4. […] subirlas. Las imágenes son importantes, descríbelas para personas ciegas. Recomiendo que leáis este post de Annabel, de La Nave del Bebé, donde explica como configurar correctamente el atributo ALT […]

  5. […] Para saber como configurar las imágenes con ALT puedes mirar este post de La nave del bebé. […]

  6. […] saber como configurar las imágenes con ALT y/o sumarte a #BlogsAccesibles en twitter, accede a este […]

  7. Una información excelente y ahora que acabo de empezar no me costará nada adaptar mis imágenes y que mi blog sea accesible para todos .
    Porque no cuesta nada hacerlo y encima nos beneficiamos todos de ello.
    Gracias Annabel por esta guía tan bien explicada hasta para principiantes.

  8. […] saber como configurar las imágenes con ALT y/o sumarte a #BlogsAccesibles en twitter, accede a este […]

  9. […] No, no ha cargado mal la entrada. Así es como las vemos los ciegos al usar nuestro lector de pantalla si no has configurado el atributo alt en tu blog. Para aprender más sobre como hacerlo y de su utilidad entra en este post de la Nave del Bebé […]

  10. […] Para saber como configurar las imágenes con ALT puedes mirar este post: […]

  11. […] Para saber como configurar las imágenes con ALT puedes mirar este post de La nave del bebé. […]

  12. Siempre siempre, es muy importante además de que puede traernos mucho tráfico al blog, cada vez hay más personas que buscan por imágenes.
    Añadiría algo si me permites; si hay varias imágenes, que el atributo alt sea diferente y podemos aprovecharlo para incluir términos relacionados ;)

    Gracias por tus consejos

  13. Menudo repaso tengo q darles a las imágenes del blog y q pereza me da porque hay unas cuantas. Pero si Google me va a querer más, tendré q hacerlo. Gracias por estos póst. Salu2.

  14. Como de corta tiene que ser la descripción, digamos si pensando en la accesibilidad digo que la fotografía incluye a dos comensales comiendo en un restaurante de decoración asiática un plato de ramen, unos gioza, unos aperitivos, arroz blanco servido en boles redondos pequeños. Sería muy larga y debería simplemente decir: Platos asiáticos en restaurante.

  15. Qué buen post, y súper útil. Yo no lo estaba haciendo bien, vamos, que ni siquiera lo pongo. Sí que cambio el nombre del fichero y reduzco el tamaño de las fotografías antes de publicar (desde hace unos meses, antes las subía tal cual). Es que yo he ido aprendiendo sobre la marcha… Y he hecho todo lo que no tenía que hacer… ¡Gracias por los consejos! 😊

  16. Me viene genial tu post! Tengo toda la intención de llevar mi blog a su mayor accesibilidad posible y no sabía la importancia del alt en las imágenes.
    ¿Se podría editar en wordpress.com toda la galería que ya está en uso? ¿al hacerlo sería ya visible en los posts en los que estén subidas?
    Mil gracias 😗😗😗

Deja un comentario