SEO para JavaScript: Errores y Recomendaciones

El SEO para JavaScript puede suponer una diferencia en el éxito de tu negocio. Conocer como tratar páginas con JavaScript desde un punto de vista SEO puede evitar muchos errores graves que afecten a tus objetivos de negocio.

Sabiendo tratar el contenido JavaScript, hará que incluir este tipo de lenguaje ayude al SEO de tu página aportando funciones y un contenido mucho más interactivo y dinámico.

¿Qué es el SEO JavaScript?

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que te permite introducir funciones interactivas en una web, es decir, la función de JavaScript es ayudarte a mostrar un contenido más atractivo y dinámico en una página web.

El contenido JavaScript (JS) generalmente se complementa con el código HTML y CSS para ofrecer la parte interactiva del contenido, aunque se pueden crear webs completas con JavaScript.

Algunos ejemplos comunes en los que se aplica JavaScript dentro del contenido de una web puede ser para incluir un carrusel de imágenes, un mapa interactivo, efectos animados, etc.

JavasScript y SEO

El contenido JavaScript puede ser un enemigo para el posicionamiento web, perjudicando que Google indexe esa página, ese contenido o no pueda interpretar lo que se está mostrando dentro del contenido de esa URL, aunque esto no tiene por qué ser así, por este motivo, es importante entender cómo funciona JS y SEO y poder evitar que sean incompatibles.

Aplicar el SEO en JavaScript consiste en tener un buen conocimiento de cómo Google interpreta una página con JavaScript, con este conocimiento, podrás llevar a cabo tareas de SEO técnico que ayuden a que el JavaScript del sitio afecte lo menos posible en el posicionamiento web.

El objetivo SEO es que Google pueda interpretar el JS de la forma más sencilla posible para conseguir que lo indexe sin problemas, al igual que tener el conocimiento para saber cuándo no te conviene utilizarlo.

¿Cómo rastrea e indexa Google páginas con JavaScript?

El rastreo de una página con JavaScript es algo más complejo que una página web HTML, ya que, para los bots de Google, descargar y renderizar este código le consumirá más recursos y, por lo tanto, prioriza las páginas HTML.

Para Googlebot, rastrear una página HTML es un proceso sencillo. El robot de Google descarga el HTML, extrae los enlaces de la página y los añade a su índice de rastreo.

Sin embargo, cuándo existe JavaScript el proceso de rastreo e indexación es algo más complejo.

Éste proceso de renderizado de JS se divide en 3 fases:

• Rastreo

Durante el rastreo de un sitio web, cuándo Google detecta páginas con JavaScript, estas las incluye en un proceso de cola de rastreo, lo que causa que las páginas JavaScript puedan tardar más en ser indexadas.

• Renderizado

El proceso de renderizado empieza cuándo el bot de Google tiene recursos para procesarlas, cuando llega ese momento, pasa a renderizar este contenido JS, vuelve a analizar el código HTML y extrae los enlaces.

• Indexación

Y como último paso, ocurre el proceso de indexación, en este paso, al igual que ocurre con cualquier otro tipo de página, si la calidad del contenido ha superado las directrices de Google y considera que merece ser indexado, pasa a incluirlo en su índice.

Probar y detectar problemas con JavaScript

Aunque el proceso de indexación de JavaScript pueda ser más lento y esto pueda considerarse un problema en algunos casos, realmente este no es el único problema.

Los problemas más frecuentes en SEO a causa de JavaScript suceden cuándo no llega a ser indexado o cuándo Google no puede interpretarlo adecuadamente, para ello vamos a ver como comprobar si el JS está causando estos errores en tu sitio.

Comprobar si Google está indexando tus páginas JavaScript:

Para saber si Google ha indexado tus páginas, lo más sencillo es hacer uso del comando “site” y la herramienta de Google Search Console.

Comando “site”

Para comprobar si tu página está indexada con el comando “site”, simplemente selecciona tu página JavaScript e incluye en el buscador de Google “site: + la dirección url”.

