SEO en JavaScript: asegúrese de que su sitio sea indexable

¿Qué es el SEO con JavaScript?

JavaScript SEO es la práctica de optimizar JavaScript en un sitio web para maximizar la capacidad del sitio web para clasificarse en motores de búsqueda como Google. Dado que estamos optimizando elementos en la página y que esto afecta directamente las métricas técnicas de SEO, el SEO de JavaScript generalmente cae en la categoría de SEO técnico.

¿JavaScript es malo para el SEO?

Hay muchos sitios de JavaScript por ahí. Y si bien JavaScript ofrece muchos beneficios, también puede afectar negativamente al SEO. JavaScript no es intrínsecamente malo para el SEO, pero cuando se implementa incorrectamente, puede dificultar que el robot de Google rastree e indexe páginas. Además, el uso excesivo de JavaScript puede aumentar los tiempos de carga, perjudicando directamente la capacidad de clasificación y la experiencia de navegación del usuario.

No todos los sitios utilizan JavaScript de la misma manera. Si bien algunos sitios utilizan JavaScript en su código aquí y allá, otros usan JavaScript para potenciar los marcos y funciones principales.

Por ejemplo, los marcos de JavaScript como Angular y React pueden ayudar a los desarrolladores a crear aplicaciones web de manera más eficiente. Estos marcos también requieren un código JavaScript mucho más extenso y complejo que el sitio web promedio.

Los sitios creados con este modelo de shell de aplicación, donde la interfaz de usuario y los módulos de datos se mantienen separados, requieren la ejecución de código JavaScript para mostrar contenido que es fundamental tanto para los visitantes como para los rastreadores de búsqueda. Por lo tanto, algunos sitios corren más riesgo de sufrir problemas de SEO relacionados con JavaScript que otros. Los sitios que dependen de JavaScript para cargar contenido en la página pueden experimentar problemas de SEO si ese contenido se carga correctamente para los visitantes pero no para los rastreadores de búsqueda.

¿Cómo maneja Google JavaScript?

Antes de sumergirnos en la optimización, veamos un poco más de cerca cómo Google maneja realmente JavaScript.

Google procesa JavaScript en tres fases: rastreo, renderizado e indexación. El robot de Google comienza el proceso rastreando las URL en su cola. Envía una solicitud al servidor mediante un agente de usuario móvil y extrae el HTML del sitio. Google solo tiene una cantidad finita de recursos informáticos y solo puede asignar una cantidad limitada para rastrear un sitio (su presupuesto de rastreo). Google procesa los recursos HTML primero para guardar los recursos de rastreo y pospone los recursos JavaScript de la página para su posterior rastreo colocándolos en una cola de procesamiento.

El renderizado permite al robot de Google ejecutar código JavaScript y ver lo que vería un usuario si estuviera navegando por el sitio, lo que hace posible que el robot de Google lo indexe correctamente. Cuando se trata de sitios que utilizan mucho JavaScript (y especialmente sitios que utilizan el modelo de shell de la aplicación para mostrar información crítica en JavaScript), el robot de Google primero debe ejecutar y representar el código JavaScript para obtener más información sobre el contenido de la página.

Este proceso de renderizado crea un retraso a medida que el código JavaScript ingresa a la cola de Web Rendering Services, donde espera ser procesado. Si bien este proceso solía llevar mucho tiempo, Google declaró recientemente que el retraso en la renderización es en realidad de solo 5 segundos en promedio, y que el 90% de los sitios se procesan en minutos. Desafortunadamente, eso no es lo que los SEO tienen experiencia. Un estudio demostró que Google tardó nueve veces más en rastrear JavaScript que HTML. Además, los errores, los tiempos de espera o la configuración del archivo robots.txt pueden impedir que Googlebot represente e indexe una página.

La necesidad de representar JavaScript lleva al robot de Google a indexar la página en dos oleadas. Después de usar Chromium sin cabeza para representar JavaScript, el robot de Google rastrea el HTML renderizado nuevamente y agrega las URL recién descubiertas a la lista para seguir rastreando. Luego utiliza el HTML renderizado para indexar el sitio.

