Feb 232013
 

Actualmente muchos servicios web utilizan páginas dinámicas. Cuando el usuario interactúa con la página, se actualizan algunos de los componentes de la página con nuevo contenido, que se obtiene realizando una petición javascript ajax al servidor. Con esta técnica se evita tener que transmitir cada vez todo el contenido (código html, css, js, imágenes,…) que no varía en el resto de los componentes de la página: cabecera, menús,…

El problema que surge con esta técnica es que  el robot de Google no detecta la existencia de estas páginas dinámicas, y por lo tanto no las indexa, y no aparecen en los resultados de búsqueda. Para solucionar este problema ypermitir la indexación de las páginas dinámicas, Google ha establecido un procedimiento que explicamos en este artículo.

 Cómo funciona una página web dinámica convencional

En una página web dinámica, las urls de los enlaces comienzan por el símbolo “#”, y tienen asociado un evento “onclick” que ejecuta la acción deseada.

Por ejemplo, en una página de un comercio electrónico, se puede implementar la carga de la información detallada de un producto con un enlace de la forma:

<a href="#detalle" onclick="cargar_detalle(36)">Ver detalle</a>

El símbolo “#” es interpretado por los navegadores como una referencia a un “named anchor” en la misma página que está siendo visualizada, y por lo tanto no provoca la carga de una página.

La función javascript “cargar_detalle” obtiene el contenido dinámico mediante una solicitud ajax al servidor, y se lo asigna al elemento de la página correspondiente (por ejemplo, un elemento <div class=”detalleproducto”>):

function cargar_detalle(idproducto) {
  // Realizar una solicitud ajax mediante jQUery
  $.ajax({
    url: "/cargar_detalle.php?id=" + idproducto;
    dataType: "html",
    success: function(data) {
      $('.detalleproducto').html(data);
    }
 });
}

Nota: Más recientemente, existe la posibilidad de utilizar el evento “hashchange”, que ofrece ventajas frente al evento “onclick()”.

Utilizando jQuery, podemos asignar al enlace un manejador del evento hashchange si el navegador lo soporta, y asignar un manejador de evento onclick para navegadores viejos. Primero, definimos el enlace  asociandolo a la clase “hash-changer” (sin asignarle ningún manejador del evento onclick mediante un atributo html):

<a href="#detalle" class="hash-changer">Ver detalle del producto</a>

y después, añadimos en el código de inicialización de jQuery la asignación del evento:

<script type='text/javascript'>// <![CDATA[
  $(document).ready(function() {
    if (("onhashchange" in window) && !($.browser.msie)) { 
        //para navegadores modernos, utilizar el evento hashchange
        $(window).bind('hashchange', function() {
            var hash = window.location.hash.replace(/^#/,'');
            actualiza_pagina(hash);
         });
    } else {
        //IE y navegadores que no tienen soporte para el evento hashchange
        $('a.hash-changer').bind('click', function() {
            var hash = $(this).attr('href').replace(/^#/,'');
            actualiza_pagina(hash);
        });
    }
  });

function actualiza_pagina(hash) {
  // Realiza llamadas ajax, etc. para generar el contenido de la página
   ...
}
// ]]></script>

La solución de Google para indexar contenido dinámico

Para que el contenido dinámico se indexe, Google ha implementado una solución como sigue:

1. Los enlaces que provocan la carga de contenido dinámico deben ser identificados, haciendo que comienzen por “#!”.

Google identificará estas urls, y enviará solicitudes al servidor para indexar el contenido dinámico, añadiendo a la url de la página un argumento “_escaped_fragment_” cuyo valor es el  valor del enlce dinámico.

Por ejemplo, supongamos quea página dinámica es accedida mediante la url “http://www.dominio.com/producto.php”. En su interior, hay un enlace para cargar el detalle del producto de la forma “<a href=”#!detalle” …>”. Tras visitar e indexar esta página, el robot de Google solicitará al servidor web una url de la forma:

http://www.dominio.com/producto.php?_escaped_fragment_=detalle

2. El servidor web de “www.dominio.com” debe estar preparado para responder a las solicitudes que contengan el argumento “_escaped_fragment_”, entregando una “instantánea” del contenido de la página, como si se hubiera ejecutado la carga dinámica. Es decir, siguiendo con el ejemplo anterior, la página se entrega con el detalle del producto cargado en el interior del elemento <div class=”detalleproducto”>.

Cómo indexar páginas que usan”onload” para generar su contenido

Algunas páginas utilizan el evento “onload” para ejecutar código javascript con el que generan su contenido. Para que Google pueda indexar el contenido resultante, se debe añadir en el header un meta tag de la forma:

<meta name="fragment" content="!">

De este modo, google solicitará al sitio web una página con el argumento “_escaped_fragment_=”. Por ejemplo, si añadimos el meta tag a la página home de “www.dominio.com”, el robot de Google solicitará la página:

http://www.dominio.com/?_escaped_fragment_=

y el sitio web deberá estar preparado para responder a esta solicitud entregando la página home que resultaría de la ejecución del código javascript incluido en el evento “onload”.

 

Cómo generar las instantáneas de las páginas para Googlebot

Por lo que hemos comentado, el servidor web debe ser capaz de generar instantáneas de la página que resultaría tras la ejecución del código javascript.

Para ello, hay varias posibilidades:

  • Si gran parte del contenido es generado utilizando JavaScript, puede ser conveniente utilizar un navegador sin interfaz de usuario (“headless  browser”) manejado por programa, como por ejemplo HtmlUnit. Tambien se pueden utilizar otras herramientas como crawljax o watij.com.
  • Si gran parte del contenido es generado en el lado servidor utilizando PHP, ASP.NET o similar, se puede adaptar el código existente para que genere en el servidor el código que resultaría de la ejecución del código javascript en el cliente.

 

Referencias:

 Publicado por en 2:43 pm

 Deja un comentario

(requerido)

(requerido)