Haz que AJAX sea accesible e indexable para tu SEO

Actualización: Poco después de escribir este artículo, Google hizo oficial a través de su blog que ya ejecuta JavaScript y trabaja en la indexación de contenido. Esa noticia no elimina el sentido del presente artículo ya que, cómo se explica en aquel, en muchos casos Google puede encontrarse dificultades en dicha labor debido a que el código JavaScript sea demasiado arcano o complejo para ejecutarlo, entre otras causas. Con las recomendaciones presentes “nos curamos en salud”, asegurando la accesibilidad e indexación del mismo.

He realizado un curso de AJAX accesible e indexable organizado por Human Level Formación, del que os cuento mi experiencia al final del post. Antes, os resumo algunos de los puntos más importantes acerca de AJAX y su implementación adecuada para SEO.

Introducción a AJAX

AJAX y SEOAJAX es un conjunto de tecnologías para la web que permite mejorar la velocidad de carga de una página y hacerla más interactiva, al permitir modificar partes del contenido sin necesidad de recargar la página entera. Con AJAX no es el navegador el que realiza la petición al servidor, sino el código JavaScript, que mediante una función también recoge y procesa la respuesta. Se trata de peticiones asíncronas porque se producen en un momento indeterminado por un factor externo a la programación.

¿Como detectamos si una página web usa AJAX?

  • Podemos desactivar JavaScript y ver si el contenido sigue en la página o no.
  • A veces sucede que lo deshabilitamos y seguimos viendo las URL y sus contenidos cómo estaban. Y aún así usa AJAX. Cómo en este caso. Pero la página está construida para que se devuelva la página completa. Para salir de dudas, abrimos la consola y miramos cómo se están realizando las peticiones. Cuando pedimos una página AJAX en lugar de borrarse el listado de archivos se añaden sólo nuevos archivos al final de la lista.
  • Y junto a ello, también podemos ver las peticiones asíncronas en la consola, siendo el contenido AJAX normalmente devuelto en formato JSON.

Carga de contenidos asíncronos por AJAX

Inconvenientes de AJAX para SEO

Las páginas cargadas con AJAX a priori no son indexables por los buscadores porque no disponen de su URL propia. Y al no disponer de su URL propia también se pierde la navegación por el historial (no podemos volver al contenido anterior, tras haber pinchado en otro enlace) y no podemos compartir el contenido o guardarlo en favoritos.

Hacer AJAX indexable

Los enlaces de las páginas cuyo contenido vamos a presentar con AJAX se encuentran en el código, pero evitamos que el navegador realice la acción por defecto, que es lanzar la petición de la URL del atributo href. Para ello, utilizamos una función JavaScript asociada al enlace que se ejecuta cuando el usuario realiza el “click” sobre el mismo, realizado una petición asíncrona al servidor mediante otra URL distinta, a la que podemos llamar “URL AJAX”.

No habrá problema en indexar la página si la URL del enlace devuelve la misma página completa que devuelve la carga parcial por AJAX. Y hay que evitar que se indexen las URL “Ajax” utilizadas para hacer las peticiones asíncronas, bloqueando el acceso a los robots de búsqueda en el archivo Robots.txt.

Para la implementación: framework jQuery, framework jQuery mobile.

¿Cómo detectar si la página que usa AJAX es indexable?

  • Desactivar JavaScript y comprobar si el sitio sigue siendo navegable
  • Tratar de acceder a las páginas recargándolas o copiándolas y pegándolas en una pestaña nueva. La URL del atributo href debe devolver 200 ok
  • La URL no debe contener meta etiqueta noindex, nofollow, ni estar bloqueada por el archivo robots.txt.

Hacer AJAX accessible

Se trata de que el navegador pueda cambiar de URL desde JavaScript, para no perder la navegación por el historial y la posibilidad de compartir el contenido.

