28 enero 2014

Útil Herramienta para Identificar Fallos en las Imágenes del Blog

captura de la pagina con la herramienta

Buscando otra cosa, descubro esta herramienta (entre muchas otras que luego veremos) que va a resultarle útil, si estás pensando (o trabajando) en optimizar tu blog. Se trata de Image SEO tool, y lo que hace es analizar una página, con el fin de averiguar si está siguiendo las recomendaciones básicas de optimización para los motores de búsqueda (SEO) en lo que respecta a las imágenes.

La herramienta nos muestra la siguiente información de la imagen:
  • Nombre de la imagen.
  • El texto alternativo de la imagen o advertencia de que no lo tiene. El texto alternativo es el que se pone en un atributo llamado "alt" y sirve para describir una imagen. Con el editor de Blogger se puede agregar fácilmente si haces click sobre la imagen desde el editor y seleccionas: "propiedades".
  • Las dimensiones de la imagen (ancho y alto), o advertencia de que no las tiene.

Aunque la página está en inglés, puedes usar el traductor de Google. Todavía más sencillo usar la opción que está integrada al navegador Chrome. Como la información que arroja la herramienta es simple, va a ser fácil entender lo que nos dicen, además yo te voy a guiar para que puedas usarla e implementar los cambios de ser necesario.


¿De qué manera va ayudarme la herramienta?

Como lo indican en la susodicha página, va ayudarte a identificar algunos aspectos importantes y que pudieras estar descuidando:

¿Pueden las personas con discapacidades entender mis imágenes?

Una imagen que no tenga el texto alternativo, no podrá ser interpretada por un lector de pantalla, usado por ejemplo por personas con alguna discapacidad visual.

Todos los aspectos implicados en facilitar de forma adecuada el uso de un sitio web (o blog) por personas con alguna discapacidad, por ejemplo visual, intervienen en mejorar la "Accesibilidad web". En otras palabras, agregar el texto alternativo a las imágenes de tus entradas ayuda a que el contenido sea más accesible. Ponerlo, también influye favorablemente en el caso de quienes tengan un ancho de banda limitado en su servicio de Internet, ya que, si la imagen no puede mostrarse, aparecerá el texto en sustitución.

¿Puede Google comprender mis imágenes?
Google nos ha dicho la importancia que tiene agregar la descripción de la imagen, de tal modo que pueda entender lo que ésta representa. Al igual que ocurre con su motor de búsqueda, ellos trabajan para ofrecer resultados relevantes en su buscador de imágenes. Trabajar en ésto y hacerlo bien, puede traernos visitas al blog (tráfico), así que vale dedicarle tiempo ;)

Échale un vistazo a esta página de Google que ofrece muy buenas recomendaciones que te servirán al momento poner un nombre a la imagen (que también es importante), así como poner el texto alternativo.

Recomendaciones de Google para optimizar las imágenes

¿Mis imágenes causan problemas de velocidad en la página? 
Definiendo el ancho y alto de una imagen en el código HTML ayudaremos al navegador a mostrar la imagen más rápido. Con la herramienta sabremos si lo hemos hecho.

¿Estoy utilizando texto alternativo correctamente?
Existen algunas recomendaciones al momento que se utiliza el texto alternativo. Por ejemplo, que sea lo más natural posible y por supuesto descriptivo, sin caer en la repetición o aglomeración de palabras. La herramienta es capaz de identificar palabras que se han repetido y de haberlas, te hará una advertencia o comentario.

Puede echarle un vistazo a esta página donde nos hablan de algunos tips útiles cuando usamos el texto alternativo en las imágenes: Tips para el uso del texto alternativo. (en inglés pero puede traducirse con Google translate).

¿Estoy utilizando dimensiones en la imagen?
La herramienta nos hará una advertencia, si detectara que no estamos definiendo el alto y ancho de una imagen.


Cómo usar la herramienta:


  1. Ve a la página e introduce la URL (dirección web) que deseas analizar. Por ejemplo la página de inicio, y pulsa enter o haz click en "Submit".
  2. Luego, nos arrojará un listado con las imágenes, que se encuentran en dicha página (si le es posible mostrar la imagen). Arriba mostrará el nombre de la imagen, y debajo la información que te mencionaba al principio. Por ejemplo, así se muestra la información de una imagen de mi blog de la página principal.

    Ejemplo de los resultados de la herramienta


Qué nos dice la información que arroja la herramienta:

Los iconos que se muestran en cada punto serán de ayuda, ya que sabremos is algo hay que corregirse. Básicamente los puntos más importantes que hay que verificar son: que la imagen tenga texto alternativo y que tenga definido el alto y el ancho.