Si tu página aparece en los resultados de búsqueda significa que sí se ha indexado.

También puedes comprobar si Google indexada el contenido JS que hay en la página con “site: + elemento que se encuentra dentro del JavaScript”.

Por ejemplo, buscar un fragmento del contenido o hacer una consulta con comando site + texto alt de una imagen que se encuentre dentro de un contendido JS.

Google Search Console

Dentro de la herramienta Google Search Console, puedes hacer uso de la función de inspección de URLs, añadiendo la dirección de tu página JS y Google te indicará si se encuentra indexada en ese momento.

Comprobar si Google puede renderizar bien el JS de tu sitio:

Comprobar si Google está siendo capaz de renderizar adecuadamente el JS de tus páginas es otra comprobación que como SEOs debemos tener en cuenta.

Puede que las páginas JS no se estén indexando, pero realmente la culpa no sea del JS y en este caso, debas comprobar otros errores SEO comunes que pueden estar perjudicando que tu sitio no se indexe adecuadamente.

Por otro lado, puede que tus páginas sí se estén indexando, pero el contenido JavaScript no se le está presentando a Google de una forma que pueda renderizarlo adecuadamente.

Esto puede perjudicar el SEO de tus URLs, ya que, el JavaScript puede agregar y modificar el contenido y contexto del archivo HTML inicial, lo que quiere decir que es posible que falte contenido relevante en esa página.

Para evitar esto, vamos a ver como comprobar sí Google renderiza bien el JS con nuevamente la ayuda de GSC y Screaming Frog.

Prueba en tiempo real de GSC

Desde la herramienta Google Search Console, una vez inspeccionada la página, presiona el botón “Probar URL publicada”, espera 1 o 2 minutos y presiona el botón “Ver página probada”. Aquí podrás ver cómo Google puede ver tu contenido.

En esta prueba en tiempo real podrás ver una captura de cómo Google ve tu contenido, en “Más información” te dará información sobre errores, advertencias o recursos que no se han podido cargar.

También, en el apartado de “HTML”, puedes buscar alguna parte del texto que se encuentre dentro del JS para ver si Google lo ha renderizado.

Renderizado de la página de Screaming Frog

La herramienta SEO Screaming Frog, ofrece la opción de renderizar el JS y mostrarte la página tal como la está viendo Google.

Para ello, accede a la configuración de Spider y cambia el tipo de renderizado.

Y una vez haya terminado el proceso de rastreo, selecciona la URL que contiene JS y en la parte inferior, en la pestaña “Página renderizada”, la herramienta te mostrará una representación de lo que el crawler puede visualizar.

Cómo hacer que el contenido JavaScript de tu web sea SEO-friendly

Desde la parte de SEO técnico, existen algunas prácticas recomendadas y errores a evitar/solucionar que ayudarán a disminuir o eliminar la desventaja para el SEO que puede causar el uso de JavaScript en un sitio web.

Problemas frecuentes con JavaScript

Bloqueos en Robots.txt

Un de los errores más comunes que puede evitar que Google no pueda ver tu contenido JS es que exista alguna regla en robots que esté prohibiendo a los crawlers de Google acceder y rastrear el archivo JS.

¿Cómo comprobar que este error no te afecta?

Accede al probador robots.txt de Google y comprueba si se puede acceder a alguno de los archivos JS que se encuentran en la página, incluyendo su dirección y llevando a cabo la prueba.

Sí existe un error, el probador te indicará qué regla del robots.txt te lo está prohibiendo.

Paginación infinita

Uno de los usos de JavaScript en los que se encuentran problemas, es el uso de desplazamiento infinito en una página.

Cuándo se quieren mostrar varías página o gran cantidad de contenido, se puede optar por utilizar un estilo de paginación normal, botones de cargar más o la paginación infinita.

El problema en el uso del scroll infinito puede ser que los rastreadores no lleguen a descubrir ese contenido. Google no puede comportarse como un usuario, y si se incluye un tipo de paginación infinita, puede que los bots no lleguen a conocer que existe más contenido y este no sea descubierto, ya que Google se guía a través de los enlaces <a href> para descubrir el contenido.