Representación de JavaScript

No es sólo el robot de Google el que necesita representar sus páginas. El renderizado toma el código de su sitio y lo genera visualmente para que los visitantes puedan verlo en sus navegadores. Muchos problemas de indexación relacionados con JavaScript ocurren debido al tipo de representación que utiliza un sitio para mostrar su contenido. Hay varias opciones diferentes cuando se trata de representar sus páginas JavaScript, y algunas son mejores para los robots de búsqueda que otras.

Representación del lado del servidor

Como su nombre lo indica, la renderización del lado del servidor (SSR) ocurre cuando el proceso de renderización ocurre directamente en el servidor. Después de renderizar, la página web HTML final se entrega al navegador, donde los visitantes pueden verla y los robots pueden rastrearla.

La renderización del lado del servidor se considera una buena opción para SEO porque puede reducir los tiempos de carga de contenido y evitar cambios de diseño. El enfoque del lado del servidor también ayuda a garantizar que todos sus elementos realmente se representen y que la tecnología del lado del cliente no los ignore.

Sin embargo, la representación del lado del servidor también puede aumentar el tiempo necesario para que una página acepte las entradas del usuario. Es por eso que algunos sitios que dependen en gran medida de JavaScript prefieren usar SSR en páginas web que realmente importan para SEO, pero no en páginas donde una funcionalidad sólida es crítica.

Representación del lado del cliente

La renderización del lado del cliente (CSR) desplaza la carga de trabajo de renderización del servidor al cliente (el navegador). En lugar de recibir el HTML completamente renderizado directamente desde el servidor, el usuario recibe algo de HTML básico junto con un archivo JavaScript para que lo renderice su propio navegador.

Debido a que el propio navegador necesita manejar la carga de renderizado, el renderizado del lado del cliente es generalmente más lento que el del lado del servidor. Esto puede causar problemas obvios de SEO, ya que la velocidad de la página es una de las muchas señales técnicas de SEO que utiliza Google para clasificar las páginas. Además, velocidades de carga más lentas también pueden aumentar la tasa de rebote y, si bien la tasa de rebote puede no ser una señal en sí misma, una alta podría ser indicativa de una mala experiencia de navegación y de visitantes frustrados al sitio. Si está buscando aumentar la velocidad del sitio, alejarse del renderizado del lado del cliente puede no ser una mala idea.

Representación dinámica

El renderizado dinámico utiliza el renderizado del lado del cliente y del lado del servidor en diferentes momentos. Las solicitudes provenientes de navegadores recibirán la versión del lado del cliente de la página, mientras que las solicitudes provenientes de bots que pueden tener problemas con JavaScript obtendrán la versión del lado del servidor. Esto protege la funcionalidad de las páginas más importantes y al mismo tiempo facilita que los rastreadores de búsqueda accedan a aquellas que requieren indexación.

Un sitio con una gran cantidad de contenido dinámico que debe actualizarse y volver a indexarse ​​con frecuencia puede beneficiarse de este estilo de representación más flexible. Sin embargo, si bien el renderizado dinámico puede parecer una solución sólida a sus problemas de renderizado, en realidad no es una sugerencia de Google. De hecho, la página central de búsqueda de Google para JavaScript advierte específicamente que la representación dinámica es una “solución alternativa” y “no una solución a largo plazo” debido a complejidades adicionales y requisitos de recursos. Dicho esto, todavía puede ser una solución a corto plazo cuando sea necesario.

Representación estática

La renderización estática, también conocida como renderización previa, implica generar el contenido HTML de una página durante el proceso de construcción o implementación en lugar de en tiempo de ejecución. Los archivos HTML pre-renderizados luego se envían directamente al navegador o al cliente cuando lo solicite.

En la representación estática, el servidor genera archivos HTML con todo el contenido y los datos necesarios para la página, incluidos los elementos dinámicos. Esto significa que el navegador o cliente recibe una página HTML completamente renderizada sin necesidad de procesamiento adicional o ejecución de JavaScript.

