Cómo auditar JavaScript para SEO

Publicado: 2023-03-06

JavaScript está presente en todas partes en la web. Dado que HTML y CSS son estáticos por naturaleza, JavaScript se ha adoptado ampliamente para proporcionar una funcionalidad dinámica en el lado del cliente, que es solo una forma elegante de decir que se descarga y se ejecuta dentro de un navegador.

Las demandas del lenguaje son altas, con innumerables marcos/bibliotecas y otras variaciones, todo en rápido desarrollo. Por lo tanto, es común, y tal vez inevitable, que la tecnología supere regularmente el soporte del motor de búsqueda y, por extensión, las mejores prácticas en el espacio de SEO . javascript en una pantalla Debe tener en cuenta antes de auditar JavaScript que es probable que ocurran problemas comunes y compromisos que tendrá que hacer para satisfacer todas las necesidades.

Hemos dividido nuestro proceso de auditoría de JavaScript en cinco áreas clave, lo que le permite determinar:

  1. Si un sitio depende en gran medida de JavaScript
  2. Si los activos de JavaScript se almacenan en caché o se actualizan correctamente
  3. ¿Qué impacto tiene JavaScript en el rendimiento del sitio?
  4. Si los archivos JavaScript se obtienen de manera correcta y eficiente
  5. Problemas situacionales de JavaScript: enrutamiento de desplazamiento infinito y redireccionamientos

Pero antes de sumergirnos en ello…

Un rápido 101 en la estructura del sitio web

Los sitios web actuales se componen de tres tecnologías principales:

Lenguaje de marcado de hipertexto (HTML)

Esta es la estructura sobre la que descansa todo lo demás, con una jerarquía de elementos que representan todo, desde contenedores genéricos hasta texto, enlaces, medios y metadatos.

Es simple, robusto y enfocado semánticamente para permitir una amplia gama de aplicaciones.

Aunque los navegadores formatearán HTML sin procesar con sensatez, la presentación se maneja mejor con...

Hojas de estilo en cascada (CSS)

Esta es la capa de presentación donde HTML se puede diseñar y reorganizar de varias maneras .

Cualquier elemento HTML se puede orientar, mover, colorear, cambiar de tamaño e incluso animar. En efecto, se trata de la realización del diseño de sitios web .

Sin embargo, con la excepción de algunas características limitadas, permanece estático, lo que nos lleva a...

Javascript (JS)

Esta es la capa dinámica que puede manipular activamente HTML y CSS en respuesta a eventos como la interacción del usuario, el tiempo o los cambios del servidor. Esto abre enormemente lo que se puede lograr en términos de experiencia del usuario .

Cuando visitas un sitio web, tu navegador descarga el archivo HTML y luego lo lee, interpretando y ejecutando cada parte una tras otra. Los activos externos (CSS/JS/media/fuentes) se descargan y los elementos se ensamblan de acuerdo con las directivas e instrucciones asociadas.

Este proceso de reunir los componentes básicos de un sitio web para producir el resultado final se denomina representación . Esto es muy relevante para el SEO porque Google hará algo similar a los navegadores (con algunos pasos de análisis adicionales) y tendrá esto en cuenta al clasificar. En efecto, Google intenta replicar la experiencia del usuario.

¿Cómo maneja Google JavaScript?

Google renderizará JavaScript. En otras palabras, cargará sus activos de JavaScript junto con HTML y CSS para comprender mejor lo que verán los usuarios, pero hay dos consideraciones básicas:

  1. Google quiere utilizar la menor cantidad de recursos posible para rastrear sitios.
  2. Más JavaScript significa que se necesitan más recursos para renderizar.

Debido a estos problemas, el servicio de representación web de Google está orientado a trabajar de la manera más eficiente posible, por lo que adopta las siguientes estrategias:

  • Googlebot siempre representará una página que esté rastreando por primera vez. En este punto, toma una decisión sobre si necesita renderizar esa página en el futuro. Esto afectará la frecuencia con la que se muestra la página en futuros rastreos.
  • Los recursos se analizan para identificar cualquier cosa que no contribuya al contenido esencial de la página. Es posible que estos recursos no se obtengan.
  • Los recursos se almacenan en caché agresivamente para reducir las solicitudes de red, por lo que los recursos actualizados pueden ignorarse inicialmente.
  • El estado no se conserva de una página a la siguiente durante el rastreo (por ejemplo, las cookies no se almacenan, cada página es una visita "nueva").