Una solución para aplicar el scroll infinito sin que se genere este tipo de problema es utilizar un desplazamiento infinito con paginación. Aquí puedes ver un ejemplo demo de cómo sería una página con este tipo de desplazamiento infinito.

Utiliza páginas con direcciones URL estáticas.

Las direcciones URLs estáticas son el tipo de dirección que todos conocemos, como puede ser https://www.miweb.com/categorias. 

Al utilizar JS, algunos framewoks de JavaScript como Angular y Vue generan URL con hash (#), por ejemplo https://www.miweb.com/#/categorias.

Las URLs con hash (#) son ignoradas por los crawlers para ser indexadas, por lo tanto, utiliza solo direcciones estáticas en tus páginas siempre que deseas que sean indexadas.

JavaScript y enlazado interno

Google solo sigue los enlaces que se incluyen con una etiqueta <a> seguida del atributo href, por lo tanto, evitar incluir enlaces JS que no tengan estas dos etiquetas, como pueden ser los enlaces JS con un clic o de tipo botón.

Por ejemplo:

<a href=”/page”onclick=”changePage(‘important-link’)”>Anchor Text</a>

Una vez hechas estas comprobaciones, si detectas que Google no está renderizando bien el JavaScript de tu sitio, puedes deshabilitar el JS de tu web con la ayuda de alguna extensión, herramienta o desde el apartado de inspeccionar del navegador y ver cómo se visualiza tu web sin JavaScript.

Si tu web pierde mucho del contenido que es relevante para el SEO y Google no lo está pudiendo renderizar, en este caso, sería una prioridad a resolver. 

Renderizado del JavaScript

Existen varios tipos de renderizado de JS y depende el tipo que se esté presentando tanto a Google como a los usuarios tendrá un efecto u otro en el SEO para tu sitio web.

Estos tres tipos de renderizado son: Renderizado del lado del servidor, renderizado del lado del cliente, renderizado dinámico.

• Renderizado del lado del servidor  

El proceso de renderizado sucede en el servidor y al cliente (es decir, a Googlebot) se le ofrece una página HTML. Esto quiere decir que se le evita al crawler el proceso “costoso” de renderizar el contenido JS, dejando esa faena en manos del servidor y a los bots se les muestra la página en código HTML.

• Renderizado en el lado del cliente 

El renderizado en el lado del cliente es lo contrario al renderizado en el lado del servidor, en este caso, Google deberá renderizar el contenido en JS para poder comprenderlo e indexarlo.

• Renderizado dinámico

El renderizado dinámico consiste en enviar una versión de la URL estática a Googlebot, pero dinámica para los usuarios. Es decir, sería algo similar a entregar un tipo de renderizado en el lado del cliente para los usuarios y un tipo de renderizado en el lado del servidor para Google.

Para sitios web que cambian su contenido con frecuencia, el renderizado dinámico puede ser la opción más aconsejada.

En el caso de renderizar en el lado del cliente, será un proceso más lento conseguir que sus páginas se vean indexadas y en el caso del renderizado del lado del servidor puede ser un problema por el aumento de carga del servidor y el tiempo en la primera respuesta del servidor (métrica TTFB) será más lento.

En definitiva, un sitio con JavaScript puede ser tanto enemigo como amigo del SEO. De no auditar las páginas y resolver errores o aplicar buenas prácticas, puede ser un enemigo para la indexación del contenido de tu web.

Sin embargo, las páginas JS con buenas prácticas de SEO, serán páginas mucho más atractivas para el usuario y con amplias funciones que con el uso únicamente de HTML y CSS sería imposible aplicar.

En AgenciaSEO, a raíz de nuestra experiencia y conocimiento SEO tratando con páginas web con JavaScript, sabemos como tratar este tipo de contenido para que sigan consiguiendo sus objetivos de posicionamiento, si tu sitio web cuenta con JavaScript, puedes contactar con nuestro equipo para asegurarte de que no afecte al posicionamiento de tu negocio.