Diseñar sitios con tecnología AJAX para que sean accesibles

Muchos propietarios de sitios web han descubierto las ventajas de utilizar AJAX para mejorar la experiencia de usuario que se ofrece en sus sitios, creando páginas dinámicas que actúan como potentes aplicaciones web. Pero, como ocurre con los elementos Flash, AJAX puede dificultar la indexación de una página si no se implementa correctamente. Los dos problemas más importantes relacionados con los buscadores en AJAX son los siguientes: hay que procurar que los robots de los buscadores puedan acceder al contenido y que puedan ver y seguir la navegación.

Si bien el robot de Google es eficaz para comprender la estructura de los enlaces HTML, puede tener dificultades para hacerlo en sitios que implementan JavaScript para la navegación. Nos estamos esforzando en mejorar nuestra capacidad de interpretar JavaScript, pero la manera más eficaz de crear un sitio que Google y otros buscadores puedan rastrear es incluir enlaces HTML en el contenido.

Toma decisiones de diseño que mejoren la accesibilidad

Recomendamos que los propietarios de sitios web creen páginas pensando en los usuarios y no solo en los buscadores. Al diseñar tu sitio con AJAX, ten en mente las necesidades de los usuarios, incluidas las de quienes no utilizan un navegador compatible con JavaScript, sino que emplean lectores de pantalla o dispositivos móviles. Una de las maneras más sencillas de comprobar el grado de accesibilidad de tu sitio es previsualizarlo en un navegador con JavaScript desactivado o verlo en un navegador de solo texto como Lynx. De esta forma, podrás identificar qué contenido puede ser difícil de detectar para el robot de Google, como el texto insertado en imágenes o Flash.

Procura no usar iframes o incluye un enlace alternativo a su contenido

Es posible que no se indexe el contenido que se muestra a través de iframes y que no esté disponible en los resultados de búsqueda de Google. Te recomendamos que evites el uso de iframes para mostrar tu contenido. Si los utilizas, incluye enlaces de texto adicionales que lleven al contenido que muestran para que el robot de Google lo pueda rastrear e indexar.

Implementa mejoras progresivamente en tu sitio

Si vas a empezar de cero, es buena idea crear la estructura y la navegación del sitio solo con HTML. Después, una vez tengas las páginas, los enlaces y el contenido del sitio, puedes ir inyectándole personalidad a su aspecto y a su interfaz con AJAX. De este modo, el robot de Google podrá analizar el código HTML, mientras que los usuarios con navegadores modernos podrán disfrutar de todas las posibilidades que ofrece AJAX.

Evidentemente, es probable que con algunos enlaces haga falta JavaScript para funcionar con AJAX. El desarrollador web Jeremy Keith denominó esta técnica Hijax y es una forma de permitir la coexistencia de AJAX y los enlaces estáticos.

Cuando crees los enlaces, hazlos estáticos y asígnales una función de JavaScript. De esta forma, los usuarios de JavaScript podrán aprovechar las funciones de AJAX y aquellos que no utilicen JavaScript podrán ignorar la secuencia de comandos y seguir el enlace. Por ejemplo:

<a href="ajax.htm?foo=32" onClick="navigate('ajax.html#foo=32');
 return false">foo 32</a>

Ten en cuenta que lo que usa el código AJAX de la URL de un enlace estático es un parámetro (?foo=32), no un fragmento (#foo=32). Es importante que lo recuerdes, ya que los buscadores interpretan los parámetros de las URL, pero suelen ignorar los fragmentos. Desde el momento en que ofreces enlaces estáticos, los usuarios y buscadores pueden enlazar con el contenido exacto que quieran compartir o utilizar como referencia.

Aunque estemos dedicando nuestros esfuerzos a mejorar nuestra capacidad de rastreo, utilizar enlaces HTML es una buena manera de ayudar a Google (así como a otros buscadores, dispositivos móviles y usuarios) a interpretar mejor la estructura de tu sitio.

Sigue las directrices

Además de los consejos que se describen en este artículo, te recomendamos que consultes nuestras directrices para webmasters para obtener más información sobre cómo adecuar tu sitio a Google y a tus usuarios. En las directrices también se desaconsejan ciertas prácticas como las redirecciones de JavaScript engañosas. Como regla general, puedes hacer que los usuarios disfruten de la navegación en tu sitio en función de las características de su navegador, pero el contenido debería seguir siendo el mismo. Por ejemplo, imagina que hemos creado una página para la Granja de hámsteres Tío Miguel. En la parte superior de la página se muestra la cabecera "Granja de hámsteres Tío Miguel" y en la parte inferior se presentan diapositivas con la tecnología de AJAX, en las que se muestran imágenes sobre los últimos hámsteres que han llegado a la granja. Desactivar JavaScript en una página no debería implicar que el usuario vea más texto:

Granja de hámsteres Tío Miguel: hámsteres, los mejores hámsteres, hámsteres económicos, hámsteres gratuitos, mascotas, granjas, hámsteres de granja, hámsteres bailarines, roedores, hámsters, hamsters, el mejor criadero de hámsteres, mascotas divertidas, trucos que enseñar a hámsteres, hámsteres bonitos, comida para roedores, casitas para hámsteres, hoteles de hámsteres, regalos para hámsteres ¡y mucho más!

Se podría mejorar la implementación del sitio mostrando el mismo texto independientemente de si está habilitado JavaScript o no y, en el mejor de los casos, ofrecer una versión en HTML de las diapositivas para usuarios que no lo tengan. Más información sobre el texto oculto