El punto principal aquí es que, en general, Google tardará más en indexar el contenido que se procesa a través de JavaScript y, en ocasiones, puede perder cosas por completo.

Entonces, ¿cuánto contenido importante se ve afectado? Cuando algo cambia, ¿cuánto tarda en reflejarse en las SERP? Tenga en cuenta preguntas como esta a lo largo de la auditoría.

Una guía de cinco pasos para una auditoría SEO de JavaScript

Todos tendrán su propia forma única de llevar a cabo una auditoría SEO de JavaScript, pero si no está seguro de por dónde empezar o cree que se está perdiendo algunos pasos de su proceso actual, siga leyendo.

1. Comprenda cuán dependiente es un sitio de JavaScript

Inicialmente, es importante determinar si el sitio depende en gran medida de JavaScript y, de ser así, ¿en qué medida? Esto ayudará a determinar qué tan profundo debe ser su análisis posterior.

Esto se puede lograr a través de varios métodos:

  • ¿Qué haría JavaScript?
  • Deshabilite JavaScript localmente a través de Chrome
  • Comprobar manualmente en Chrome
  • Wappalyzer
  • Rana Gritando

¿Qué haría JavaScript (WWJSD)?

Una herramienta proporcionada por Onely que proporciona comparaciones directas y paralelas de una URL mediante la presentación de capturas de pantalla de HTML, metaetiquetas y enlaces, con y sin JavaScript.

¿Qué haría javascript en la página? Considere cuidadosamente si desea verificar el dispositivo móvil o el de escritorio. Aunque generalmente se aplican los principios de primero móvil, JavaScript tiende a usarse más como parte de una experiencia de escritorio. Pero idealmente, si tienes tiempo, ¡prueba ambos!

Pasos para analizar el uso de Javascript en WWJSD:

  1. Visita WWJSD
  2. Elige móvil o escritorio
  3. Introducir URL
  4. Enviar formulario

Deshabilitar localmente a través de Chrome

El navegador Chrome le permite deshabilitar cualquier JavaScript en el lugar y probar directamente:

deshabilitar javascript en chrome Pasos para analizar el uso de JavaScript usando Chrome:

  1. Presione F12 para abrir devtools y seleccione la pestaña Elementos si aún no está abierta
  2. Cmd+Mayús+P (o Ctrl+Mayús+P)
  3. Escriba "deshabilitar" y seleccione *Deshabilitar JavaScript*
  4. Recarga la página
  5. No olvides volver a habilitar

Comprobar manualmente en Chrome

Hay dos formas de verificar el HTML fuente en Chrome, ya que brindan resultados ligeramente diferentes.

La visualización de la fuente mostrará el HTML tal como se recibió inicialmente, mientras que la inspección de la fuentetendrá efecto en los cambios dinámicos: cualquier cosa agregada por JavaScript será evidente.

Fuente de visualización: fuente de visualización Fuente de inspección: fuente de inspección Esto se usa mejor como una forma rápida de verificar un marco de JavaScript completo. La descarga inicial de la fuente será más corta y probablemente perderá la mayor parte del contenido, pero el inspector estará más completo.

Intente buscar en ambos algún texto que sospeche que se carga dinámicamente; el contenido o los encabezados de navegación suelen ser los mejores.

Pasos para analizar manualmente el uso de JavaScript usando Chrome:

 Ver fuente:

  1. Haga clic con el botón derecho en la ventana del navegador
  2. Seleccione Ver fuente

Inspeccionar fuente:

  1. Presiona F12 para abrir herramientas de desarrollo
  2. Seleccione la pestaña Elementos si aún no está abierta

Wappalyzer

Esta es una herramienta que proporciona un desglose de la pila de tecnología detrás de un sitio. Por lo general, hay una buena cantidad de información, pero estamos buscando específicamente marcos de JavaScript:

wappalizador Pasos para usar Wappalyzer para analizar el uso de JavaScript

  1. Instale la extensión de Chrome Wappalyzer
  2. Visite el sitio que desea inspeccionar
  3. Haga clic en el icono de Wappalyzer y revise la salida

