Si es un especialista en SEO y no un desarrollador, entonces probablemente no necesite aprovechar todas las complejidades del desarrollo de sitios web. Pero sí necesita conocer los conceptos básicos, ya que la forma en que se codifica un sitio web tiene un gran impacto en su rendimiento y, por lo tanto, en el potencial de SEO. En el publicar en etiquetas HTML, hemos repasado los conceptos básicos de HTML que necesita comprender para hacer SEO de un sitio web de manera eficiente. Esta vez le ofrezco profundizar en otros lenguajes de codificación que usan los desarrolladores para hacer que un sitio web se vea bien y sea interactivo.
El lenguaje es JavaScript, y en esta publicación, repasaremos los principales errores relacionados con JS que puede enfrentar al auditar su sitio web. Explicaré por qué cada uno de los errores es importante y cómo se pueden corregir. La parte de reparación es algo que probablemente asignará a los desarrolladores de su sitio web. Es solo que esta vez estarás hablando con ellos el mismo idioma.
¿JavaScript es bueno o malo para el SEO?
Desafortunadamente, no hay una respuesta simple a esta pregunta. ¡Todo depende, de verdad!
Cuando Javascript se implementa cuidadosamente, con un enfoque en experiencia de página, optimización del rendimiento y adecuada indexación técnicas, puede ser beneficioso tanto para el SEO como para los usuarios. Lo más digno de mención es que puede mejorar la experiencia del usuario. Los sitios web con JavaScript tienden a tener diferentes tipos de animaciones y transiciones que son excelentes para aumentar la participación de los usuarios.
Ahora, si no puede encontrar un equilibrio entre la interactividad y la compatibilidad con los motores de búsqueda, su sitio web tiene una mayor probabilidad de sufrir problemas como capacidad de rastreo limitada, tiempo de carga de página prolongado y problemas de compatibilidad. Todos estos problemas combinados pueden conducir a una alta tasa de rebote. ¡Tampoco queremos eso!
Y a pesar del debate en curso sobre el impacto de JavaScript en la visibilidad y clasificación de un sitio web, no sería exacto decir que Javascript es una amenaza para la optimización del sitio web. Aún así, el uso incorrecto de Javascript puede tener un efecto perjudicial en su potencial de clasificación, por lo que se recomienda al menos seguir algunas prácticas fundamentales de SEO de Javascript. Los cubriremos más adelante. Así que no se preocupe, pronto podrá aprovechar al máximo el poder de este lenguaje de secuencias de comandos.
¿Qué es JavaScript SEO?
Antes de profundizar en el SEO de JavaScript y su importancia para el rendimiento exitoso de un sitio web, primero identifiquemos la esencia de JavaScript en sí.
JavaScript es un lenguaje de secuencias de comandos que se utiliza principalmente para agregar elementos interactivos y contenido dinámico a los sitios web. Fue creado por Brendan Eich en Netscape Communications en 1995 y desde entonces se ha convertido en uno de los lenguajes de programación más utilizados en la web. Los formularios emergentes, los mapas interactivos, los gráficos animados, los sitios web con contenido continuamente actualizado (por ejemplo, el pronóstico del tiempo, las tasas de cambio) son todos ejemplos de implementación de JavaScript.
Desde julio de 2023, Javascript es el lenguaje de programación del lado del cliente más utilizado, seguido de Flash y Java. Algunos de los sitios web más populares que actualmente utilizan este lenguaje son Google, Facebook, Microsoft, Youtube, Twitter, Netflix, etc.
Aquí en SE Ranking, también usamos JavaScript. Muchos de los efectos geniales que ves en la plataforma SE Ranking también son impulsados por JS. por ejemplo, nuestro Monitoreo de cambios de página La página de destino ahora presenta una animación basada en JavaScript diseñada para explicar cómo funciona la herramienta.
Solo para darle una mejor idea de cómo JavaScript transforma los sitios web, permítame mostrarle la misma sección de la página de destino con JavaScript deshabilitado.
Ahora que está familiarizado con JavaScript y el papel que desempeña en el desarrollo de sitios web, cambiemos nuestro enfoque a JavaScript SEO.
JS SEO implica la optimización de sitios web que dependen significativamente de la tecnología JavaScript. En el pasado, los motores de búsqueda luchaban por indexar y rastrear correctamente las páginas web basadas en JavaScript, ya que sus algoritmos se centraban principalmente en analizar y comprender el contenido HTML estático. Los motores de búsqueda han hecho un gran progreso en su capacidad para interpretar e indexar el contenido de JavaScript. Sin embargo, para abordar los desafíos que plantea JavaScript y mejorar la visibilidad de su sitio en los motores de búsqueda, es esencial implementar prácticas de SEO de Javascript.
- Si no se implementa correctamente, JavaScript puede provocar que una parte de su contenido no se indexe. Google necesita procesar los archivos JS para ver su página de la misma manera que los usuarios y, si no lo hace, indexará su página sin los elementos basados en JS. Esto, a su vez, puede impedir su clasificación si el contenido no indexado es crucial para cumplir con la intención del usuario;
- Las secciones de página inyectadas con JavaScript pueden contener enlaces internos. Nuevamente, si Google no puede generar JavaScript, no seguirá los enlaces. Por lo tanto, es posible que no se indexen páginas completas a menos que estén vinculadas desde otras páginas o desde el mapa del sitio. Entonces, con JavaScript, existe la posibilidad de que codifique sus enlaces de una manera que Google no pueda entender y, como resultado, no seguirá los enlaces.
- Los archivos JavaScript son bastante pesados y agregarlos a una página puede ralentizar significativamente su velocidad de carga. A su vez, esto puede generar tasas de rebote más altas y clasificaciones más bajas.
Seguramente, todos estos problemas se pueden evitar siempre que comprenda cómo Google procesa JavaScript y cómo hacer que su código JS sea fácil de buscar.
Cómo maneja Google JavaScript
Últimamente, Google ha multiplicado por cien su capacidad para rastrear e indexar JavaScript. Pero el proceso sigue siendo bastante complicado y muchas cosas pueden salir mal.
Con páginas HTML normales, todo es simple y llano. Googlebot rastrea una página y analiza su contenido, incluidos los enlaces internos. Luego, el contenido se indexa mientras las URL descubiertas se agregan a la cola de rastreo y el proceso comienza de nuevo.
Cuando se agrega JavaScript a la ecuación, el proceso se vuelve un poco más engorroso. Para ver lo que está oculto dentro del JavaScript que normalmente parece un solo enlace al archivo JS, Googlebot primero debe analizarlo, compilarlo y ejecutarlo. Esto se llama representación JS y solo después de que se completa esta etapa, Google puede ver todo el contenido de una página en etiquetas HTML, el idioma que puede entender. En este punto, Google puede proceder a indexar los elementos basados en JS y agregar las URL ocultas dentro de JS a la cola de rastreo.
Ahora, ¿son estas complicaciones algo de lo que deberías preocuparte en términos de SEO? Hace apenas un año lo eran.
La representación de JavaScript requiere muchos recursos y es costosa, y hasta hace poco Google no renderizaría inmediatamente JavaScript. Primero indexaría las partes HTML simples disponibles de la página y luego, durante la llamada segunda ola de indexación, Google procesaría el JavaScript. En 2018, John Mueller afirmó que la página tardó entre unos días y algunas semanas en renderizarse. Por lo tanto, los sitios web que dependían en gran medida de JavaScript no podían esperar que sus páginas se indexaran rápidamente. Además, podrían tener problemas con las nuevas páginas que ingresan a la cola de rastreo porque Google no puede seguir los enlaces internos de inmediato.
En una de las Horario de oficina JavaScript SEO, Martin Splitt aseguró a los webmasters que la cola de procesamiento ahora se está moviendo mucho más rápido y que una página normalmente se procesa en minutos o incluso segundos. Sin embargo, la codificación de JavaScript de una manera fácil de buscar sigue siendo bastante complicada, y semanalmente Horario de oficina JavaScript SEO las sesiones evidentemente prueban esto. Los casos que comparten los usuarios demuestran que las cosas pueden salir terriblemente mal si JavaScript no está codificado correctamente. Permítanme ilustrar mi punto con algunos problemas comunes.
Google no interactúa con su contenido
Google puede ver e indexar contenido oculto siempre que aparezca en la DOM—aquí es donde se envía el código fuente HTML antes de que el navegador lo procese. En esta etapa, se puede utilizar JavaScript para modificar el contenido.
Ahora, digamos que su HTML inicial contiene el contenido de la página en su totalidad y luego usa Propiedades CSS para ocultar algunas partes del contenido y JS para permitir que los usuarios revelen estas partes ocultas. En este caso, todo está bien ya que el contenido aún está dentro del código HTML y solo está oculto para los usuarios; Google aún puede ver lo que está oculto dentro del código CSS.
Si, por otro lado, su HTML inicial no contiene algunas piezas de contenido y se cargan en el DOM mediante JavaScript activado por clic, Google no verá este tipo de contenido porque Googlebot no puede hacer clic. Sin embargo, este problema puede resolverse implementando representación del lado del servidor—aquí es cuando JS se ejecuta en el lado del servidor y Google obtiene el código HTML final listo para usar. Representación dinámica también puede ser una salida.
Google no se desplaza
JavaScript se usa a menudo para implementar un desplazamiento infinito o para ocultar algún contenido por el bien de UX y permitir que los usuarios revelen información adicional al hacer clic en el botón.
El problema aquí es que Googlebot no hace clic ni se desplaza como lo hacen los usuarios en sus navegadores.
Seguramente tiene sus propias soluciones, pero pueden funcionar o no según la tecnología que utilice. Y si implementa las cosas de una manera que Google no puede entender, terminará con una parte de su contenido basado en JS que no se indexará.
Para pergamino infinito, Se deben evitar los eventos de overscrolls ya que requieren que Googlebot se desplace por la página para llamar al código JavaScript, algo que Google no puede manejar. En su lugar, puede implementar desplazamiento infinito y carga diferida usando API de observador de intersección o habilite la carga paginada junto con el desplazamiento infinito.
Cómo JS y CSS funcionan juntos
Mientras que Javascript se usa principalmente para agregar interactividad y comportamiento dinámico a las páginas web, CSS (que significa Hojas de estilo en cascada) hace posible crear sitios web con estilo. Permite a los desarrolladores definir el diseño, los colores, las fuentes y otros aspectos visuales de los elementos HTML del sitio. CSS siempre se usa junto con HTML. Es el papel de regalo lo que le da a una caja de regalo el aspecto alegre. Una página web HTML simple se vería así menos el ancho establecido y la alineación del lado izquierdo.
La cuestión es que hoy en día, CSS se usa en todos los sitios web, incluso si es un sitio bastante aburrido. página de una serie RFC de notas técnicas sobre el funcionamiento de Internet.
En el pasado, a Google no le importaba demasiado el CSS y solo interpretaba el marcado HTML de la página. Todo esto cambió con la actualización compatible con dispositivos móviles en 2015. En respuesta a la creciente popularidad de la búsqueda móvil, Google decidió recompensar los sitios web que ofrecían una experiencia de usuario perfecta en dispositivos móviles. Y para asegurarse de que la página es compatible con dispositivos móviles, Google tuvo que representarlo de la forma en que lo hacen los navegadores, lo que significaba cargar e interpretar archivos CSS y JavaScript.
Algoritmo de diseño de página también se basa en CSS. Su objetivo es determinar si los usuarios pueden encontrar fácilmente el contenido en la página y CSS ayuda a Google a comprender cómo se presenta la página tanto en computadoras de escritorio como en dispositivos móviles, y dónde exactamente dentro de la página reside cada parte del contenido: al frente y al centro, en el barra lateral o en la parte inferior de la página muy por debajo del pliegue.
Ahora, para comprender cómo funcionan juntos CSS y Javascript, usemos una analogía simple. Imagina que estás planeando una fiesta impresionante. En este caso, CSS desempeñará el papel de decorador de fiestas. Puede usar CSS para hacer que todo sea visualmente atractivo y establecer el ambiente general. Desde la elección de los colores del tema y la disposición de los muebles hasta la adición de elementos decorativos como globos y serpentinas, CSS determina cómo se ve y se siente el lugar de la fiesta.
Pero si desea agregar elementos interactivos a su fiesta, como juegos o una cabina de fotos, deberá recurrir a JavaScript. Piense en él como el planificador de fiestas que organiza los juegos, configura el fotomatón y se asegura de que todo funcione sin problemas.
HTML y CSS crean una fantástica experiencia de fiesta junto con JavaScript. De manera similar, en el desarrollo web, CSS y JavaScript combinan sus puntos fuertes para mejorar la experiencia del usuario en los sitios web.
Prácticas recomendadas de JavaScript para SEO
Ya que hemos repasado la mayoría de los fundamentos de Javascript, pasemos a algunas de las mejores prácticas a seguir al optimizar su sitio web de JavaScript.
Asegúrese de que Google pueda descubrir todo su contenido
Dado que el rastreador web de Google, Googlebot, actualmente puede analizar contenido de JavaScript, no es necesario bloquear su acceso a los recursos necesarios para rastrear y renderizar.
Aún así, si desea asegurarse de que su contenido JS esté indexado de manera efectiva, cumpla con las siguientes pautas:
- Haga que la información esencial dentro de sus páginas web sea visible en el código fuente de la página. Esto garantiza que los motores de búsqueda no necesiten depender de las interacciones del usuario para cargar contenido (por ejemplo, hacer clic en un botón).
- Aunque Google no lo recomienda, aún puede usar JavaScript para inyectar un etiqueta de enlace rel=”canónica”. La Búsqueda de Google reconocerá la etiqueta del enlace cuando cargue su página. Solo asegúrate de que sea el único en la página. Si no es así, puede terminar creando varias etiquetas de enlace rel=”canonical” o cambiando una etiqueta de enlace rel=”canonical” existente, lo que puede tener consecuencias inesperadas.
- Los marcos de Javascript, como Angular y Vue, suelen generar URL basadas en hash (p. ej., www.example.com/#/about-us) para el enrutamiento del lado del cliente. Aunque este tipo de URL ofrecen una navegación fluida, pueden dificultar el SEO y confundir a los usuarios. Asegúrese de usar URL regulares para mejorar la experiencia del usuario, el SEO y la visibilidad general del sitio web.
Siga las mejores prácticas comunes en la página
Cuando se trata de contenido de Javascript, seguir las pautas comunes de SEO en la página debe estar en su lista de prioridades. Es especialmente importante optimizar el contenido, las etiquetas de título, las meta descripciones, los atributos alternativos y las etiquetas de meta robot. Algunas de las mejores prácticas clave de JavaScript para SEO incluyen, entre otras, las siguientes:
- Optimización de contenido: Asegúrese de que su contenido JS sea valioso y esté optimizado para palabras clave. Use etiquetas de encabezado adecuadas e incluya palabras clave relevantes.
- Etiquetas de título y meta descripciones: Generar único y descriptivo etiquetas de título y meta descripciones para cada página usando JavaScript. Incluya palabras clave dentro de los límites de caracteres.
- Atributos alternativos para imágenes: Agregue atributos alt concisos y ricos en palabras clave a sus imágenes basadas en JavaScript para mejorar la accesibilidad y el SEO.
- Etiquetas de metarobots: Incluya etiquetas meta robot para guiar a los rastreadores de motores de búsqueda en la indexación y el seguimiento de enlaces. Elija "indexar" y "seguir" para el contenido deseado o use "noindex" y "nofollow" para contenido sensible o duplicado.
- Carga y rendimiento de JavaScript: Optimice la carga de JavaScript para mejorar la velocidad de la página y la experiencia del usuario. Comprima el tamaño del archivo para reducir el tiempo de carga, aprovechar el almacenamiento en caché y evitar el bloqueo de elementos críticos de la página.
Usa enlaces adecuados
Lo que debe recordar al implementar JavaScript es que Google solo seguirá los enlaces inyectados por JS si están codificados correctamente. Un etiqueta HTML con una URL y un href El atributo que apunta a la URL adecuada es la regla de oro que debe seguir. Mientras la etiqueta esté allí, todo está bien, incluso si agrega algo de JS al código del enlace.
tu texto de anclaje
Mientras tanto, todas las demás variaciones como enlaces con una etiqueta faltante o href atributo o sin una URL adecuada funcionará para los usuarios, pero Google no podrá seguirlos.
tu texto de anclaje tu texto de anclaje tu texto de anclaje ningún enlace
Seguramente, si usas un Indice Web, Google aún debería descubrir las páginas de su sitio web incluso si no puede seguir los enlaces internos que conducen a estas páginas. Sin embargo, el motor de búsqueda aún prefiere los enlaces a un mapa del sitio, ya que lo ayudan a comprender la estructura de su sitio web y la forma en que las páginas se relacionan entre sí. Además, la vinculación interna le permite extender jugo de enlace a través de su sitio web. Mira esto guía detallada sobre enlaces internos para aprender cómo funciona
Use códigos de estado HTTP significativos
Asegurarse de que los códigos de estado HTTP sean relevantes y significativos es una práctica esencial de SEO que juega un papel crucial para facilitar una buena comunicación con Googlebot. JavaScript puede simplificar este proceso. Por ejemplo, si se encuentra un código 404 o cualquier otro error, los usuarios serán dirigidos automáticamente a una página separada/no encontrada. Al utilizar JavaScript para administrar los códigos de estado HTTP, los sitios web pueden proporcionar una experiencia de usuario más intuitiva, reduciendo la frustración y ayudando a los visitantes a navegar a través de posibles errores.
Evite bloquear archivos JavaScript importantes en su archivo robots.txt
No bloquee archivos JavaScript esenciales en el archivo robots.txt de su sitio web. Si lo hace, Google no podrá acceder, procesar ni interactuar con su contenido. Esto puede obstaculizar drásticamente la capacidad de Google para comprender y clasificar su sitio web de manera efectiva.
Supongamos que ha generado contenido de JavaScript de alta calidad al incorporar texto cargado dinámicamente, elementos interactivos y metadatos cruciales. Pero supongamos también que lo ha bloqueado para que no se rastree por algún motivo. Debido a esto, su contenido puede pasar desapercibido o estar subrepresentado en los índices de los motores de búsqueda. Esto conduciría a una reducción del tráfico orgánico, la visibilidad y el rendimiento general de la búsqueda.
Implementar la paginación correctamente
Cuando los expertos en SEO se ocupan de una gran cantidad de contenido de un sitio web, tienden a utilizar técnicas de optimización en la página, como la paginación y el desplazamiento infinito. A pesar de que estas prácticas pueden traer una variedad de beneficios, también pueden obstaculizar sus esfuerzos de SEO cuando se implementan incorrectamente.
Un problema común con la paginación es que los bots de los motores de búsqueda tienden a ver solo la primera parte del contenido paginado, ocultando sin querer las páginas siguientes como consecuencia. Esto significa que algunas de las valiosas piezas de contenido que creó pueden pasar desapercibidas y no indexadas.
Para resolver este problema, implemente la paginación con enlaces correctos, además de las acciones del usuario. Con la ayuda de los enlaces <a href>, los motores de búsqueda pueden seguir y rastrear fácilmente cada página paginada, asegurando que todo el contenido se encuentre e indexe.
Utilice renderizado estático o del lado del servidor
Los rastreadores web, como se mencionó anteriormente, tienden a tener dificultades para ejecutar JavaScript. Esta es la razón por la cual los rastreadores pueden ignorar este tipo de contenido por completo. Los rastreadores de páginas pueden simplemente negarse a esperar a que el contenido dinámico se represente por completo antes de indexar la página.
Para ayudar a los robots de los motores de búsqueda a rastrear e indexar el contenido de Javascript, se recomienda utilizar la representación del lado del servidor. Este proceso consiste en renderizar la página web en el servidor antes de enviarla al navegador del usuario. Esta práctica garantiza que los rastreadores de los motores de búsqueda reciban páginas web completas y, como resultado, reduce drásticamente el tiempo y el esfuerzo de procesamiento.
Probando JS para SEO
Como habrás adivinado, la forma en que se codifica JavaScript puede hacer o deshacer tu sitio web. Por ejemplo, puedes usar Las herramientas de Google como el Mobile-friendly de prueba para ver cómo muestra Google sus páginas.
Preferiblemente, las pruebas deben realizarse en la etapa inicial de desarrollo, cuando las cosas se pueden arreglar más fácilmente. Con la prueba de compatibilidad con dispositivos móviles, puede detectar todos los errores desde el principio; solo solicite a sus desarrolladores que creen una URL para su servidor host local utilizando herramientas especiales (por ejemplo, ngrok).
Ahora, exploremos otras formas que puede usar para probar Javascript para SEO.
Inspeccionar en Chrome
Para examinar cómo los motores de búsqueda interpretan su JavaScript, puede usar las herramientas para desarrolladores del navegador Chrome. Abra su sitio web en Chrome, haga clic derecho en cualquier elemento y seleccione "Inspeccionar". Esto abrirá la consola del desarrollador, donde puede ver la estructura HTML de la página y verificar si el contenido de JavaScript deseado está visible. Si el contenido está oculto o no se muestra correctamente, es posible que los motores de búsqueda no puedan acceder a él.
Alternativamente, puede presionar Comando+Opción+J (Mac) o Control+Shift+J (Windows, Linux, Chrome OS) para ejecutar la herramienta.
Aquí en el Fuentes pestaña, puede encontrar sus archivos JS e inspeccionar el código que inyectan. Luego puede pausar la ejecución de JS en un punto en el que cree que algo salió mal usando uno de los Puntos de interrupción del oyente de eventos e inspeccionar más a fondo la pieza de código. Una vez que crea que ha detectado un error, puede editar el código en vivo para ver en tiempo real si la solución que encontró soluciona el problema.
Lo mejor de las herramientas para desarrolladores de Chrome es que todos los cambios se aplican en los navegadores de los usuarios y no afectan a otros usuarios. Se irán una vez que toques el Refrescar botón. La herramienta se puede utilizar para depurar cualquier error de código, no solo aquellos relacionados con JavaScript. Por lo tanto, si tiene algún problema con el CSS de su sitio web, la herramienta también será útil.
Google Búsqueda consola
Google Search Console es una poderosa herramienta que le permite monitorear y optimizar la presencia de su sitio web en los resultados de búsqueda de Google. Proporciona información valiosa sobre cómo Google rastrea e indexa su sitio. Para ello, dirígete a la sección “Inspección de URL” de Search Console. Desde aquí puede enviar URL individuales y ver cómo Google las procesa, incluido cualquier contenido de JavaScript. Esto lo ayudará a identificar si Google puede acceder e indexar su contenido de JavaScript de manera efectiva.
Haga clic en "Inspección de URL" y luego use la función "Probar URL en vivo". Luego, haga clic en Ver página probada > Información > Mensajes de la consola de Javascript.
Google Cache
Verificar el caché de Google es otra buena manera de verificar si Google está indexando su contenido basado en JavaScript. El caché de Google es una instantánea de su página web tomada por el rastreador de Google. Puedes utilizar herramientas como el Ranking SE Google Cache Checker para ver la versión en caché de su página. Esto lo ayudará a determinar si Google está procesando e indexando correctamente su contenido de JavaScript.
Búsqueda de texto en Google
Para determinar si Google está indexando el contenido generado dinámicamente por su código JavaScript, realice una búsqueda específica de la cadena de texto única generada por JavaScript. Ahora compruebe si Google devuelve algún resultado relevante. Si su contenido generado por JavaScript no aparece en los resultados de búsqueda, esto podría indicar que Google no lo está indexando correctamente.
Ejecutar una auditoría del sitio
Una manera fácil de probar Javascript para SEO y descubrir todos los errores relacionados con JS en su sitio es iniciar una auditoría técnica de SEO. Si es usuario de SE Ranking, deberá consultar varias secciones del Informe de problemas de Auditoría del sitio web: JavaScript y Códigos de estado HTTP.
SE Ranking no solo enumera todos los errores detectados en su sitio, sino que también brinda consejos sobre cómo solucionarlos.
Señala los archivos exactos que causaron un error para que sepa qué archivos ajustar para corregir las cosas. Un solo clic en la columna con el número de páginas, donde se produce el error, abre una lista completa de URL de archivos.
Lea nuestro artículo sobre como hacer una auditoria web y priorice las correcciones y pruebe la herramienta por su cuenta iniciando una auditoría integral del sitio web.
Y si está dispuesto a estudiar cada tipo de error con mayor detalle, siga leyendo.
Problemas comunes de SEO de JavaScript y cómo evitarlos
Ahora, puede que se pregunte qué problemas comunes de SEO están asociados con este lenguaje programático. Y lo primero que vale la pena mencionar es que Javascript se almacena por separado como archivos y se vincula a la página desde el sección.
Los navegadores y Google necesitan obtener estos recursos para representar completamente el contenido de la página. A veces, Google y los navegadores, o solo Google, no pueden cargar los archivos, y las razones por las que esto sucede son comunes tanto para CSS como para JavaScript.
En casos menos drásticos, Google y los navegadores pueden obtener los archivos, pero se cargan con demasiada lentitud, lo que afecta negativamente la experiencia del usuario y también puede ralentizar la indexación del sitio web.
Google no puede rastrear archivos JS
Para obtener sus archivos JavaScript, Googlebot debe tener permiso para hacerlo. En el pasado, era una práctica común bloquear el acceso de Google a estos archivos con el archivo robots.txt, ya que Google no los usaría de todos modos. Ahora que el gigante de las búsquedas confía en JavaScript para comprender el contenido del sitio web, anima a los webmasters a "permitir que se rastreen todos los activos del sitio que afectarían significativamente la representación de la página: por ejemplo, archivos CSS y JavaScript que afectan la comprensión de las páginas.” Si no desbloquea los archivos, Google no podrá procesarlos ni indexar el contenido basado en JavaScript.
El bloqueo de archivos JavaScript no es un factor de clasificación negativo per se. Pero si solo se usa para adornar o si por alguna razón no desea que se indexe el contenido inyectado por JS, puede mantener los archivos JavaScript bloqueados. En todos los demás casos, deje que Google procese sus archivos.
Google y los navegadores no pueden cargar archivos JS
Después de leer el archivo robots.txt para verificar si permite el rastreo, Googlebot realiza una solicitud HTTP para acceder a sus URL de JavaScript. Para continuar con la representación de los archivos, debe obtener el código de respuesta 200 OK. Sin embargo, a veces se devuelven otros códigos de estado como 4XX o 5XX. Si necesita un resumen rápido de lo que significan los diferentes códigos de estado esta guía es para ti.
JavaScript con estado 4XX
Los códigos de respuesta 4XX significan que el recurso solicitado no existe. Hablando de archivos JavaScript, significa que Googlebot siguió las URL indicadas en el de la página, pero no encontró sus archivos en las ubicaciones designadas. Cuando una página devuelve un 4XX, generalmente significa que la página fue eliminada. Con JavaScript, el error suele ocurrir porque la ruta al archivo no se indica correctamente. También puede ser un problema de permisos.
Lo malo de los códigos de respuesta 4XX es que Google no es el único que tiene problemas para procesar sus archivos JavaScript. Los navegadores tampoco podrán ejecutar dichos archivos, lo que significa que su sitio web no se verá tan bien y perderá su interactividad.
Si se utiliza JS para cargar contenido en el sitio web (p. ej., tasas de cambio de valores en un sitio web respectivo), faltará todo el contenido generado dinámicamente si el código no se ejecuta correctamente.
Para corregir el error, sus desarrolladores primero tendrán que averiguar qué los está causando, y las razones variarán según las tecnologías utilizadas.
JavaScript con estado 5XX
Los códigos de respuesta 5XX indican que hay un problema al final de su servidor web. Significa que un navegador o Googlebot envía una solicitud HTTP, localiza su archivo JavaScript pero luego su servidor no puede devolver el archivo.
En el peor de los casos, el error ocurre porque su todo el sitio web está caído. Ocurre cuando su servidor no puede hacer frente a la cantidad de tráfico. El aumento abrupto en el tráfico puede ser natural, pero en la mayoría de los casos, es causado por un software de análisis agresivo o un bot malicioso que inunda su servidor con el propósito específico de apagarlo (DDoS).
El servidor también puede fallar en la entrega de un archivo JavaScript si el navegador no puede obtenerlos durante el período de tiempo establecido, lo que provoca un Error de tiempo de espera 504. Esto puede suceder si el paquete de archivos era demasiado grande o si un usuario tenía una conexión a Internet lenta.
Para evitar esto, puede configurar el servidor de su sitio web de manera que sea menos impaciente. Pero tampoco se recomienda hacer que el servidor espere demasiado.
La cuestión es que cargar un paquete JS enorme requiere una gran cantidad de recursos del servidor y si todos los recursos del servidor se utilizan para cargar el archivo, no podrá cumplir con otras solicitudes. Como resultado, todo su sitio web se pone en espera hasta que se carga el archivo.
Los archivos de JavaScript no se cargan lo suficientemente rápido
En esta sección, profundicemos en los problemas que hacen que sus archivos de JavaScript se carguen durante mucho tiempo o solo un poco más de lo deseado. Incluso si tanto los navegadores como Googlebot logran cargar y procesar sus archivos JS, pero les lleva un tiempo hacerlo, debería sentirse preocupado.
Cuanto más rápido un navegador puede cargar los recursos de la página, mejor experiencia obtienen los usuarios, y si los archivos se cargan lentamente, los usuarios tienen que esperar un tiempo para que la página se muestre en su navegador.
JavaScript con estado 3XX
El código de estado 3xx indica que el recurso solicitado ha sido redirigido y es esencial para redirigir las URL en el código de su sitio web a la nueva ubicación. Esto es cierto no solo para el dominio y la ruta, sino también para el protocolo HTTP/HTTPS utilizado para recuperar el recurso.
En el siguiente ejemplo, se hace referencia inicialmente al archivo JavaScript mediante una URL HTTP:
<script nomodule type="text/javascript" src="http://static.files.bbci.co.uk/orbit/7c43b78b94b8ed38e941a5a5336425e5/js/polyfills.js"></script>
Sin embargo, la URL correcta y actualizada del archivo debe usar HTTPS:
<script nomodule type="text/javascript" src="https://static.files.bbci.co.uk/orbit/7c43b78b94b8ed38e941a5a5336425e5/js/polyfills.js"></script>
Googlebot y los navegadores seguirán obteniendo los archivos, ya que su servidor los redirigirá a la dirección adecuada. La advertencia es que tendrán que realizar una solicitud HTTP adicional para llegar a la URL de destino. Esto no es bueno para el tiempo de carga. Si bien el impacto en el rendimiento puede no ser drástico para una sola URL o un par de archivos, a mayor escala, puede ralentizar significativamente el tiempo de carga de la página.
La solución aquí es evidente: simplemente necesita reemplazar cada URL de JavaScript anterior en el código del sitio web con URL de destino actualizadas.
El almacenamiento en caché no está habilitado
Una excelente manera de minimizar la cantidad de solicitudes HTTP a su servidor es permitir el almacenamiento en caché en un encabezado de respuesta. Seguramente ha escuchado sobre el almacenamiento en caché; a menudo recibirá una sugerencia para borrar el caché de su navegador cuando la información en un sitio web no se muestra correctamente.
Lo que realmente hace el caché es guardar una copia de los recursos de su sitio web cuando un usuario visita su sitio. Luego, la próxima vez que este usuario ingrese a su sitio web, el navegador ya no tendrá que buscar los recursos; en su lugar, les brindará a los usuarios la copia guardada. El almacenamiento en caché es esencial para el rendimiento del sitio web, ya que permite reducir la latencia y la carga de la red.
Encabezado HTTP de control de caché se usa para especificar las reglas de almacenamiento en caché que deben seguir los navegadores: indica si un recurso en particular puede almacenarse en caché o no, quién puede almacenarlo y cuánto tiempo puede durar la copia almacenada en caché. Se recomienda encarecidamente permitir el almacenamiento en caché de archivos JS, ya que los navegadores cargan estos archivos cada vez que los usuarios visitan un sitio web, por lo que tenerlos almacenados en caché puede aumentar significativamente el tiempo de carga de la página.
Aquí hay un ejemplo de cómo configurar el almacenamiento en caché para archivos JS para un día y acceso público.
Conjunto de encabezado Cache-Control "max-age=86400, public"
Sin embargo, vale la pena señalar que Googlebot normalmente ignora el encabezado HTTP de control de caché porque seguir el conjunto de directivas del sitio web supondría demasiada carga para la infraestructura de rastreo y representación.
Por lo tanto, cada vez que actualice su archivo JS y desee que Google lo tome en cuenta, se recomienda cambiar el nombre de su archivo y cargarlo usando una URL diferente. De esa forma, Google recuperará el archivo porque lo tratará como un recurso totalmente nuevo que no ha encontrado antes.
El número de archivos importa
El uso de múltiples archivos JavaScript puede ser conveniente desde la perspectiva del desarrollador, pero no es muy bueno en términos de rendimiento. Los navegadores envían una solicitud HTTP separada para cargar cada archivo, y la cantidad de conexiones de red simultáneas que un navegador puede procesar es limitada. Por lo tanto, todos los recursos JS de una página se irán cargando uno a uno disminuyendo la velocidad de renderizado.
Por esta razón, se recomienda agrupar su archivo JavaScript para mantener al mínimo la cantidad de archivos que un navegador tendrá que cargar.
Desde la perspectiva de Google, demasiados archivos JavaScript no son un problema, lo que significa que los procesará de todos modos. Pero cuantos más archivos tenga, más gastará su presupuesto de rastreo en tener archivos JS cargados. Para sitios web enormes con millones de páginas, puede ser crítico, ya que significaría que Google no indexará oportunamente algunas páginas.
El tamaño del archivo también importa
El problema de agrupar archivos JavaScript es que, a medida que su sitio web crece, se agregan nuevas líneas de código a los archivos y, eventualmente, pueden crecer lo suficiente como para convertirse en un problema de rendimiento.
Dependiendo de la forma en que esté estructurado su sitio web, puede ser razonable no agrupar todos sus archivos JavaScript, sino agruparlos en varios archivos más pequeños, como un archivo separado para el JavaScript de su blog, otro para el JavaScript del foro, etc.
Otra razón para dividir un gran paquete JS es el almacenamiento en caché. Si lo tiene todo en un solo archivo, cada vez que cambie algo en su código JS, los navegadores y Google tendrán que volver a almacenar todo el paquete. Esto no es excelente tanto para la indexación como para la experiencia del usuario.
En términos de indexación puede ir de dos maneras dependiendo de las tecnologías de almacenamiento en caché utilizadas: obligará a Googlebot a volver a almacenar constantemente su paquete JS o Google puede no darse cuenta a tiempo de que el caché ya no es válido y terminará con Google viendo contenido obsoleto.
Hablando de de usuario mejorada, cada vez que actualiza algún código JS dentro del paquete, los navegadores ya no pueden mostrar copias en caché a ninguno de sus usuarios. Por lo tanto, incluso si solo cambia el código JS para su blog, todos sus usuarios, incluidos aquellos que nunca visitaron su blog, tendrán que esperar a que los navegadores carguen todo el paquete JS para acceder a cualquier página de su sitio web.
Comprimir y minimizar CSS y JavaScript
Para mantener sus archivos JavaScript livianos, querrá comprimirlos y minimizarlos. Ambas prácticas están destinadas a reducir el tamaño de los recursos de su sitio web mediante la edición del código fuente, pero son claramente diferentes.
Compresión es el proceso de reemplazar cadenas repetitivas dentro del código fuente con punteros a la primera instancia de esa cadena. Dado que cualquier código tiene muchas partes repetitivas (piense en cuántas tags your JS contains) and pointers use less space than the initial code, file compression allows to reduce the file size by hasta 70%. Los navegadores no pueden leer el código comprimido, pero siempre que el navegador admita el método de compresión, podrá descomprimir el archivo antes de procesarlo.
Lo mejor de la compresión es que los desarrolladores no necesitan hacerlo manualmente. Todo el trabajo pesado lo realiza el servidor, siempre que esté configurado para comprimir recursos. Por ejemplo, para servidores Apache, algunos se agregan líneas de código al archivo .htaccess para habilitar la compresión.
Minificación es el proceso de eliminar espacios en blanco, puntos y comas no requeridos, líneas innecesarias y comentarios del código fuente. Como resultado, se obtiene un código que no es del todo legible por humanos, pero sigue siendo válido. Los navegadores pueden representar dichos códigos perfectamente bien, e incluso los analizarán y cargarán más rápido que el código sin formato. Los desarrolladores web tendrán que encargarse de la minificación por su cuenta, pero con muchas herramientas dedicadas, no debería ser un problema.
Hablando de reducir el tamaño del archivo, la minificación no te dará el asombroso 70%. Si ya tiene habilitada la compresión en su servidor, minimizar aún más sus recursos puede ayudarlo a reducir su tamaño en un poco más, hasta un 16 %, dependiendo de cómo estén codificados sus recursos. Por esta razón, algunos desarrolladores web creen que la minificación está obsoleta. Sin embargo, cuanto más pequeños sean sus archivos JS. el mejor. Así que una buena práctica es combinar ambos métodos.
Uso de archivos JavaScript externos
Muchos sitios web tienden a utilizar archivos JavaScript externos alojados en dominios de terceros. Reutilizar un código de fuente abierta que resuelve su problema a la perfección puede parecer una gran idea; después de todo, no tiene sentido reinventar la rueda. Realmente no hay nada de malo en usar una solución ya preparada, siempre y cuando se copie y se cargue en el servidor del sitio web. Al mismo tiempo, el uso de archivos JS de terceros alojados externamente está asociado con numerosos riesgos.
En primer lugar, estamos hablando de riesgos de seguridad. Si un sitio web que aloja los archivos que usa es pirateado, puede terminar ejecutando un código malicioso inyectado en el archivo JS externo. Los piratas informáticos pueden robar datos privados de sus usuarios, incluidas sus contraseñas y detalles de tarjetas de crédito.
En cuanto al rendimiento, piense en todos los errores discutidos anteriormente. Si no tiene acceso al servidor donde se alojan los archivos JS, no podrá configurar el almacenamiento en caché, la compresión ni depurar errores 5XX.
Si el sitio web que aloja los archivos en algún momento elimina el archivo y usted no lo nota de manera oportuna, su sitio web no funcionará correctamente y no podrá reemplazar rápidamente un archivo 404 JS con uno válido.
Finalmente, si el sitio web que aloja los archivos JS establece una redirección 3XX a un archivo (ligeramente) diferente, es posible que su página web no se vea y funcione exactamente como se esperaba.
Si utiliza archivos JS de terceros, mi consejo es que los vigile de cerca. Aún así, una solución mucho mejor es no usar JS externo en absoluto.
- Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
- PlatoData.Network Vertical Generativo Ai. Empodérate. Accede Aquí.
- PlatoAiStream. Inteligencia Web3. Conocimiento amplificado. Accede Aquí.
- PlatoESG. Automoción / vehículos eléctricos, Carbón, tecnología limpia, Energía, Ambiente, Solar, Gestión de residuos. Accede Aquí.
- Desplazamientos de bloque. Modernización de la propiedad de compensaciones ambientales. Accede Aquí.
- Fuente: https://seranking.com/blog/css-and-javascript-seo/
