Malagaonrails

Mantener la accesibilidad e indexabilidad cuando usamos ajax

agosto 9, 2010 | Accesibilidad, Desarrollo web, Seo

A la hora de desarrollar funcionalidades en nuestro sitio web, cada vez mas a menudo recurrimos a las ventajas que nos aporta Ajax. La mejora en el rendimiento en los motores javascript de las últimas versiones de los navegadores más conocidos, nos permite obtener resultados cada vez más conseguidos, más dinámicos y de una manera relativamente fácil si hacemos uso de frameworks javascript como jQuery, Prototype, etc.
Pero no todo son ventajas. Uno de los principales problemas que a menudo olvidamos es que tanto los navegadores con javascript deshabilitado como los buscadores pueden no llegar a parte de los contenidos de nuestra web.

Voy a comentar los que considero las principales ventajas y desventajas de uno y otro sistema tomando como ejemplo el caso de una galería de fotografías, en la que tenemos una fotografía principal y un listado de thumbnails enlazando el resto de imágenes.
Para desarrollarla seguimos las dos opciones:

-Opción de enlaces HTML.
Cada enlace del thumbnail tiene como destino una dirección. De ésta manera, cada fotografía es mostrada bajo una url única, que podemos aprovechar para usar urls amigables que describan el contenido de la imagen de destino.
Los buscadores que rastrean nuestro sitio, pueden acceder e indexar cada una de las urls de las distintas imágenes por separado.
Por su parte, los usuarios que acceden con un navegador sin soporte javascript, también pueden recorrer nuestra galería, accediendo a cada una de las imágenes.
Sin embargo, unos y otros usuarios que visitan nuestra galería tienen que cargar todo el contenido de la página por cada fotografía que deciden ver, sufriendo una demora en la visualización y por lo tanto, una experiencia de usuario bastante mejorable.

-Opción de carga por AJAX.
En éste caso, la página de nuestra galería es mostrada la primera vez, con la imagen por defecto como principal.
Añadimos a los enlaces thumbnails un enlace vacío (href=”javascript:;” ó href=”javascript:void(0);”), y programamos por javascript que el evento click de cada enlace realice una petición asíncrona (ajax) y cambie el contenido de la imagen principal.
En éste caso, los buscadores que llegan hasta nuestra página principal no pueden seguir los enlaces sin destino y su indexación queda limitada a ésta página principal.
Igualmente, el usuario con un navegador sin soporte para javascript que llegue hasta nuestra galería, sólo podrá ver la imagen principal, y el listado de miniaturas, pero no podrá acceder a su destino para cada una de ellas.
En cambio, los usuarios con un navegador apto, experimentan una sensación de mayor velocidad en la carga de las distintas imágenes, ya que lo único que cambia en la página es la imagen principal, que pedimos de forma asíncrona al servidor y sin movernos de la página. Ahorramos por tanto, la carga de los elementos que permanecen comunes en nuestro sitio, como cabeceras, y demás archivos estáticos, como css, js, etc.

Ahora bien, podemos conseguir un equilibrio entre las dos implementaciones, como lo hacen, por ejemplo, facebook o tuenti, añadiendo un poco más de programación para obtener un nuevo propósito:
Que nuestra página destino sea accesible a través de una url única y que además, con soporte javascript sea capaz de cargar la imagen principal sin tener que recargar la página.
De esta manera, tendremos el listado de thumbnails enlazando a las distintas url´s únicas, amigables y accesibles por los buscadores y por todos los usuarios, aunque no tengan soporte javascript. Ahora, indicamos en el javascript que, en el evento click de cada enlace del thumbnail, rechace la carga del destino y en su lugar, tome el destino del enlace para realizar la petición por ajax, y cambie solo el source de la imagen principal.

Como optimización, también cambiaremos la url del navegador. Así, en caso de recargar la página, seguiremos viendo la última imagen que visualizamos. Sin embargo, la página no se ha recargado.

¿Conoces algun caso en el que poder aplicar ésta implementación?
¿Has tenido alguna vez éste mismo problema?

Escríbenos y lo comentamos!

Tags: Accesibilidad, ajax, desarrollo web, experiencia usuario, optimización web, Seo