️ ¡Tenga en cuenta que el hecho de que algo no esté en la lista aquí no confirma al 100 % que no se esté utilizando!

Wappalyzer se basa en la toma de huellas dactilares para identificar un marco. Es decir, encontrar identificadores y patrones exclusivos de ese marco.

Si se ha hecho algún esfuerzo para cambiarlos, Wappalyzer no identificará el marco. Hay otras formas de confirmar esto que están más allá del alcance de este documento. Pregúntale a un desarrollador

Rana Gritando

Esta es una inmersión profunda en la verificación de visibilidad de JavaScript. Con el renderizado de JavaScript habilitado , Screaming Frog puede proporcionar un desglose completo del impacto de JavaScript en un sitio rastreado, incluido el contenido renderizado/la cobertura de enlaces y los posibles problemas. rana gritando Pasos para usar Screaming Frog para analizar problemas de Javascript:

  1. Dirígete al menú Configuración
  2. Selecciona *Araña*
  3. Seleccione la pestaña Representación
  4. Elija JavaScript del menú desplegable
  5. (opcional) Reduzca el tiempo de espera de AJAX y desmarque para mejorar el rendimiento del rastreo si tiene problemas

2.Usar una actualización de caché forzada

El almacenamiento en caché es un proceso que permite que los sitios web se carguen de manera más eficiente. Cuando visita inicialmente una URL, todos los activos necesarios se almacenan en varios lugares, como su navegador o servidor de alojamiento. Esto significa que en lugar de reconstruir las páginas desde cero en cada visita, la última versión conocida de una página se almacena para visitas posteriores más rápidas.

Cuando se actualiza un archivo JavaScript, no desea que se utilice la versión almacenada en caché. Google también almacena en caché de manera bastante agresiva, por lo que esto es particularmente importante para garantizar que se muestre la versión más actualizada de su sitio web.

Hay algunas formas de lidiar con esto, como agregar una fecha de caducidad al archivo en caché, pero generalmente la mejor solución "a pedido" es usar una actualización de caché forzada .

El principio es simple: supongamos que tiene un archivo JavaScript llamado 'main.js' que contiene la mayor parte del JavaScript para el sitio. Si este archivo se almacena en caché, Google usará esa versión e ignorará cualquier actualización; en el mejor de los casos, la página renderizada estará desactualizada; en el peor de los casos, se romperá.

La mejor práctica es cambiar el nombre del archivo para distinguirlo de la versión anterior. Esto generalmente implica algún tipo de número de versión o generar un código mediante la huella digital del archivo.

Para conseguirlo, existen dos estrategias:

  1. Un par de archivos con la marca de tiempo "Última actualización" adjunta como una variable de URL.
  2. Un código único que se usa en el nombre del archivo en sí mismo: 'filename.code.js' es un patrón común como el siguiente:

cambiar el nombre del archivo para evitar el almacenamiento en caché Pasos a seguir:

  1. Presiona F12 para cargar Chrome devtools
  2. Vaya a la pestaña 'Red'
  3. Aplicar filtros
    • En el campo *Filtro*, filtre el dominio principal así: `dominio:*.sitioweb.com`
    • Haga clic en el filtro JS para excluir archivos que no sean JS
  4. Revise la lista de archivos y evalúe; busque ayuda del desarrollador si es necesario

️ Aunque los archivos JavaScript relevantes normalmente se encuentran en el dominio principal, en algunos casos pueden estar alojados externamente, como en una red de entrega de contenido (CDN).

En los sitios alojados en WP Engine, es posible que deba filtrar por '*.wpenginepowered.com' en lugar del dominio principal, según el ejemplo anterior. No hay reglas estrictas y rápidas aquí: revise los dominios en la lista JS (sin filtrar) y use su mejor criterio. Un ejemplo de lo que podrías ver es: ejemplo de lista de dominios al filtrar por '*.wpenginepowered.com Si la columna Dominio no está visible, haga clic con el botón derecho en un encabezado de columna existente y seleccione Dominio.

3. Identifique qué impacto tiene JS en el rendimiento del sitio

Cuando se trata del rendimiento del sitio, hay algunas cosas a tener en cuenta.

