domingo, 28 de octubre de 2012

Utilizar el atributo Alt en las imágenes de Blogger

Si utilizas la plataforma de Blogger para alojar tu blog, agregar las propiedades de una imagen es muy simple. Solo debemos agregar el comúnmente llamado atributo ALT o la etiqueta alt. En este tutorial se te explicará cuál es el atributo ALT y como agregarlo a las imágenes.

Atributo Alt para imágenes


El atributo alt se utiliza como una alternativa a la imagen. Si alguien visita tu sitio, tiene sus imágenes desactivadas o bloqueadas en su navegador, entonces se utilizaría el atributo alt en la imagen para entender lo que se está visualizando. El texto alternativo se muestra en lugar de la imagen. Las personas que tienen visibilidad reducida  o son directamente ciegas suelen utilizar un software de lectura de pantalla para escuchar a los sitios web. Este atributo le vienen muy bien a ellos también, porque se oye el texto alternativo.

También está el hecho de que el atributo alt contribuye a la optimización del blog para los motores de búsqueda (SEO). Cuando los Motores de búsqueda de imágenes de Google rastree tu blog, no puede ver las imágenes, entonces lee las propiedades de imagen para después clasificarla. Si lo que quieres es que tus imágenes aparezcan en los resultados de Google de manera correcta, entonces el uso adecuado de estas propiedades es necesario.

Echemos un vistazo a las dos opciones que Blogger te da. Al agregar una imagen a tu entrada, aparecerá un menú inferior con la palabra "Propiedades". Al hacer clic en "Propiedades" abrirá una ventana con dos secciones:

1. Título Texto
2. Alt Text (o texto alternativo)

El Título del texto es lo que nuestros lectores veran si pasan el ratón sobre la imagen. Es el título de la imagen.

Texto alternativo es el "texto alternativo" que se muestra en el software lector de pantalla y de los robots rastreadores de imagen.

Diferentes maneras de colocar el atributo ALT.


<Img src = "Imagen name.jpg". width = "150" height "20" border = "0" alt = "DESCRIPCION DE LA IMAGEN ">

O

<img width="20" height="15" src="nombreimagen.GIF" alt="DESCRIPCION DE LA IMAGEN">

O

<img alt="DESCRIPCION DE LA IMAGEN" src="nombreimagen.GIF" >

O

<img src="lugar de la imagen" alt="DESCRIPCION DE LA IMAGEN">

Un par de cosas a tener en cuenta es si la imagen es jpg, gif o png, usted tendría que cambiar la extención para corresponder con la imagen. Los atributos src y alt son un dato obligatorio. Los atributos de anchura, la altura y la frontera son opcionales.

El mejor consejo que puedo dar con la descripción de la imagen es que sea breve y al grano. Pensemos en ello de esta manera, si uno no pudiera ver la imagen, cuales serían las palabras claves que la describirían?.

Me encontré con un gran video en el blog oficial de Google Webmaster que explica un poco mejor el funcionamiento del atributo ALT y de la importancia que este tiene para los motores de búsquea. Recomiendo traducir los substitulos al español presionando el traductor de substitulos de Youtube para entender un poco mejor ;)



Si Google sugiere hacerlo de cierta manera, ¿quiénes somos nosotros para discutirlo?

¿Utilizas el atributo alt de imagen? Si es así, ¿qué método anterior utilizas?



Te gusta esta entrada? Compartela con amigos.

7 comentarios:

  1. No lo uso, sí que lo intentaré.


    Un saludo.

    ResponderEliminar
  2. Yo escuchaba del atributo alt pero no entendia que era entonces quiere decir que si agrego la etiqueta alt es para imagenes? esto que podria descrbir esto indexara mejor mi sitio? muy buen post amigo te felicito lograste ayudarme en mis dudas

    ResponderEliminar
  3. Hola que tal me a servido de mucho tu explicacion para mi blog El sindrome de williams y mi panish gracias por compartirla con los que conocemos poco de este mundo del los blogs.
    Espero que sigas en esta misma linea y no decaiga tu animo a seguir compartiendo datos.
    Gracias por todo

    ResponderEliminar
  4. La explicación es perfecta, pero me pregunto cómo aplicar las funciones ALT y TITLE a un gadget de imagen que sirve, a su vez, para enlazar otra página.

    ResponderEliminar

IconIconIconFollow Me on Pinterest