JS SEO: cómo optimizar JavaScript para una clasificación alta en los resultados de búsqueda

JavaScript es un lenguaje de secuencias de comandos desarrollado por Sun Microsystems. JavaScript es ahora un lenguaje de programación estándar que se utiliza en los navegadores web para crear páginas web interactivas. JavaScript se usa más comúnmente para agregar interactividad a los sitios web. A menudo está incrustado en documentos HTML para proporcionar un comportamiento dinámico, como cambiar el contenido (por ejemplo, texto) que se muestra en una página de sitio web en función de las acciones del usuario.

La primera versión de JavaScript se lanzó en 1995 y se llamó LiveScript. En 1997 Netscape introdujo su propia implementación de JavaScript llamada JavaScript 1.0. Desde entonces, JavaScript se ha adoptado ampliamente y ahora es un estándar de facto para las secuencias de comandos del lado del cliente.

El SEO es una parte importante de cualquier sitio web y es una buena idea optimizar su JavaScript para obtener una clasificación alta en los resultados de búsqueda. Puede hacer esto minimizando su JavaScript, aplazando su carga, reduciendo la cantidad de solicitudes HTTP, eliminando etiquetas de secuencias de comandos innecesarias de la página (y de archivos individuales) y consolidando archivos en un solo archivo si son lo suficientemente pequeños para hacerlo. y más.

Minificar JS y CSS.

Minificar su JS y CSS es una buena manera de deshacerse de esos bytes adicionales. Esto se puede hacer con un minificador, que eliminará los caracteres innecesarios de su código fuente sin afectar su funcionalidad.

El proceso de minificación funciona eliminando los espacios en blanco y los comentarios, así como acortando los nombres de las variables siempre que sea posible. Por ejemplo:

 var $div = document.getElementById("myDiv");

 var v_d__e___ = document .getElementById( "m_i_d" );

Es importante tener en cuenta que el proceso no cambia la funcionalidad de su código; de hecho, aún podría ejecutar esta versión a través de un intérprete si fuera necesario (aunque no lo recomendaríamos).

Aplazar la carga de JavaScript

En el código HTML, puede usar la propiedad diferida de la etiqueta para indicarle al navegador que cargue su secuencia de comandos de forma asincrónica. Esto es útil para secuencias de comandos que no son fundamentales para la representación inicial de una página, sino que la mejoran con funciones y características adicionales.

Aplazar estos scripts permite que se carguen fuera de la prioridad de descarga normal, por lo que no bloquean la visualización del contenido de inmediato. Sin embargo, si intenta utilizar este método para los principales scripts que necesitan todas sus funciones de inmediato, como el menú de navegación principal de su sitio, no funcionará correctamente porque requieren tiempos de carga rápidos.

La desventaja de implementar el aplazamiento es que no es compatible con todos los navegadores; solo funciona en Firefox 3+ (y posteriores), Internet Explorer 10+ (y posteriores), Safari 5+ y Chrome 14+.

Reducir el número de solicitudes HTTP

Una forma de reducir la cantidad de solicitudes HTTP es combinar todos sus archivos CSS y JavaScript en un solo archivo. Si tiene más de unas pocas líneas de código, esto puede ser de gran ayuda para reducir el peso de su página. Sin embargo, si tiene muchos archivos pequeños, combinarlos en un archivo grande puede no ser una opción para usted porque requerirá más tiempo para que el navegador del usuario los descargue todos a la vez.

Eliminar JavaScript, CSS y HTML innecesarios

Afortunadamente, no necesita ser un programador experto para optimizar su JavaScript para la búsqueda. Solo tienes que seguir unas sencillas reglas:

1. Eliminar CSS no utilizado.
2. Eliminar HTML no utilizado.
3. Eliminar JavaScript no utilizado.
4. Elimine los comentarios y espacios en blanco innecesarios del código (p. ej., “//” o “/* */”).
5. Elimine los saltos de línea, puntos y comas, paréntesis, llaves y comas innecesarios en el archivo JavaScript para que no rompan nada más en su proyecto cuando se minimice con herramientas como Google Closure Compiler o UglifyJS 2 en servidores de compilación como el servidor Jenkins CI o TravisCI. servidor/etc…

Consolidar archivos.

Es una buena idea consolidar sus archivos JavaScript en un solo archivo. Esto se puede hacer con un sistema de compilación como Grunt o Gulp, que le permite usar funciones como concatenación y minificación. Si no desea aprender acerca de la construcción de sistemas, hay muchos servicios que automáticamente lo harán por usted.

Una de las formas más fáciles es usar Cloudflare (plan gratuito disponible). Simplemente cargue todos sus archivos a través de su interfaz, luego use la opción "minificar" en su pestaña Configuración.

Le darán una URL personalizada para cada archivo en sus servidores, que luego minimiza todos esos archivos antes de enviarlos de vuelta al navegador de su visitante. Esto lo hace mucho más rápido para ellos porque solo tienen una solicitud de Cloudflare en lugar de múltiples solicitudes de diferentes dominios en la web.

Otra opción es JSPACK (de pago), que es similar pero ofrece más funciones y control sobre la cantidad exacta de código que se comprime/elimina para lograr mejores resultados de rendimiento de optimización que los que otras herramientas de compresión proporcionarían de forma predeterminada debido a necesidades específicas específicas en situaciones en las que algunas aplicaciones pueden requerir acceso a ciertas piezas de datos contenidas en archivos JavaScript contenidos dentro de una estructura de directorio específica ubicada en otro lugar completamente a través de Internet...

Además, se pueden crear y colocar un logotipo personalizado y gráficos personalizados dentro de su sitio web/aplicación HTML5 para darle ese toque extra de dinamismo que garantizará que la gente lo recuerde.

¡Título y descripción!

Las páginas escritas en JavaScript deben tener muchas de las mismas metaetiquetas de SEO que las páginas escritas en HTML y CSS. Tanto el título como la descripción son componentes esenciales de una estrategia de SEO efectiva para metaetiquetas.

Los navegadores web mostrarán el metaelemento SEO del título, y los motores de búsqueda normalmente utilizarán esta información para construir títulos para las páginas que han indexado. Aunque no se muestra en los navegadores web, los motores de búsqueda pueden utilizar el metaelemento de descripción SEO para generar fragmentos de texto o descripciones para las páginas que se han indexado.

No hay problema con definir el título y la descripción de las metaetiquetas SEO usando JavaScript, ya que es un método perfectamente válido.

Según Google, incluso es posible emplear JavaScript para modificar ambas metaetiquetas de SEO. La conclusión es que el título y la descripción meta meta SEO deben incluirse en todas y cada una de las páginas, incluidas aquellas que se escribieron principalmente en JavaScript.

Deshágase de los estilos de codificación de coma primero y similares.

Primero, eliminemos esto del camino: detenga los estilos de codificación de coma primero. Son una reliquia de los viejos tiempos cuando podías usar comas en JavaScript para alinear declaraciones de variables y listas de parámetros. ¡Esto ya no es válido y nunca debería haber sido legal en primer lugar!

Entonces, ¿cómo sabes si tu código está usando este estilo? Es fácil saberlo: simplemente busque varias declaraciones en la misma línea separadas por comas (o espacios en blanco). Vea un ejemplo a continuación:

 var x = 1; var y = 2; var z = 3;

Si su JavaScript se ve así, o peor aún, si tiene líneas en blanco entre cada declaración, ¡necesita un trabajo serio! Afortunadamente, solucionar estos problemas no es demasiado difícil una vez que sabe qué son y dónde buscarlos.

Cargue JavaScript desde la parte inferior del cuerpo (o pie de página).

Recuerda que JavaScript debe cargarse desde la parte inferior del cuerpo (o pie de página) y CSS desde la parte superior.

Esto se debe a que los motores de búsqueda rastrearán sus páginas web comenzando en la parte superior y avanzando hacia abajo, por lo que tienden a ignorar todo lo que ven después de haber llegado a algo como archivos JavaScript o CSS.

No tiene que preocuparse por esto si está utilizando técnicas de carga asincrónica como Ajax o secuencias de comandos diferidas, ya que estos métodos cargan archivos en paralelo pero aún permiten la indexación.

Ponga CSS en la parte superior y JavaScript en la parte inferior.

Una de las formas más fáciles de optimizar su página para los motores de búsqueda es colocar CSS en la parte superior y JavaScript en la parte inferior. Esto se debe a que los navegadores cargarán CSS antes que JavaScript. Para hacer esto, puede agregar una etiqueta a su archivo de índice que apunte a su hoja de estilo y luego agregar otra etiqueta que haga referencia a su archivo JavaScript.

La razón por la que esto es importante es que si alguien tiene JS deshabilitado en su navegador, no podrá usar el sitio a menos que esté codificado correctamente, ¡lo que significa poner CSS primero!

Comprimir componentes con gzip.

Gzip es un algoritmo de compresión que reduce el tamaño de los archivos. Se puede usar tanto en JavaScript como en CSS, por lo que puede usarlo para todos los componentes que está usando.

Debe comprimir su código antes de cargarlo en la CDN o en el proveedor de alojamiento. La reducción de Gzip significa que no tendrás que descargar más bytes de los necesarios cuando un usuario accede a tu página.

La compatibilidad con Gzip está disponible en todos los navegadores modernos, por lo que vale la pena agregar gzip en ambos extremos: del lado del navegador y del lado del servidor (NodeJS).

Para comprimir su contenido, debe usar la compresión basada en gzip. Puede utilizar esta herramienta para comprobar si los archivos se han comprimido correctamente.

Evite las expresiones CSS.

Las expresiones CSS son una característica introducida en CSS3 que le permite usar JavaScript dentro de sus hojas de estilo. Puede usarlos para cambiar dinámicamente el valor de una propiedad o incluso iterar sobre una matriz de valores.

Pero he aquí por qué no debería usar expresiones CSS: son difíciles de optimizar y dificultan que los navegadores almacenen en caché su hoja de estilo (lo cual es malo). Además, pueden provocar un comportamiento inesperado en navegadores antiguos que no los admitan. ¡Así que evita usarlos a toda costa!

Ultimas palabras

Usar JavaScript de una manera que se optimice para la búsqueda es una excelente manera de obtener una clasificación alta en los resultados de búsqueda. Sin embargo, es importante recordar que no todos los usuarios tienen habilitado JavaScript o la misma cantidad de ancho de banda disponible cuando navegan por su sitio.

Estas limitaciones pueden afectar el rendimiento de su sitio web en las clasificaciones de búsqueda si no se tienen en cuenta al optimizar el contenido de JavaScript para fines de SEO, como cualquier otro tipo de contenido en su sitio sería tratado por el algoritmo de Google.