Tiempo de procesamiento

Esto se vincula con Core Web Vitals (CWV), algunos de los cuales están representados en la visualización de tiempos a continuación, que analiza métricas como el mayor dolor de contenido (LCP), el cambio de diseño acumulativo (CLS) y el retraso de la primera entrada (FID).

Específicamente, le interesan los tiempos de carga y secuencias de comandos en el resumen. Si estos son excesivos, posiblemente sea un signo de scripts grandes y/o ineficientes.

La vista en cascada también proporciona una visualización útil del impacto que tiene cada CWV, así como otros componentes del sitio. vista de cascada de CWV Pasos:

  1. Presiona F12 para abrir Chrome devtools
  2. Vaya a la pestaña 'Rendimiento'
  3. Haga clic en el botón Actualizar en el panel
  4. Revise la pestaña Resumen (o Bottom Up si desea profundizar)

Compresión

Esta es una verificación simple pero importante; asegura que los archivos se sirvan de manera eficiente.

Un host configurado correctamente comprimirá los activos del sitio para que los navegadores puedan descargarlos lo más rápido posible. La velocidad de la red suele ser el cuello de botella más importante (y variable) del tiempo de carga del sitio. tiempo de carga de CWV Pasos:

  1. Presiona F12 para abrir Chrome devtools
  2. Vaya a la pestaña 'Red'
  3. Aplicar filtros
  4. En el campo 'Filtro', filtre el dominio principal de la siguiente manera: `dominio:*.sitioweb.com`
  5. Haga clic en el filtro JS para excluir archivos que no sean JS
  6. Revise el contenido de la columna "Codificación de contenido". Si dice 'gzip', 'compress', 'deflate' o 'br', se está aplicando la compresión.

️ Si la columna de codificación de contenido no está visible:

  1. Haga clic derecho en una columna existente
  2. Coloca el cursor sobre "Encabezados de respuesta"
  3. Haga clic en 'Codificación de contenido'
  4. Cobertura

Un aumento en los marcos de activos repletos de funciones (por ejemplo, Bootstrap, Foundation o Tailwind) hace que el desarrollo sea más rápido, pero también puede conducir a grandes porciones de JavaScript que en realidad no se utilizan.

Esta comprobación ayuda a visualizar cuánto de cada archivo no se está utilizando realmente en la URL actual.

️ ¡Tenga en cuenta que JavaScript no utilizado en una página puede usarse en otras!Esto está destinado principalmente a fines de orientación, lo que indica una oportunidad de optimización. comprobar si hay javascript no utilizado Pasos:

  1. Presiona F12 para abrir Chrome devtools
  2. Cmd+Mayús+P (o Ctrl+Mayús+P)
  3. Haga clic en 'Mostrar cobertura'
  4. Haga clic en el botón Actualizar en el panel
  5. Aplicar filtros
    • En el campo *Filtro*, filtre por el dominio principal. No hay comodines aquí; 'sitioweb.com' servirá.
    • Seleccione JavaScript del menú desplegable junto a la entrada del filtro

Minificación

Inicialmente, JavaScript está escrito de una manera legible por humanos, con formato y términos que son fáciles de razonar. A las computadoras no les importa esto: interpretan un archivo completo como una sola línea de código y no les importa cómo se llamen las cosas, siempre que se haga referencia a ellas de manera consistente.

Por lo tanto, es bueno reducir los archivos al tamaño más pequeño posible. Esto se llama minificación y es una práctica común, pero aún así se pierde ocasionalmente.

Detectar las diferencias es trivial: archivo minimizado ^ Minificado = ¡bien! archivo no minimizado ^ No minimizado = ¡no es bueno!

️ Esto se aplica principalmente a los sitios en PRODUCCIÓN.Los sitios en desarrollo/prueba tienden a tener archivos sin minimizar para que los errores sean más fáciles de encontrar.

Pasos:

  1. Presiona F12 para abrir Chrome devtools
  2. Vaya a la pestaña 'Red'
  3. Aplicar filtros
    • En el campo 'Filtro', filtre por el dominio principal así: dominio:*.sitioweb.com
    • Haga clic en el filtro JS para excluir archivos que no sean JS
  4. Revisa cada archivo
    • Haga clic en el nombre del archivo
    • Vaya a la pestaña 'Respuesta' en el panel que aparece

