Cómo hacer que los buscadores indexen código JavaScript

3 Apr
2014

phantom

No es un problema desconocido el que los buscadores no son capaces de interpretar código JavaScript. O por lo menos no todo. Y esta no indexación por parte de los motores de búsqueda como Google hace mucho más difícil el posicionamiento web. Nuestra página no estará optimizada para el posicionamiento en los buscadores y esto es un problema si queremos que tenga visibilidad y presencia en Internet.

¿Qué pasa entonces si nuestro sitio web está construido mediante frameworks MVC tan utilizados como BackboneJS, AngularJS o EmberJS? Parte o la totalidad de los datos son cargados dinámicamente desde el servidor, generándose en el cliente el HTML correspondiente mediante plantillas. El problema es que nuestros datos están ocultos en estas plantillas y ni Google ni otros buscadores serán capaces de indexarlos.

La solución pasa por utilizar PhantomJS.

Descubriendo PhantomJS

PhantomJS no es más que un navegador sin interfaz gráfica que podemos utilizar desde el lado del servidor para trabajar con nuestras páginas web. ¿Su principal uso? La realización de tests. Con PhantomJS es posible realizar pruebas unitarias y simular acciones de usuario como un click en un elemento del DOM mediante jQuery, permitiendo además realizar capturas de pantalla de la página web para poder comprobar su estado en un momento determinado.

Sólo tenemos que llamar a un fichero JavaScript en el que evaluaremos la página web deseada. En el ejemplo, una vez abierta la url de la web, hacemos click en un elemento de la página para posteriormente guardar en forma de imagen el estado en el que queda ésta una vez hecho el click.

phantomjs phantomtest.js

phantomtest.js

Nosotros utilizaremos PhantomJS para solucionar el problema de la no interpretación de JavaScript por parte de Google y el resto de motores de búsqueda.

 

Configurando nuestro servidor Apache

En primer lugar, mediante el archivo de configuración de Apache .htaccess, definiremos una regla de reescritura para redirigir toda url que no se corresponda con un fichero o directorio en nuestro servidor a un archivo PHP phantom.php donde llamaremos a PhantomJS.

_.htaccess

 

Analizando la url solicitada

A través de una expresión regular comprobamos si la url solicitada es una url válida (puede existir o no pero sólo puede estar formada por números y/o letras) o una url inválida (con caracteres inválidos), en cuyo caso lanzaremos el código de error 404 mostrando una página de error personalizada.

Estableciendo un número de intentos nos aseguramos que la llamada posterior a PhantomJS es exitosa, devolviendo en caso contrario una nueva página de error. Esta llamada será ejecutada en el intérprete de comandos con un timeout mediante la función “shell_exec” de PHP recibiendo un fichero JavaScript “page.js” y la url pedida para así generar la página.

También comprobamos adicionalmente si el contenido devuelto por PhantomJS contiene el string “ERROR 404″. Este string podrá ser añadido al contenido de la página en nuestro código MVC en todos aquellos casos donde queramos hacer constar de la existencia de un error.

phantom.php

Esto hace plantearnos el introducir el concepto de cache en nuestro análisis. Evitamos así llamadas a PhantomJS innecesarias y conseguimos aumentar de forma notable el tiempo total de respuesta ante una página solicitada. Para ello, basta con hacer uso de las funciones PHP “file_get_contents” y “file_put_contents”.

Calculamos también (por motivos de seguridad) el hash md5 de la url, guardando con este hash como nombre un fichero por cada url pedida en el cliente y conformando de este modo una cache de datos remota en nuestro servidor web.

phantomcache.php

 

Generando la página

Finalmente, utilizando PhantomJS, una vez abierta la url de la página web, simplemente imprimimos y devolvemos el contenido de dicha página pero generándose desde el servidor todo el código HTML que la forma, que de este modo podrá ser indexado por los buscadores. También calculamos el tiempo que lleva esta generación de la página por parte de PhantomJS.

page.js

El código está disponible también en un repositorio público en GitHub.

Would like to share? These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Reddit
  • Facebook
  • Google Bookmarks
  • Ma.gnolia
  • TwitThis
  • LinkedIn

Comment Form

top