Los robots de los motores de búsqueda pueden rastrear fácilmente los archivos HTML pre-renderizados, lo que permite una mejor indexación del contenido del sitio web. Además, la representación estática puede mejorar significativamente los tiempos de carga de la página, ya que el contenido ya está presente en el archivo HTML y no requiere representación adicional en el lado del cliente.

¿Qué tipo de renderizado es mejor para SEO?

Google recomienda utilizar renderizado del lado del servidor, renderizado estático o combinar renderizado del lado del cliente y del lado del servidor mediante rehidratación (algo similar al renderizado dinámico). Google no prohíbe la renderización del lado del cliente, pero como puede ser más problemática, no es exactamente la preferida. A medida que crece la cantidad de JavaScript en la aplicación o en la página, puede afectar negativamente la interacción de la página con la siguiente pintura (INP, que será parte de Core Web Vitals en marzo de 2024) cuando se renderice en el lado del cliente. Cuando se trata de JavaScript del lado del cliente, Google recomienda adoptar el enfoque de "servir sólo lo que necesita, cuando lo necesita".

Consejos para reducir los problemas de SEO de JavaScript

Hacer que JavaScript de su sitio sea compatible con SEO no tiene por qué ser muy complicado, pero existen varias prácticas recomendadas que debe seguir para obtener excelentes resultados. Aquí hay algunos consejos de SEO JavaScript para ayudarlo a usted y a su equipo de desarrollo a diseñar una estrategia de JavaScript que no perjudique su clasificación.

1.Asegúrese de que Google esté indexando contenido JavaScript

No confíe en que Google procesará e indexará automáticamente su contenido JavaScript. Tómese un tiempo para comprobarlo usted mismo realizando una búsqueda en el sitio de una cadena de texto específica en su página entre comillas (sitio: sudominio.com “texto específico”). Si aparece la página, puedes estar seguro de que está indexada.

También puede utilizar varias herramientas diferentes de Google (Herramienta de inspección de URL, Prueba de optimización para dispositivos móviles) y herramientas de terceros (Screaming Frog, JetOctopus) para profundizar un poco más y probar su implementación de JavaScript. Consulte la sección "Pruebas y solución de problemas" al final de esta guía para obtener más información sobre el uso de estas herramientas para verificar errores de indexación relacionados con JavaScript.

Por último, no olvide que el archivo robots.txt puede impedir que los rastreadores de búsqueda accedan a páginas específicas. Si Google simplemente no indexa una página, asegúrese de que el archivo robots.txt no la impida. Google no recomienda el uso de robots.txt para bloquear archivos JavaScript, ya que esto puede afectar la capacidad del robot de Google para representar correctamente el contenido de la página e indexarla.

2. Siga las mejores prácticas de SEO en la página

El hecho de que esté trabajando con JavaScript en lugar de HTML no significa que el proceso de SEO en la página cambiará. Todas las optimizaciones técnicas y on-page habituales (etiquetas, títulos, atributos, etc.) siguen siendo esenciales. De hecho, Google ha sugerido a los desarrolladores que eviten el uso de JavaScript para crear o administrar etiquetas canónicas.

3. Utilice enlaces internos eficaces

Sin enlaces internos, los robots de búsqueda no pueden encontrar todas las páginas en la arquitectura de su sitio y tendrán problemas para rastrearlas o clasificarlas. Para fines de SEO de JavaScript, es mejor tener enlaces en HTML en lugar de JavaScript para que puedan rastrearse inmediatamente en lugar de después de renderizarlos.

Si utiliza JavaScript para ingresar enlaces dinámicamente en su código, asegúrese de configurarlos usando el marcado HTML adecuado. También recomiendo utilizar la herramienta de inspección de URL de Google para comprobar si el texto ancla está presente en el HTML renderizado final. Además, Google recomienda evitar enlaces con controladores de eventos de JavaScript o elementos HTML como <div> o <span>, ya que pueden causar problemas al robot de Google e impedir que rastree el enlace.

4. Manténgase alejado de los hashes en las URL

Las SPA (aplicaciones de una sola página) pueden utilizar URL fragmentadas para cargar diferentes vistas. Sin embargo, Google quiere que los administradores web eviten el uso de hashes en URL fragmentadas, lo que sugiere que no debería contar con ellos para trabajar con el robot de Google. En su lugar, recomiendan utilizar la API History para cargar contenido diferente según la URL.