Agrupación

Se pueden agrupar varios archivos JavaScript en menos archivos (¡o uno solo!) para reducir la cantidad de solicitudes de red. Esencialmente, cuantos más archivos JavaScript se extraigan del dominio principal, es menos probable que se utilice este enfoque.

Esto no es realmente un factor decisivo la mayor parte del tiempo, pero cuanto más grave sea la cantidad de archivos JavaScript separados, más tiempo se puede ahorrar al agruparlos.

Tenga en cuenta que WordPress, en particular, alienta a que los complementos carguen los archivos cuando sea necesario, lo que puede resultar en que algunas páginas carguen muchos archivos JavaScript y otras muy pocos. Así que esto es más un ejercicio de oportunidad que otra cosa.

Pasos:

  1. Repita los pasos 1-3 de minificación
  2. Tenga en cuenta cuántos archivos hay presentes: de uno a tres generalmente es una buena señal

4. Comprenda si los archivos JavaScript se obtienen de manera correcta y eficiente

Hay un par de cosas para echar un vistazo.

Recurso bloqueado por robots.txt

Google no recuperará los archivos JavaScript bloqueados en robots.txt cuando renderice un sitio, lo que podría provocar que el renderizado se interrumpa o que falten datos.

Asegúrese de verificar que no se esté bloqueando JavaScript en robots.txt.

Carga de guiones

Cuando se incluyen archivos JavaScript en una página, el orden de carga es importante.

Si se recuperan demasiados archivos antes del contenido para el usuario, pasará más tiempo antes de que un usuario vea el sitio, lo que afectará la usabilidad y aumentará la tasa de rebote. Una estrategia eficiente de carga de scripts ayudará a minimizar el tiempo de carga de un sitio.

  • Método directo: <script src=”file.js”>

El método directo cargará el archivo allí mismo. El archivo se obtiene, descarga o recupera de la memoria caché (aquí es cuando aparece en la pestaña 'Red' de devtools), y luego se analiza y ejecuta antes de que el navegador continúe cargando la página.

  • Método asincrónico: <script async src=”file.js”>

El método asíncrono obtendrá el archivo de forma asíncrona. Esto significa que comenzará a descargar/recuperar el archivo en segundo plano e inmediatamente continuará cargando la página. Estos scripts se ejecutarán solo cuando el resto de la página haya terminado de cargarse.

  • Método diferido: <script defer src=”file.js”>

El método diferido obtendrá el archivo de forma asíncrona como con el método asíncrono, pero ejecutará esos scripts inmediatamente cuando se hayan obtenido, incluso si la página no ha terminado de cargarse.

Entonces, ¿cuál de estos métodos es el mejor?

Respuesta SEO clásica, depende. Idealmente, cualquier secuencia de comandos que pueda ser asincrónica/diferida debería serlo. Los desarrolladores pueden determinar cuál es el más adecuado según lo que haga el código, y se les puede persuadir para que desglosen aún más los scripts para que puedan manejarse de manera más eficiente de una forma u otra.

Ambos tipos generalmente se pueden colocar en el área principal <head> del HTML, ya que no retrasan la carga del contenido. La carga a través del método directo a veces es inevitable, pero por regla general debe ocurrir al final del contenido de la página, antes de la etiqueta de cierre </body>. Esto asegura que el contenido de la página principal haya sido entregado al usuario antes de cargar/ejecutar cualquier script. Nuevamente, esto no siempre es posible (o deseable), pero es algo a tener en cuenta.

Revisar el impacto del script de terceros

Los sitios a menudo extraerán scripts de terceros para una variedad de propósitos, más comúnmente esto incluye recursos de análisis y anuncios. El punto conflictivo es que estos a menudo cargan sus propios scripts adicionales, que a su vez pueden cargar más. En principio, esto se puede revisar a través de los datos de la red de devtools, pero la imagen completa puede ser difícil de comprender.

Afortunadamente, hay una herramienta útil que puede mapear visualmente las dependencias para brindar información sobre lo que se está cargando y desde dónde: herramienta que muestra las dependencias El objetivo aquí es establecer qué se está cargando y detectar oportunidades para reducir la cantidad de scripts de terceros donde son redundantes, ya no se usan o no son adecuados en general.

