Javascript personalizado

Visión de la nueva función Javascript personalizada de Screaming Frog

Configuración JS personalizada

El JavaScript personalizado es una nueva función de Screaming Frog en su versión 20 y permite ejecutar código JavaScript en cada URL analizada con el SEO Spider.
Mediante esta funcionalidad, es posible extraer todo tipo de información útil de una página web que podría no estar ya disponible en Spider SEO, así como comunicarse con API como ChatGPT de OpenAI, LLM local u otras bibliotecas.

> > Para configurar Seo Spider con esta funcionalidad, simplemente haz clic en “Configurar JavaScript personalizado”. A continuación, simplemente haz clic en “Añadir” para empezar a configurar un nuevo fragmento, o en “Añadir desde la biblioteca” para elegir un fragmento existente preconfigurado por el personal de Screaming Frog.

Custom Javascript con Screaming Frog

La biblioteca incluye fragmentos de muestra para realizar diversas funciones y son una verdadera fuente de inspiración para realizar análisis cada vez más granulares y exhaustivos:

  • Análisis del sentimiento, la intención de búsqueda o el idioma del contenido de la página.
  • Generación de texto alternativo para las imágenes.
  • Activación de los eventos mouseover.
  • Desplazamiento de una página (para analizar algunas configuraciones con desplazamiento infinito).
  • Extraer contenido “incrustado” del contenido de la página.
  • Descargar y guardar localmente diversos contenidos, como imágenes.

La biblioteca es absolutamente estupenda para empezar a manipular JS y, revisándolos, personalizarlos de forma única para tu proyecto.

Finestra di debug per la JS personalizzata

Esta función también permite establecer un filtro de tipo de contenido, que permitirá que el fragmento de JavaScript personalizado realice la acción sólo para determinados tipos de contenido y no desperdicie la API de OpenAi.

Los resultados estarán disponibles en la pestaña personalizada de JavaScript.

Nuova tab javascript personalizzata di Screaming Frog

Para utilizar la API OpenAi tendrás que comprar créditos, no es suficiente con utilizar la versión Gratuita de Chat GPT.

Tipo de fragmento

Analizando los fragmentos, observamos que hay 2 tipos: Extracciones y Acciones.

Fragmentos de extracción

Los fragmentos del tipo Extracción devuelven un valor o una lista de valores (números o cadenas) mostrando el “Valor” como columnas en la pestaña“JavaScript personalizado“.
Cada valor de una lista de valores se asignará a las columnas de la ficha.
Al procesar estos fragmentos, la página dejará de cargar todos los recursos y empezará a ejecutarlos.

La Araña SEO no completará el análisis de la página hasta que se complete el fragmento. En algunos casos, los fragmentos demasiado largos pueden caducar (timeout) y no se completará el rastreo de la página.
Este tipo de fragmento permite descargar las URL y escribirlas en un archivo de texto. Hay fragmentos disponibles en la biblioteca que te permiten descargar todas las imágenes de una página web y añadir atributos a un archivo CSV.

Fragmentos de acción

Los fragmentos de tipo Acción no devuelven datos, sino que sólo ejecutan acciones. Por ejemplo, hay un fragmento que simula el desplazamiento de una página permitiendo el análisis de imágenes de carga perezosa.
La principal diferencia con los “Fragmentos de extracción” radica en que cuando se ejecutan, la página seguirá cargando recursos.

Sin embargo, tendrás que especificar un valor de tiempo de espera en segundos para este procesamiento, y cuando éste expire, la Araña SEO completará su análisis de la página.

Fragmentos de comportamiento

  • El Seo Spider permite ejecutar varios fragmentos simultáneamente. Sin embargo, es importante ser consciente de que la velocidad de exploración se verá afectada por el número y el tipo de fragmentos que ejecutes. Después de depurarlo estos días, noto cómo demasiadas peticiones simultáneas hacen que Screaming Frog se “cuelgue”. A modo de prueba, empecé con unos diez.
  • En el caso de varios fragmentos, las “Acciones” se ejecutan antes que las “Extracciones”.
  • En el caso de fragmentos de Acción con diferentes valores de tiempo de espera, Screaming Frog utilizará el valor máximo de tiempo de espera configurado entre los diferentes fragmentos.
  • Los Fragmentos de Extracción interrumpen todas las cargas de página, por lo que no se realizarán más peticiones. La “Acción” no tiene esta limitación, pero debe establecerse un valor de tiempo de espera.
  • Los fragmentos tienen acceso a la API de utilidades de la consola de Chrome. Esto le permite utilizar métodos como getEventListeners(), a los que no puede acceder el procesamiento normal de JavaScript en una página web.

API de Extracción de Fragmentos

Los Fragmentos de Extracción interactúan con la Araña Seo utilizando el objeto seoSpider, que es una instancia de la clase SEOSpider documentada a continuación. En su forma más básica, se utiliza como sigue:

Copy to Clipboard

También puedes enviar datos a la Araña SEO con una“Promesa“. La Araña SEO espera su finalización. Esto te permite realizar trabajos asíncronos, como peticiones de obtención, antes de devolver los datos a la araña SEO. Por ejemplo:

Copy to Clipboard

Como en todos los ejemplos que acabamos de mencionar, hay que llamar a la instrucción “return” para terminar la ejecución de la función. Esto se debe a que todo el código del fragmento está implícitamente envuelto por la Araña SEO en una expresión de función inmediatamente invocada (IIFE). Este escenario es necesario para evitar conflictos en el “espacio de nombres global de JavaScript” al ejecutar fragmentos. Si no lo haces, la Araña SEO no podrá recibir ningún dato.

El siguiente ejemplo muestra cómo tu fragmento de código JavaScript se incluye implícitamente en un IIFE. También muestra cómo se crea la instancia de seoSpider para ti justo antes de introducir tu código.

Copy to Clipboard

API de Extracción de Fragmentos

Esta clase proporciona métodos para enviar datos a la Araña SEO. Recuerda: no llames ‘new’ a esta clase, porque ya se te proporciona una instancia llamada seoSpider.

Copy to Clipboard

Devuelve los datos proporcionados a la Araña SEO para que se muestren en la pestaña personalizada de JavaScript. El parámetro “fecha” puede ser una cadena o un número, o una lista de cadenas o números. Si “fecha” representa una lista, cada elemento de la lista se mostrará en una columna independiente de la pestaña.

Copy to Clipboard
Copy to Clipboard

Devuelve cualquier mensaje de error a la Araña SEO. Estos mensajes aparecerán en una columna de la pestaña JS personalizada. El resultado será una cadena.

Copy to Clipboard

El siguiente método comprende saveText(text, saveFilePath, shouldAppend)

Copy to Clipboard

{Promise}Siguiente método loadScript(src) → .Tipo: Cadena
Carga los scripts externos que utilizará el fragmento. El script se carga de forma asíncrona. Escribe tu código dentro de la cláusula “entonces”, como se muestra en el ejemplo siguiente.

Copy to Clipboard

Compartir fragmentos

Los fragmentos se guardarán en tu biblioteca de usuario, y luego podrás exportar/importar la biblioteca como JSON para compartirla muy fácilmente.

Come condividere lo snippet JS creato con screaming frog in formato json con i colleghi
Ficha Seo Spider