Recientemente me preguntaron si Google indexaba contenidos en Ajax. La respuesta es: depende.
Como ya sabrá Ajax es una técnica que abre la posibilidad de realizar una petición XMLHTTP al servidor y recibir un documento html/xml de respuesta de manera asíncrona, es decir, sin necesidad de recargar la página. Ajax en principio no tiene ninguna contraindicación de cara al posicionamiento en Google, en realidad el problema no se encuentra en el Ajax, si no en la accesibilidad de los documentos que queramos que sean indexados.
En el siguiente ejemplo los contenidos se cargan de manera asíncrona, pero Google no sería capaz de indexarlos. ¿Por qué? El problema radica en los enlaces, o mejor dicho, en la ausencia de enlaces. Fíjese en el código del menú principal:
<li id="home">Home</li>
<li id="news">News</li>
<li id="interviews">Interviews</li>
<li id="external">External</li>
La utilización de Ajax no debe entrar en conflicto con la correcta navegación por los diferentes contenidos relevantes de un Site. En el ejemplo anterior, el acceso a los contenidos se implementa en javascript y esto impide que el bot de Google pueda acceder e indexar estos contenidos. El siguiente código muestra la funcionalidad que controla el acceso a los contenidos:
sections.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case "home":
content.slideUp();
content.load("sections.html #section_home", hideLoading);
content.slideDown();
break;
...
Nota: El código del ejemplo está implementado con el framework Jquery. ¿No lo conoce?…¿Y a qué está esperando?
Si aplica un simulador de Bot a la url del ejemplo podría hacerse una idea aproximada de cómo visualiza Google esta página. Como puede comprobar los contenidos dinámicos no son accesibles.
¿Cómo podemos conseguir que Ajax sea accesible por Google ?
Podemos considerar que Google visualiza una página de manera similar a como lo haría un navegador con javascript deshabilitado. Por tanto si queremos dar visibilidad al buscador, cada contenido debe ser accesible a través de un link html natural. Le he preparado un pequeño ejemplo funcional de Ajax accesible. Fíjese el aspecto que presenta ahora el código del menú principal:
<li><a href="mike-tyson/default.htm">MIKE</a></li>
<li><a href="house/default.htm">HOUSE</a></li>
<li><a href="bob-marley/default.htm">BOB</a></li>
<li><a href="spiderman/default.htm">SPIDER</a></li>
A continuación podemos modificar el comportamiento de un link utilizando javascript no obstructivo. Esta técnica permite acceder al DOM de la página y asignar una funcionalidad determinada, como puede ser el acceso asíncrono a contenidos, a cualquier enlace del documento. De esta manera presentaríamos un documento html con enlaces naturales a Google, y una página RIA a nuestros visitantes:
sections.click(function(e){
var my_anchor = $(this).attr("href");
showLoading();
content.slideUp("slow", function(){ content.load(my_anchor, hideLoading); } );
content.slideDown();
return(false);
});
Si aplicamos el simulador de Bot a este ejemplo, podemos comprobar que ahora Google accedería sin problema a todos los contenidos.
Le animo a descargarse el código de ejemplo, destriparlo, analizarlo, mejorarlo y aplicarlo libremente en sus desarrollos. Estoy seguro que Google se lo agradecerá.
Por último tenga presente siempre las siguientes consideraciones a la hora de desarrollar una funcionalidad Ajax:
- Cuide la arquitectura interna de su Site y cree una estructura de enlaces lógica.
- Cada contenido de su site debe ser accesible por un enlace de texto estático.
- Si el acceso a los contenidos se realiza a través de JavaScript, frames, DHTML, Flash, o su acceso está restringido por id de sesión o Cookies, es muy posible que Google encuentre problemas para encontrarlos e indexarlos.
- El javascript no obstructivo le permite crear funcionalidades RIA sin repercutir en la accesibilidad de la web.
- Puede recurrir a navegadores textuales para comprobar como visualizará Google su página.
Muy buen artículo.
Se me presentan dos preguntas:
¿Qué es el simulador de bot?
y ¿si desactivamos javascript y funciona la página, entonces es accesible?
Gracias
Hola Fel.
Un simulador de Bot es una aplicación que emula el comportamiento de la araña de un motor y te permite hacerte una idea de cómo visualiza Google una página.
La accesibilidad es algo más compleja que deshabilitar el javascript, lo que si puedes y debes chequear de cara a la indexación de tu web es que todos tus menús y enlaces funcionen correctamente sin javascript.
Un saludo.
Gracias por responder tan rápido.
Por cierto, está muy bien tu página, no la conocía.
Hola quisiera saber en que me beneficia Ajax con Google ya que recien estoy aprendiendo, me ayudarian con un tutorial para empaparme de esta informacion
No te va beneficiar, ni te debe perjudicar.
Ignacio, una de las cosas que más me asombran de tu web son las imagenes que te curras para cada post.
Sigue así, sorprendiendonos agradablemente.
Bueno, te reconozco que en ocasiones la imagen me lleva más tiempo que el propio post. Muchas gracias por tus comentarios.
Buen articulo, con mucha logica!
Tengo mi pagina en ajax, cree los enlaces naturales y luego javascript para cargarlos de forma asincrona, existe una pagina principal y alli se cargan las demas con ajax, pero google indexa cada pagina de manera que al acceder las paginas se muestran fuera de la pagina principal, como hago para que siempre se carguien dentro de la pagina proncipal
Hola Orlando, la única forma que tienes de hacerlo es conseguir que los enlaces naturales apunten a una página que cargue el contenido dinámico dentro del entorno apropiado y mantener por otro lado el código javascript actual que carga asíncronamente el contenido. Esto es bastante sencillo de conseguir utilizando server side includes.
Pero como lo hago…?, suponiendo que mi pagina principal es home.htm y la otra es pag1.htm, en la busqueda de google me aparece el link a pag1.htm y se carga fuera de la pagina principal, alguien tiene un ejemplo de como es posible ?
Hola, por Ajax cargarías pag1.htm pero el enlace natural apuntaría a pag1_c.php que contendría a su vez a pag1.htm pero dentro del contexto correcto.
Google ha sacado una propuesta de estándar para hacer un sitio AJAX indexable por los buscadores:
http://www.bitacoradewebmaster.com/2009/10/08/propuesta-de-estandar-de-google-para-hacer-un-sitio-ajax-indexable/
sigo pensando que la mejor forma de hacer seo es usando html.
Yo sigo viendo un problema en aplicar la solucion que tu dices; si una persona entra en google y encuentra, por ejemplo, «url.com/mike-tyson/default.htm» y el navegante accede a esa página mediante el resultado se encontrará con el contenido sin formato, pero no con la página que rodea al contenido, y entonces la persona que haya encontrado tu página no encontrara manera de seguir navegando por ella. Lo interesante sería que el inicio se encontrara en todas las página, pero eso sería como no utilizar ajax y cargar veinte veces la página de inicio, y estaríamos en las mismas (forma de html que se ha usado toda la vida)…
Gracias por lo ejemplos, pero solo un pequeño problema, con chrome no funciona.
gracias
Felices 13 aniversario Google!! les deseo lo mejor porque hoy 27/09/2011 están cumpliendo 13 añotes de la mejor información y ayuda!! muchas gracias1!
Haber, en otras palabras, estamos ocultando el contenido de las URL, solo para los robots de los buscandores, esto no es penalizado por google?? gracias por el texto, un abrazo…