Pasos:

  1. Visite WebPagetest
  2. Asegúrese de que la prueba 'Rendimiento del sitio' esté seleccionada
  3. Ingrese la URL y haga clic en 'Iniciar prueba'
  4. En la página de resumen de resultados, busque el menú desplegable 'Ver'
  5. Elija 'Solicitar mapa'

5. Sea consciente de los problemas situacionales de JavaScript

Marcos JS

Sin duda habrá encontrado uno o más de los populares marcos de JavaScript dando vueltas: React, Vue y Angular son ejemplos destacados.

Por lo general, se basan en JavaScript para crear un sitio web, ya sea en parte o en su totalidad, en el navegador, en lugar de descargar páginas ya creadas.

Aunque esto puede ser beneficioso en términos de rendimiento y mantenimiento, también causa dolores de cabeza para el SEO, siendo la queja más típica que significa más trabajo para Google para renderizar completamente cada página. Esto retrasa la indexación, a veces considerablemente. Muchos en la comunidad de SEO toman esto como "JavaScript = malo" y desaconsejarán el uso de marcos. Podría decirse que este es un caso de tirar al bebé con el agua del baño.

Una alternativa muy viable es utilizar un servicio como Prerender . Esto representará y almacenará en caché su sitio para los rastreadores de los motores de búsqueda, de modo que cuando visiten su sitio vean una representación actualizada y completa del mismo, lo que garantiza una indexación rápida.

Scroll infinito

El desplazamiento infinito tiende a ser inestable y no tan sólido como la paginación , pero hay formas correctas e incorrectas de hacerlo.

Verifique cualquier URL que pueda presentar paginación, como blogs y categorías, y busque paginación. Si en su lugar se utiliza el desplazamiento infinito, controle la barra de URL mientras se desplaza por cada lote de resultados: ¿se actualiza la URL para reflejar la 'página' a medida que se desplaza?

Si es así, esto es lo suficientemente bueno para Google y debe rastrearse correctamente.

Si no, esto debería ser arreglado por los desarrolladores.

Lo ideal es que las actualizaciones de URL se implementen de forma "limpia", como ?page=2 o /page/2. Hay formas de hacerlo con un hash (como #página-2), pero Google no rastreará esto actualmente.

Enrutamiento

Si se está utilizando un marco de JavaScript (p. ej., React, Vue, Angular), consulte con Wappalyzer . Hay un par de URL que es probable que veas:

  • https://www.website.com/pretty/standard/route
  • https://www.website.com/#/wait/what/is/this
  • https://www.website.com/#!/again/what

El hash en el segundo y tercer ejemplo puede ser generado por marcos de JavaScript. Está bien para navegar, pero Google no podrá rastrearlos correctamente.

Por lo tanto, si detecta # (o alguna variación de esto) que precede a segmentos de URL que de otro modo se verían "correctos", vale la pena sugerir un cambio a un formato de URL sin hash.

Redirecciones

Las redirecciones de JavaScript deben evitarse en general. Aunque serán reconocidos por los motores de búsqueda, requieren representación para funcionar y, como tales, no son óptimos para SEO.

Puede verificarlos ejecutando un rastreo de Screaming Frog con la representación de JavaScript habilitada y revisando los redireccionamientos de JS en la pestaña/filtro de JS.

Puede haber casos en los que alguna función específica impulsada por JS requiera una redirección de JS. Mientras estas sean la excepción y no la regla, está bien.

Conclusión

Javascript puede plantear problemas para SEO, pero estos pueden minimizarse al comprender y auditar cuidadosamente las áreas problemáticas potenciales clave:

1) Qué tan dependiente es un sitio en JavaScript

2) Si los activos de JavaScript se almacenan en caché o se actualizan correctamente

3) ¿Qué impacto tiene JavaScript en el rendimiento del sitio?

4) Si los archivos JavaScript se obtienen de manera correcta y eficiente

5) Problemas situacionales de JavaScript, como enrutamiento de desplazamiento infinito y redirecciones

Si tiene alguna pregunta sobre la auditoría de JavaScript o el SEO, no dude en comunicarse con nosotros ; estaremos encantados de conversar.