El Webmaster es un gorila muy grande y muy listo, que vive en lo alto de una montaña construida con vigas en forma de tres uves dobles. En la parte más alta de la montaña, allí donde nunca nadie se atrevió a llegar antes, el malvado Webmaster tiene cautiva a su Web, una princesa muy guapa y presumida que sueña con que un príncipe azul la visite y la indexe para siempre.

Todos los días cientos de intrépidos navegadores y buscadores llegados de todos los confines del mundo emprenden un viaje hacia lo alto de la montaña con el firme propósito de rescatar a la joven web de las garras del temible Webmater.

Pero ésta no será una empresa sencilla, porque tendrán que sortear los innumerables peligros que se interpondrán en su camino: imágenes sin texto alternativo, redirecciones javascript, páginas sin títulos, frames, tablas, flash y muchas otras barreras que harán que su visita se convierta en una aventura que no olvidarán.

Un buen día el Webmaster cansado de que su web no apareciera en los primeros puestos para los términos de búsqueda más relevantes en su sector se dijo a si mismo: Esto se ha acabado – y ni corto ni perezoso comenzó a aprender SEO.

Dicho y hecho, en pocas semanas optimizó su Web orgánicamente, consiguió un buen puñado de links desde Sites relevantes y observó con gran satisfacción como su web no sólo había mejorado su presencia en los buscadores, sino que además, su tráfico orgánico había subido como la espuma y lo que es aún mejor, sus ventas online se habían disparado.

Y colorín colorado, este cuento, con moraleja aplicable a tu negocio web, se ha acabado.

Artículos relacionados:

1. AJAX Accesible para Google: Posicionar contenido en Ajax
2. Optimizar Los META tags para los buscadores
3. Doodle para una Euskadi sin ETA

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.

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. Cómo enviar información, datos o parámetros con el método POST sin utilizar formulario
3. Javascript no intrusivo, un ejemplo mágico.