Desde que se generalizase su uso en navegadores mediante la especificación ECMAScript en 2012, la popularidad de JavaScript no ha cesado de crecer. Sirva de demostración una reciente encuesta, elaborada por JetBrains, en la que 32 mil desarrolladores (un 69%) reconocían su preferencia por este lenguaje de programación frente a otras opciones (Kotlin, TypeScript, Python). De su utilidad no se benefician sólo los diseñadores de webs y apps: también los especialistas en SEO recurren a códigos JS para optimizar sus esfuerzos de marketing.

Las aplicaciones de JavaScript en SEO abarcan desde la agilización de los tiempos de carga hasta la mejora del almacenamiento en caché o la carga diferida de contenidos y medios (lazy loading). Junto con HTML y CSS, la considerada ‘lengua franca’ de la programación es un aliado de la navegación en línea y, por tanto, está más que justificado el interés de los profesionales del marketing en el posicionamiento SEO para JavaScript.

JavaScript y SEO, un tándem benéfico para Google

El programador Brandan Eich desarrolló en 1995 un novedoso lenguaje de secuencia de comandos que daría origen a JavaScript. Un año después los estudiantes Larry Page y Sergey Brin empenderían una startup llamada BackRub y posteriormente rebautizada como Google: hoy estos hitos de la computación se retroalimentan, pues el gigante de las búsquedas de Internet se sirve de códigos JS para mejorar la experiencia de navegación.

En líneas generales, la utilidad de JavaScript en Google radica en su capacidad para modificar o cargar contenidos web de forma dinámica, entre otras funciones complejas. Determinados sitios web economizan parte de su información y archivos empleando códigos JS y confiando en que los motores de búsqueda hagan su parte del trabajo —responsabilidad que asume Google, pero no Bing ni Yahoo!, como se detallará en un apéndice de este artículo.

El objetivo principal de las variables y funciones usadas en JavaScript para posicionamiento SEO es, pues, optimizar el proceso de renderizado e indexación de los googlebots, es decir, de los bots responsables del crawling o rastreo de sitios web. Unos y otros —los ficheros JavaScript y los robots rastreadores de Google— mantienen una dependencia amistosa, siempre en pro de la experiencia del usuario. En este sentido, malas prácticas serían las incompatibilidades de estos códigos con buscadores y navegadores o la creación de estructuras URL demasiado confusas y, por tanto, desaconsejadas en la Directrices para Webmasters del buscador de Alphabet.

Así es como Google procesa el JavaScript de sitios web

De interés para desarrolladores y especialistas en SEO son los mecanismos que intervienen en el procesamiento de ficheros JavaScript en Google. Su ‘legión’ de googlebots alcanza este objetivo mediante tres acciones básicas: el rastreo, el procesamiento y la indexación. En este último paso se generan la mayor parte de los conflictos durante la carga de elementos dependientes de JavaScript, problema que evitarás revisando las incompatibilidades entre JS y Googlebot, abordadas más adelante.

El archivo ‘robot.txt’ abre el camino a los bots de rastreo, que verifican en primer lugar si la página web permite el rastreo. La presencia de metaetiquetas como ‘noindex’ o ‘nofollow’ invitarían al rastreador a darse media vuelta, razón por la que conviene darles un uso cuidadoso en posicionamiento SEO.

Como se explica en un documento de Central de la Búsqueda de Google, «el rastreo de una URL y el procesamiento de la respuesta HTML funcionan bien para los sitios web clásicos o las páginas procesadas por el servidor, en las que el HTML de la respuesta HTTP incluye todo el contenido».

Sin embargo, los sitios web dependientes de ficheros JavaScript alteran el modus operandi de Google. «Algunas webs con JavaScript pueden usar el modelo App Shell, donde el HTML inicial no incluye el contenido real, y el robot de Google necesita ejecutar JS para visualizar este contenido de la página generado por JavaScript», puntualizan en este documento.

Completado el rastreo, los googlebots pasan al procesamiento del sitio web, previamente puesto en cola. «La página puede permanecer en esta cola durante unos segundos», aseguran desde el buscador con sede en Mountain View. «Cuando los recursos del googlebot así lo permiten, un Chromium sin interfaz gráfica procesa la página y ejecuta el JavaScript. [Entonces], el googlebot vuelve a analizar el HTML procesado para los vínculos y pone en cola las URL que encuentra para rastrear».

A diferencia de lo sucedido en páginas HTML ‘puras’, las que contienen ficheros JavaScript afrontan un paso intermedio entre el rastreo y la indexación: la renderización, que permite a Google ‘ver’ con los ojos del internauta. En esta etapa se procesan las funciones y comandos de JavaScript SEO, previa a su incorporación a la versión final.

¿Cuáles son los beneficios del JavaScript en SEO y cómo mejorarlo?

