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:

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:

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.

Artículos relacionados:

1. Ajax zoomy: Un Ajax lightbox para su galería de imágenes
2. Ajax Lightbox: Una ventana emergente 2.0 en su página web
3. Real Ajax Sexy Curls: Una forma elegante de mostrar el código fuente de nuestra página

Los formularios son sin duda la forma de interacción más directa con el usuario que puede existir en un Site. El estándar HTML ofrece una serie de componentes nativos que pueden ser ampliados utilizando css y/o javascript. A continuación le muestro una serie de recursos imprescindibles para mejorar la experiencia del usuario y crear formularios interactios, accesibles y muy atractivos. Si conoce algún otro recurso que no haya incluido y quiere compartirlo en hellogoogle.com no dude en comentármelo:

Botones mejorados

• Cómo Incluir un icono en los botones
• Cómo mejorar los botones con css
• Como cambiar el estilo a los botones tipo File con css y javascript
• Cómo hacer un hover "sexy" con css.

Radio Buttons y Checboxes

• Cómo cambiar el aspecto a los checkbox y radio buttons
• Elemento de formulario: Select Area + Checkbox

Mejorar el elemento Input

• Cómo cambiar el aspecto de los elementos input
• Campos input autocompletables con Ajax

Combo box mejorados

• Elemento de formulario: Input Text + Combo Box

Menús de pestañas

• Menú de pestañas con css

Maquetación de elementos de formulario con CSS

• Diseño del layout de un formulario con css
• Diseño de forumularios con sss
• Formularios semánticos horizontales
• Diseño de formularios
• Formularios funcionales y bonitos
• Cómo maquetar formularios con css y sin tablas.
• Aplicar estilo a los formularios con CSS
• Aplicar estilo a los campos de formulario

Formularios accesibles

• Formularios crossbrowser en xhtml + css
• Formularios accesibles con css
• Plantillas con CSS para formularioss accesibles
• Formularios accesibles y bonitos
• Cómo mostrar una ayuda sin recurrir a Popups
• Mostrar y ocultar campos no obligatorios de manera accesible

Herramientas para crear formularios

• Icebrrg - Herramienta para construir formularios, encuestas e invitaciones
• Wufoo - Otra herramienta para construir formularios, encuestas e invitaciones
• JotForm - Herramienta online WYSIWYG para crear formularios
• Ccessify - Herramienta para construir formularios basados en CSS

Frameworks

• Dijit- Framework javascript basado en Dojo realmente flexible y potente..
• Framework Jx - Librería JavaScript basada en MooTools para crear interfaces gráficos..

Artículos relacionados:

1. Un emulador de ZX Spectrum en Javascript
2. Javascript no intrusivo, un ejemplo mágico.
3. Cómo enviar información, datos o parámetros con el método POST sin utilizar formulario