Google y AJAX

La propuesta de Google para indexar Ajax

Es una realidad que la mayoría de páginas webs, utilizan Javascript de una u otra forma para mejorar la experiencia del usuario: el último recuento de Google arrojaba casi un 70% de sitios que ejecutaban scripts. De entre estos, cada vez es más frecuente encontrar aplicaciones completamente basadas en AJAX que los buscadores no son capaces de indexar.

¿Porqué ahora no se indexan los contenidos?

La tecnología AJAX funciona mediante peticiones al servidor en tiempos de ejecución. Esto significa que por ejemplo, cuando el usuario escribe un término en la caja del formulario de una página, ésta envía una llamada al servidor el cual devuelve un determinado contenido. Cuando los rastreadores entran en la página, al no interactuar con ella, no obtienen dicha respuesta y, por tanto, no almacenan contenido. Tenemos que pensar en las arañas de los buscadores como meros visitantes pasivos: solo siguen los enlaces, no rellenan formularios o activan elementos en la página: en definitiva, no ejecutan Javascript.

Por lo tanto, si el contenido de una página depende del comportamiento del usuario, las arañas nunca podrán registrar todo el contenido.

Para encontrar una solución a este problema, Google ha propuesto un nuevo estándar que facilite la indexación de estos sitios para los rastreadores y que sólo precisa de una serie de cambios en la estructura de nuestras URLs para funcionar.

Objetivos y ventajas

Según Google, los objetivos y ventajas que se pueden conseguir adoptando el estándar propuesto, son los siguientes:

  • Minimizar los cambios necesarios para implementar el estándar en aquellos sitios que estén actualmente en funcionamiento.
  • Tanto los usuarios como los motores de búsqueda verán el mismo contenido.
  • Los motores de búsqueda podrán enviar a los usuarios directamente al contenido AJAX, no a una copia estática almacenada.
  • Los propietarios de los sitios web tendrán una vía para verificar que sus contenidos AJAX son renderizados correctamente y que los rastreadores han accedido a todo el contenido.

Cómo se implementa

Básicamente, se trata de modificar la sintaxis de nuestras llamadas para que los rastreadores puedan indexar el contenido y sean capaces de redigir a los usuarios allí donde éste se genera. Las directrices son, en principio, muy sencillas de adoptar. Veamos primero la especificación técnica y después un ejemplo para un caso común:

  • Modificar ligeramente los fragmentos de URL que dirigen a contenido AJAX. Para que los motores de búsqueda puedan identificar un contenido dinámico, proponen añadir una marca (TOKEN) delante del fragmento AJAX en las direcciones: “!” (el signo de exclamación). Así, tendríamos que una URL como
    http://mysite.com/page?query#state

    se reescribiría

    http://mysite.com/page?query#!state
  • Permitir que los rastreadores puedan acceder a estas direcciones URL ‘escapando‘ el estado de la petición. Como los fragmentos de URL no se envían como peticiones al servidor, es necesario modificar la dirección URL utilizada para permitir el acceso a la página. Esto permite a su vez, indicar al servidor que debe devolver una página completa, con sus cabeceras HTML, en lugar del código Javascript resultante de la llamada AJAX. Para esto, la solución es ‘escapar‘ el estado de la petición con otra marca semejante a la anterior (TOKEN). En esta ocasión, se ha propuesto el uso de la marca ‘_escaped_fragment_‘ como símbolo seguro. Siguiendo con el ejemplo anterior, tendríamos:
    http://mysite.com/page?query&_escaped_fragment_=state

    Para esto, se sugiere instalar un headless browser en nuestro servidor que no es otra cosa más que un navegador sin interfaz gráfica capaz de interpretar Javascript y devolver el contenido en una estructura HTML válida. Para esta labor, han sugerido htmlUnit, un proyecto OpenSource perfectamente válido.

  • Mostrar a los usuarios la URL original en los resultados de la búsqueda. Para mejorar la experiencia del usuario, tiene sentido el enviarlos directamente a la página con el contenido AJAX ya disponible. Esto se consigue mostrándole la dirección original en el listado de resultados. En el ejemplo anterior, la dirección que se le mostraría, sería
    http://mysite.com/page?query#!state

    Los motores de búsqueda pueden comprobar que el texto devuelto mientras se indexa la página es el mismo que (o un fragmento) de el texto que se le devuelve a los usuarios.

Ejemplo en un caso común

Pensemos por ejemplo que tenemos una página con una serie de pestañas que cargan el contenido dinámicamente conforme pinchamos encima.
Como es buena práctica en el desarrollo de aplicaciones AJAX, usamos el caracter ‘#‘ para indicar el estado de la página y poder controlar, entre otras cosas, el comportamiento de los botones ‘Atrás‘ y ‘Adelante‘ del navegador sin recargar todo el contenido. Librerías como Mootools o jQuery tienen varios plugins y extensiones que se encargan de realizar este trabajo de una forma transparente.

Utilizando estas funcionalidades, la petición AJAX al pulsar sobre la pestaña de la “página 2“, tendría un aspecto similar a:

http://www.mysite.com/page2.html

Que se resolvería en el navegador con una URL similar a:

http://www.mysite.com/#page2

Sin embargo, este contenido corre el riesgo de no ser indexado por las dificultades del rastreador para ejecutar contenido Javascript. Para facilitarle las cosas, según el estándar propuesto, la URL debería reescribirse de la siguiente forma:

http://www.mysite.com/#!page2

Mediante esta estructura, cuando sea visitada por los motores de búsqueda, al encontrarse el TOKEN “!”, se transformará internamente en:

http://www.mysite.com?_escaped_fragment_=page2.html

Configuramos nuestro servidor para escuchar URLs con esa estructura y éstas se enviarán mediante el headless browser al navegador en formato HTML.

Conclusión

Es un proceso que puede parecer complejo pero que en realidad se resume en un par de cambios en las estructuras de nuestras URLs. De momento es sólo una propuesta de estándar pero que ya tiene tanto seguidores como detractores.
Uno de los servicios web que ya lo incorpora es Twitter: basta con mirar las URLs generadas para descubrir que en su estructura, ya han añadido la marca “!” propuesta:

http://twitter.com/#!/etnassoft

Más información

Google, A proposal for making AJAX crawlable
Railscasts, AJAX History and Bookmarks
jQuery History Plugin
Mootools HistoryManager

Acerca de Carlos Benítez

Programador Web y arquitecto Javascript. Fundador de www.etnassoft.com y OpenLibra, la Biblioteca Libre Online
Esta entrada fue publicada en AJAX, Javascript y etiquetada , , , , . Guarda el enlace permanente. Sígueme en Twitter

Últimos libros gratuitos añadidos a OpenLibra

{4} Comentarios.

  1. 21Ene2011/
    4:48 h /

    La verdad es que ya era hora.

  2. 15Feb2014/
    22:16 h /
    Luis

    Que bien, estoy aprendiendo sobre AJAX y ademas por fin entiendo el significado de el simbolo #! en las URL’s de MEGA xD!

    muchas gracias por compartir tu conocimiento lml !

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Licencia Creative Commons 3.0

®Copyright 2016. Cotenido web bajo licencia Creative Commons 3.0

Códigos bajo licencias MIT y GPL. Ver página de licencias para más información