Para la implementación se usan los métodos pushState (se añade una nueva página en el historial para ser posteriormente recuperada), replaceState (se reemplaza la actual página) y el evento popState (Permite al usuario moverse en el historial. Recoge una función asociada al objeto que se le pasó con los métodos pushState o replaceState. Si el cambio de URL no se debiera a los métodos invocados (push, replace), el valor del state sería null), con la API del historial de HTML5. El inconveniente es que Internet Explorer no admite su uso hasta la versión 10.

AJAX accesible con fragmentos

Si el navegador no soporta la API del historial de HTML5, se puede efectuar el cambio de URL usando fragmentos (ej:/seo/#ajax)

Problemas: 1) los fragmentos no viajan en el protocolo HTTP y sólo funcionan en el cliente, por lo que no son indexables. Para hacerlas indexables, el navegador tendría que soportar la API del historial de HTML5 (propiedad location.hash JavaScript) 2) Si un usuario llega desde una URL con fragmento, aumenta el tiempo de carga (primero se tiene que cargar la página entera de la URL sin fragmento y después cargar el contenido AJAX) 3) La popularidad se la lleva la URL sin fragmento. 4) Google podria considerarlo cloaking.

No obstante, se puede realizar una implementación fácil con librerías para el uso de la API HTML5 y los fragmentos que funcione en todos los navegadores: history.js, jQuery mobile y Ajaxify. El inconveniente es que usando estas librerías, el servidor tiene que devolver siempre la página completa y sólo ahorraremos tiempo en el cliente (renderizado, etc)

¿Cómo detectar si la página que usa AJAX es accesible?

  • La URL no cambia al pinchar en el enlace.
  • La página tiene scroll infinito y al bajar y cambiar de contenido/página, no cambia la URL.
  • No se ve reflejado el cambio de URL en la barra del navegador.
  • La mala idea de Google: AJAX indexable y accesible con hashbang

    En 2011 Google sacó esta especificación, para hacer aplicaciones programadas con AJAX indexables y accesibles al mismo tiempo. La araña se encuentra con una URL con esta apariencia http://sofiadiaz.es/#!seo.html y envía la petición al servidor con una URL de este tipo http://sofiadiaz.es/?_escaped_fragment_=seo.html. El servidor tiene que devolver la página completa y controlamos la carga por AJAX del contenido para los navegadores (evento hashchange)

    Problemas: 1) aumenta el tiempo de desarrollo; 2) la URL que se indexa no es amigable; 3) se puede incurrir en contenido duplicado (2 URL); 4) el tiempo de carga aumenta cómo sucedía en la solución anterior; 5) hay que lidiar con la codificación de caracteres entre el fragmento original y desde el que se envía la petición; 6) Sólo sirve para Google y Bing.

    Acerca de la formación con Human Level

    El curso de formación de AJAX se divide en dos sesiones dónde se ha ahondado en esta tecnología en bastante profundidad y casos prácticos. El profesor explica de forma clara y siguiendo un temario bien estructurado. En dropbox dejan el vídeo de la sesión, junto con apuntes muy detallados para una lectura sosegada. Además, hay deberes para casa, que en este caso concreto estaban adaptados a distintos perfiles, con un cuestionario de preguntas para los SEOs y otro para los desarrolladores que se resuelven en la segunda sesión, pudiendo consultar las dudas que te han surgido al realizar la práctica. Mi experiencia ha sido muy satisfactoria y os dejo el enlace de su web para que consultéis el programa del curso y os animéis a apuntaros en próximas ediciones:
    http://www.humanlevel.com/curso/ajax-accesible-e-indexable.html

    7 años en Marketing digital. SEO. SEM. Analítica Web. Social Media. Estrategia. Google Analytics & Adwords Qualified. Licenciada en Publicidad y Relaciones públicas e Investigación y técnicas de mercado.

    @sofiadiaz | LinkedIn

    2 comentarios

    1. Ramón Saquete

      Hola Sofía,
      Has escrito un buen resumen, me alegra que te haya gustado mi curso y lo hayas aprovechado bien.
      Muchas gracias por las recomendaciones.

      Saludos

      • sofiadiaz

        Gracias a ti Ramón! El curso estaba muy bien planteado y me has resuelto las dudas que tenía. 😉

    Dejar un comentario

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

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.