Veamos por orden de arriba a abajo, la información que nos muestran:

Arriba de la imagen aparece el nombre, que se obtiene de la URL.

La primera linea debajo de la imagen, nos dice si ésta tiene agregado el texto alternativo. en este caso dice: The ALT text of this image appears to be following the Google guidelines well!

La segunda linea, hace un comentario sobre el texto alternativo que usamos. En mi caso dice: The ALT text of this image is following the Google guidelines at their minimum, but could likely be more descriptive. See if the alt text adequately describes the image. Me está diciendo que si bien el texto alternativo sigue las directrices de Google, pudiera ser más descriptivo. Ésto me los está diciendo porqué solo uso una sola palabra que como puedes ver en la imagen es "compartidisimo" (Alt Text: compartidisimo). Sin embargo, así esta bien, ya que ese será el texto adecuado y que aparecerá si el navegador no puede mostrar esa imagen.

Esa imagen yo la subí desde las opciones de configuración de la cabecera, y lo que pasa en tal caso, es que Blogger automáticamente asigna el título del blog como texto alternativo. Si usaras una imagen en la cabecera, que sustituye al nombre del blog, como un logotipo, puedes cambiar el texto alternativo manualmente por el nombre del dominio (si lo tuvieras) de tal modo que si la imagen no puede mostrarse, aparezca ese texto. Para ello, buscas la parte del código involucrada para que se muestre la imagen:

<img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl'...

Esa parte que he resaltado con fondo amarillo, es la parte que corresponde al atributo alt y su valor. Bastaría entonces en cambiar:

expr:alt='data:title' 

por:

alt='nombre_del_dominio.com' 

Por supuesto es opcional y en el caso de usar dominio.

Cuando se agrega el texto alternativo, la clave está en pensar que ese texto se va a ver si la imagen no puede ser mostrada por el navegador. ¿El texto describe la imagen?

Luego, nos dicen si la imagen tiene definido un ancho y un alto: Above image has dimensions (height/width). Y en este caso si las hay, ya que Blogger la asigna automáticamente pero, hay un error ya que aparece con el valor aparece con pixeles, y no debería llevarlos. Esa causará un problema si quieres validar, y habrá que cambiarlo (esa es otra historia).

Por último aparece el texto alternativo, y las dimensiones (ancho y alto) de la imagen si las tiene.



Cómo arreglar posibles fallos


1) La ausencia del texto alternativo en las imágenes de las entradas.

El editor de Blogger permite agregar el texto alternativo fácilmente. Solo ingresa al editor, haces click sobre la imagen, y seleccionas la opción que dice: "propiedades". Luego se abrirá esta ventanita:



Opciones para agregar propiedades de imagen en Blogger


Pones el texto alternativo donde dice: texto del alt: como puede apreciarse en la imagen de arriba.

Al hacerlo, el editor agregará el texto dentro del atributo alt en el HTML de la imagen y que puedes ver desde el HTML de la entrada:

<img src="gatito.png" alt="la descripción de la imagen"/>


2) Agregar el alto y ancho en una imagen de las entradas.

Si algunas imágenes de las entradas, no tienen el alto y ancho definido, habrá que agregarlo, y éste debe ser exactamente el alto y ancho que tiene, por ejemplo una imagen de 200 pixeles x 200 pixeles, debe llevar esos valores. Para ésto debes tener seleccionada la opción "Tamaño original", y saber el ancho y alto.

Para agregar el alto y el ancho, tendrás que ir al editor, hacer click en el botón que dice HTML que aparece a un lado de Redactar, buscar el código de la imagen, y agregarlo:

<img alt="la descripción de la imagen" src="http://4.bp.blogspot.com/-KcAqENzflnA/Uuc0hzsOp3I/AAAAAAAAPhM/WdpWr7lpqjU/s1600/nombre_de_la_imagen.png" height="320" width="600" title="" /> 

La Altura se pone en  height (320 pixeles) y el ancho en  width (600 pixeles) dentro de las comillas respectivamente.
Los valores como ves no necesitan llevar ninguna unidad (que sería pixeles) como ocurre en CSS, cuando definimos el ancho y el alto de un elemento.

Por costumbre, recuerda siempre agregar tanto el texto alternativo de la imagen, así como el alto y el ancho ;)  ¿Qué te parece la herramienta? ¿List@ para probarla?



En la siguiente entrada, veremos cómo optimizar imágenes de las entradas (comprimirlas) desde el navegador usando PageSpeed, para mejorar el rendimiento de tu blog ;)


Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.