5. Utilice imágenes de carga diferida

La carga diferida es la práctica de retrasar la carga de elementos de página menos importantes o no visibles. Es común para optimizar el rendimiento y la UX. Pero si no tiene cuidado con lo que retrasa y cómo lo hace, puede terminar con problemas de indexación.

El robot de Google no se desplaza cuando mira el contenido; simplemente cambia el tamaño de su ventana gráfica. Esto significa que es posible que los eventos de desplazamiento programados no se activen y que el contenido no se procese. Google sugiere varias formas diferentes de asegurarse de que todo el contenido de su página se cargue durante la carga diferida.

Probablemente sea mejor dejar la carga diferida para tus imágenes. La carga diferida de contenido es riesgosa, ya que puede expirar y terminar sin indexarse.

6. Arreglar contenido duplicado

Google afirma que el contenido duplicado no es motivo de acción manual a menos que sea de naturaleza maliciosa o engañosa. Pero aún así puede consumir su presupuesto de rastreo, retrasar la indexación y hacer que sus páginas compitan entre sí por la clasificación. JavaScript tiende a crear varias URL para el mismo contenido, así que decida qué versión desea indexar y aplique etiquetas canónicas y noindex al resto.

7. Realice auditorías periódicas del sitio

A medida que aumenta el volumen y la complejidad del código JavaScript de una página, es importante comprobar que se procesa e indexa correctamente. Las auditorías del sitio programadas periódicamente pueden ayudarlo a detectar cualquier cosa que haya pasado por alto durante su ronda inicial de pruebas de implementación, así que no olvide incluir JavaScript SEO como parte de su lista de verificación de SEO habitual.

Pruebas y solución de problemas

Hay varias herramientas diferentes que puede utilizar para comprobar si Google tiene dificultades para indexar JavaScript en su sitio web o si sus recientes correcciones SEO de JavaScript de Google están funcionando.

Su primera parada deberían ser las herramientas web de Google, específicamente la herramienta de inspección de URL y la herramienta de prueba de optimización para dispositivos móviles. Estas herramientas no son perfectas, ya que generan una versión de su página a partir de los recursos disponibles en tiempo real, no la misma versión en caché que utiliza el renderizador. Pero aún pueden brindarle una instantánea bastante precisa de cómo Google maneja su JavaScript.

La herramienta de prueba de optimización para dispositivos móviles le permite alternar entre el código de su página y una captura de pantalla de lo que ve Google, para que pueda comparar ambos en busca de JavaScript que puede no estar ejecutándose correctamente. Puede acceder a esta función haciendo clic en "Ver página probada" una vez finalizada la prueba. Al hacer clic en la pestaña "Más información" también se muestran los posibles mensajes de error que se originan en la consola de JavaScript y más información sobre qué recursos de la página no se pudieron cargar y por qué.

De manera similar, la herramienta de inspección de URL de Google le proporciona una captura de pantalla de cómo el robot de Google ve sus páginas para que pueda inspeccionar visualmente sus elementos. También muestra el estado del índice de sus páginas para que pueda detectar rápidamente si una de sus páginas con muchos scripts no ha sido indexada y puede requerir atención.

Además de estas herramientas web, existen varias herramientas de terceros que puede utilizar para realizar pruebas y solucionar problemas. Las herramientas de rastreo como Screaming Frog y JetOctopus pueden representar capturas de pantalla de JavaScript de sus páginas. Sin embargo, tenga en cuenta que estas representaciones no son necesariamente las mismas que produciría el robot de Google, ya que las generan otros rastreadores.

Obtenga ayuda de expertos técnicos en SEO

JavaScript SEO tiene muchas partes móviles. Con un socio dedicado, no es necesario que aborde estos problemas técnicos de SEO solo. Victorious puede ayudarlo a usted y a su equipo de desarrollo a garantizar que su sitio esté optimizado adecuadamente y que sus esfuerzos de SEO contribuyan a sus objetivos comerciales. Solicite una consulta gratuita para obtener más información.