Cómo crear un Custom JS para Screaming Frog

La función de Custom JavaScript es una de las principales novedades de la última versión de Screaming Frog (20), lanzada en mayo de 2024. Con ella podemos ejecutar JS, para extraer datos y realizar acciones sobre las URLs que va rastreando el bot, tales como generar texto o metas para cada URL con la API de OpenAI, o hacer scroll dentro la página.

En este tutorial te voy a explicar cómo extraer el contenido principal de cada página. Es decir, cómo extraer la parte importante de texto o main content de una URL, excluyendo menús, barras laterales, footer, anuncios, etc.

Qué es Readability.js y para qué podemos usarla

Readability.js es una librería de JavaScript usada en el Reader View de Firefox, una función de este navegador para poder leer sin distracciones, similar a la que tiene también Chrome.

Readability puede extraer o bien todo el HTML de una URL, o sólo su contenido de texto, y además puede ofrecerte datos como un resumen breve del contenido (excerpt), el autor, el tiempo estimado de lectura o el grado de legibilidad del texto.

Como estoy buscando métodos ágiles de extraer embeddings de las URLs de un sitio, pero no quiero que esos embeddings estén “contaminados” por partes de la página que pueden ser irrelevantes, como los menús y sobre todo sidebars y footers, me pareció una librería muy interesante para estrenarme creando mi primer Custom JS, cosa que me ha resultado super sencilla.

¿Y no es esto algo que siempre se ha podido hacer con Screaming Frog? Bueno, que yo sepa nunca ha habido un campo por defecto para extraer el contenido principal de cualquier página, ya que esto puede variar mucho según cada sitio web, y por eso es necesario recurrir a una librería que ya se encarga de lidiar con ese problema.

Si lo querías hacer para una web concreta, siempre has podido hacerlo por medio de la función de Custom Extraction, que te permitía indicarle al crawler dónde exactamente estaba el contenido que te interesaba.

Pero claro, eso era para una sola web, y a lo mejor ya no te servía para la siguiente. Con Readibility.js lo que vamos a tener es un método que va a servir, sin tocar nada, para una buena proporción de sitios web.

Vamos a ver cómo hacerlo, y así podrás usar este mismo snippet de Custom JavaScript, o crear el tuyo propio. 

Cómo crear tu propio Custom JS para Screaming Frog

En Screaming Frog, ve a Configuración > Custom > Custom JavaScript

Dale a crear y te aparecerá una fila con varios campos para rellenar.

En el primer campo, pon el nombre de tu Custom JS.

Como explica la documentación de Screaming Frog, hay dos tipos de Custom JS: de extracción y de acción. El que necesitamos en este caso es de extracción, ya que vamos a extraer datos de las URLs que rastreemos, y eso es lo que debemos elegir en el desplegable (segundo campo).

text/html: este campo especifica en qué tipo de URLs se va a ejecutar tu Custom JS. Déjalo así si sólo quieres ejecutarlo en las páginas HTML.

Por último, en el siguiente campo vamos a poner el código de JS que Screaming Frog debe ejecutar. Dale a las flechitas para que se abra el editor de snippets.

En este caso, necesitamos decirle dónde está nuestra librería, después debemos pedirle que analice la URL actual y debemos darle una acción a ejecutar (extraer el “text content”). El código final quedará así:

// Define the URL for the Readability.js library
const readabilityJsUrl = "https://cdnjs.cloudflare.com/ajax/libs/readability/0.4.4/Readability.js";

// Load the Readability.js library
return seoSpider.loadScript(readabilityJsUrl)
    .then(() => {
        try {
            // Create a clone of the document to avoid modifications to the original DOM
            const documentClone = document.cloneNode(true);

            // Initialize Readability with the cloned document
            const reader = new Readability(documentClone);

            // Parse the document to extract the article
            const article = reader.parse();

            // Check if article parsing was successful
            if (article) {
                // Return the text content of the article
                return seoSpider.data(article.textContent);
            } else {
                // Return an error if parsing was unsuccessful
                return seoSpider.error("Failed to parse article content");
            }
        } catch (error) {
            // Return any errors encountered during the parsing process
            return seoSpider.error(`Error during parsing: ${error.message}`);
        }
    })
    .catch(error => {
        // Return an error if loading the Readability.js library fails
        return seoSpider.error(`Failed to load Readability.js: ${error.message}`);
    });

Cómo testear que tu Custom JS funciona

Además de testearlo haciendo un rastreo (siempre en modo de renderizar JS) y comprobando que aparece en la pestaña Custom JavaScript (y la columna que corresponda al Custom JS que acabamos de crear), tenemos una herramienta para probar nuestro snippet de código sin necesidad de lanzar un rastreo.

Abre el editor de snippets JavaScript, haciendo clic en las flechitas del campo donde pones tu código, o en el botón justo a la derecha, que pone «JS».

En el recuadro de la izquierda, abajo puedes poner una URL de prueba. Dale a Test y ejecutará tu Custom JS sobre esa URL. Si todo está correcto, extraerá el contenido de la página y lo verás aparecer en la pantalla.

Y ya hemos creado nuestro primer custom JavaScript para Screaming Frog.

Cómo guardar y compartir tu Custom JavaScript

Como vas a usar el snippet que has creado en más de un rastreo, ahora lo que debes hacerlo es guardarlo.

Para ello, tenemos en primer lugar la Librería de Custom JavaScripts. Desde el editor, haz clic en el botón «Añadir snippet a librería de usuario» (justo debajo del recuadro de la izquierda, donde se visualiza tu código). Ponle un nombre y se quedará guardado en tu librería.

Para acceder a la librería, puedes hacerlo desde Configuración > Custom > Custom JavaScript. Ahí tienes un botón llamado Añadir a librería, dale y accederás a todos los snippets de JS guardados, tanto por defecto (pestña Sistema) como los guardados por ti (pestaña Usuario).

¿Quieres compartir tu snippet de Custom JS con un compañero? Selecciona el que quieras y dale al botón derecho. En el menú que se despliega, elige «Exportar» y lo descargarás en formato JSON.

Este archivo JSON lo puede cargar cualquiera que tenga Screaming Frog desde su propia librería. Bajo la pestaña Usuario aparecen dos iconos, uno para importar y otro para exportar. Dale a importar y podrás subir cualquier Custom JS que te hayan pasado.

¿Qué te parece? ¿Te animarás a crear tus propios snippets de código? ¿Qué ideas se te ocurren para aprovechar esta gran funcionalidad nueva de la rana? Déjame un comentario para que todos podamos inspirarnos.

PD: Si te echa para atrás lo de generar código en JS, que sepas que yo mismo tengo mínima experiencia con JS, más allá de hacer algún bookmarklet super básico. Pero he generado y validado este código en menos de un minuto, pasándole a ChatGPT la documentación de Screaming Frog para trabajar con Custom JavaScript y la documentación de Readability.js – fácil, rápido y apto para cualquiera. ;)