HTML, CSS y JS conforman hoy un tridente básico en la creación de sitios web. Pero no siempre fue así. Hasta mediados de 1990, los conocimientos en programación del diseñador web medio eran escasos. Urgía disponer de un lenguaje accesible a estos profesionales y capaz de desarrollar funciones básicas, lo que motivó el surgimiento de JavaScript. Pero ¿en qué sentido mejora una página web?, ¿cuáles son sus beneficios?

Agiliza la indexación y los tiempos de carga

Acelerar la velocidad de carga en páginas web es un factor clave en el posicionamiento SEO. La presencia de códigos JS entre las etiquetas ‘<header>’ y ‘<body>’ del archivo HTML permite agilizar este proceso por medio del atributo ‘async’ para la carga asíncrona. Además, este atributo facilita la ‘vida’ a los googlebots, al incidir positivamente en la indexación.

Mejora la UX con almacenamiento en caché

Con el objetivo de reducir las solicitudes al servidor y el uso de recursos, los rastreadores de Google almacenan en caché una parte del contenido web y de las preferencias del usuario. Esta memoria digital se conserva en el equipo y el navegador del propio internauta (client-side), para su recuperación en futuros accesos al sitio web en cuestión. Pero las posibilidades del almacenamiento en caché trascienden la precarga de medios y archivos pesados. También ayuda a reconocer las preferencias del usuario o recuerda su actividad pasada (los artículos de su carrito de compras, p. ej.). Esto beneficia a un buen número de KPIs, como el tiempo de permanencia o las tasas de rebote, y da un mayor sentido a la optimización de ficheros JavaScript en SEO.

Aunque deba la mitad de su nombre al popular lenguaje Java, en realidad JavaScript está más próximo en su sintaxis a C.

Favorece la carga diferida de contenidos y medios

«Las imágenes pueden consumir mucho ancho de banda y rendimiento. Una buena estrategia es utilizar la carga diferida para cargar imágenes solo cuando el usuario esté a punto de verlas», explican desde la Central de la Búsqueda de Google. Gracias a la disponibilidad de atributos como ‘defer’ o el mencionado ‘async’, el uso de JavaScript para SEO garantiza una ejecución ordenada de los procesos de carga de scripts, en beneficio de la experiencia de navegación.

No obstante, implementar funciones de JavaScript SEO puede generar diversos problemas, como el bloqueo de recursos o la ralentización en los tiempos de carga de ciertos elementos. A continuación listamos una selección de consejos para prevenir y/o solucionar problemas relacionados con el fichero JavaScript.

Elimina incompatibilidades entre JS y Googlebot

Aunque Google procese las APIs y funciones de JavaScript, sus googlebots presentan limitaciones que pueden derivar en problemas de compatibilidad. Para evitarlos, los de Mountain View recomiendan el uso de la publicación diferencial y del módulo polyfills en caso de no encontrar la API de una función en el navegador. (Puedes ampliar esta información revisando este documento informativo disponible en el Centro de la Búsqueda de Google).

Clarifica la estructura URL

Limpieza, brevedad y sencillez son valores deseados en la creación de URLs. Los motores de búsquedas, y particularmente Google, detestan direcciones del tipo ‘http://www.ejemplo.es/index.php?id_sesion=180&sid=1y84idb385b38dfb384b274b28’ y privilegian en sus SERPs aquellas con una estructura simple, como ‘http://www.ejemplo.es/faqs/pagina-de-ejemplo’. Desde el buscador de Alphabet aconsejan el método ‘pushState’ de la History API, útil para actualizar la dirección cada vez que el internauta clica en elementos y contenidos del sitio web.

Las limitaciones de Bing y Yahoo! para procesar JavaScripts

Aunque el principal buscador de Internet es compatible con el lenguaje de programación que nos ocupa, las técnicas de SEO para JavaScript no son bienvenidas entre los principales rivales de Google. Claro ejemplo es Yahoo!, cuyos crawlers se muestran incapaces de procesar y renderizar códigos JS. Por tanto, ninguna parte del contenido web puede depender de códigos JS para funcionar en el buscador propiedad de Verizon Media.

Mientras que Google ofrece una alta compatibilidad con las funciones y comandos de JavaScript, Bing, Yahoo! y otros motores de búsqueda no pueden decir lo mismo.

Más amigable con los ficheros JavaScript es Bing. Desafortunadamente, las capacidades de los bingbots presentan serias limitaciones, y puede generar problemas ocasionales en sitios web que requieren de JavaScript para mostrar parte de su contenido. A diferencia de Yahoo! y del buscador estrella de Microsoft, Yandex, Baidu o DuckDuckGo muestran una alta compatibilidad con códigos JS. Sin embargo, la reducida cuota de mercado de estos y otros buscadores (menos del 5% en total, según Statista) explica que la comunidad diseñadora prefiera concentrar sus esfuerzos en satisfacer a Google.