Cómo usar JavaScript para automatizar el SEO (con scripts)

La programación y la automatización son temas cada vez más populares en la industria del SEO, y con razón.

Aprovechar nuevas formas de extraer, transformar y analizar datos a escala con una participación humana mínima puede ser increíblemente útil.

Aunque la velocidad es importante, uno de los principales beneficios de usar la automatización es que nos quita el peso de encima de las tareas repetitivas y nos deja más tiempo para usar nuestro cerebro.

Siga leyendo para conocer algunos de los beneficios de usar JavaScript para automatizar las tareas de SEO, las principales vías que puede tomar para comenzar a usarlo y algunas ideas para, con suerte, despertar su curiosidad.

¿Por qué aprender automatización con JavaScript?

Muchos proyectos de automatización fantásticos en la comunidad provienen de profesionales de SEO que codifican en Python, incluido Aldea Batista, Ruth Everett, Charly Wargnier, Justin Briggs, Britney Muller, Koray Tuğberk GÜBÜR y muchos más.

Sin embargo, Python es solo una de las muchas herramientas que puede utilizar para la automatización. Hay varios lenguajes de programación que pueden ser útiles para SEO, como R, SQL y JavaScript.

Fuera de las capacidades de automatización que aprenderá en el Siguiente sección, hay claros beneficios de aprender JavaScript para SEO. Éstos son solo algunos:

1. Mejorar su conocimiento para auditar JavaScript en sitios web

Ya sea que trabaje o no con aplicaciones web creadas con marcos populares (por ejemplo, Angular, Vue), lo más probable es que su sitio web esté usando una biblioteca de JavaScript como React, jQuery o Bootstrap.

(Y quizás incluso algún código JavaScript personalizado para un propósito específico).

Aprender a automatizar tareas con JavaScript le ayudará a construir una base más sólida para analizar cómo JavaScript o su implementación pueden estar afectando el rendimiento orgánico de su sitio.

2. Comprender y utilizar nuevas tecnologías emocionantes basadas en JavaScript

La industria del desarrollo web se mueve a un ritmo increíblemente rápido. Por lo tanto, constantemente surgen nuevas tecnologías transformadoras, y JavaScript está en el centro de ellas.

Al aprender JavaScript, podrá comprender mejor tecnologías como trabajadores de servicio, que puede afectar directamente al SEO y aprovecharse en su beneficio.

Además, los motores de JavaScript como V8 de Google mejoran cada año. El futuro de JavaScript solo parece más brillante.

3. Usar herramientas como Google Tag Manager que dependen de JavaScript para funcionar

Si trabaja en SEO, es posible que esté familiarizado con los sistemas de gestión de etiquetas como Administrador de etiquetas de Google o Tealium. Estos servicios utilizan JavaScript para insertar código (o etiquetas) en sitios web.

Al aprender JavaScript, estará mejor equipado para comprender lo que hacen estas etiquetas y, potencialmente, crearlas, administrarlas y depurarlas en su sitio web.

4. Para crear o mejorar sus propios sitios web con JavaScript

Una de las grandes cosas de aprender a codificar en JavaScript es que te ayudará a crear sitios web como proyectos paralelos o campos de prueba para experimentos de SEO.

No hay mejor manera de entender algo que ensuciarse las manos, especialmente si lo que desea probar se basa en JavaScript.

Rutas para aprovechar JavaScript para la automatización de SEO

JavaScript se desarrolló inicialmente como un lenguaje solo para navegadores, pero ahora ha evolucionado para estar en todas partes, incluso en hardware como microcontroladores y dispositivos portátiles.

A los efectos de la automatización de SEO, existen dos entornos principales en los que puede automatizar las tareas de SEO con JavaScript:

• Un navegador (front-end).
• Directamente en una computadora / laptop (back-end).

Automatización SEO con su navegador

Una de las principales ventajas que separan a JavaScript de otros lenguajes de scripting es que los navegadores pueden ejecutar JavaScript. Esto significa que lo único que necesita para comenzar con la automatización de JavaScript es un navegador.

Automatización mediante la consola del navegador

La forma más sencilla de comenzar es usar JavaScript directamente en la consola de su navegador.

Hay algunas automatizaciones fáciles y divertidas que puedes hacer. Por ejemplo, puede hacer que cualquier sitio web sea editable escribiendo “document.body.contentEditable = true”En su consola.

Esto podría ser útil para crear un nuevo contenido o encabezados en la página para mostrárselos a sus clientes u otras partes interesadas en su empresa sin la necesidad de un software de edición de imágenes.

Pero vamos a intensificarlo un poco más.

Los marcadores menos conocidos

Dado que la consola de un navegador puede ejecutar JavaScript, puede crear funciones personalizadas que realicen acciones específicas como extraer información de una página.

Sin embargo, la creación de funciones sobre el terreno puede resultar un poco tediosa y lenta. Por lo tanto, los marcadores son una forma más sencilla de guardar sus propias funciones personalizadas sin la necesidad de complementos del navegador.

Los marcadores son pequeños fragmentos de código guardados como marcadores del navegador que ejecutan funciones directamente desde la pestaña del navegador en la que se encuentra.

Por ejemplo, Dominic Woodman creó un marcador aquí que permite a los usuarios extraer datos de estadísticas de rastreo de la antigua interfaz de usuario de Google Search Console y descargarlos en un archivo CSV.

Puede parecer un poco abrumador, pero puede aprender a crear sus propios Bookmarklets siguiendo los pasos de este gran recurso en GitHub.

Fragmentos, una versión fácil de usar de marcadores

Si usa Chrome, existe una solución aún más simple que usa Fragmentos. Con esto, puede crear y guardar el mismo tipo de funciones de una manera mucho más fácil de usar.

Por ejemplo, he creado un pequeño fragmento que comprueba cuántos enlaces “rastreables” hay en la página y descarga la lista en un archivo CSV. Usted puede descarga el código de GitHub aquí.

Si bien estas suelen ser tareas pequeñas que son “agradables”, probablemente desee realizar más tareas pesadas que puedan ayudar con su carga de trabajo de SEO de una manera más significativa.

Por lo tanto, es mucho mejor usar JavaScript directamente en su computadora portátil (o un servidor en la nube) usando Node.js.

Automatización SEO en el back-end con Node.js

Node.js es un software que le permite ejecutar código JavaScript en su computadora portátil sin la necesidad de un navegador.

Existen algunas diferencias entre ejecutar JavaScript en su navegador y JavaScript en su computadora portátil (o un servidor en la nube), pero las omitiremos por ahora, ya que esta es solo una breve introducción al tema.

Para ejecutar scripts con Node.js, debe tenerlo instalado en su computadora portátil. He escrito una breve publicación de blog en la que voy paso a paso cómo puedes instalar Node así como algunos consejos de configuración adicionales para que sea más fácil comenzar.

Aunque su imaginación es el límite cuando se trata de automatización, lo he reducido a algunas áreas a las que veo que los profesionales de SEO regresan cuando usan Node.js.

Incluiré scripts que están listos para ejecutarse para que pueda comenzar en poco tiempo.

Extraer datos de las API

Recopilar información de diferentes fuentes para proporcionar información y recomendar acciones es uno de los trabajos más comunes en SEO.

Node.js hace que esto sea increíblemente simple con diferentes opciones, pero mi módulo de acceso preferido es Axios.

// Create an index.js file inside a folder & paste the code below

// Import axios module
const axios = require('axios');

// Custom function to extract data from PageSpeed API
const getApiData = async (url) => {
  const endpoint="https://www.googleapis.com/pagespeedonline/v5/runPagespeed";
  const key = 'YOUR-GOOGLE-API-KEY' // Edit with your own key;
  const apiResponse = await axios(`${endpoint}?url=${url}&key=${key}`); // Create HTTP call
  console.log(apiResponse.data); // Log data
  return apiResponse.data;
};

// Call your custom function
getApiData('https://www.searchenginejournal.com/');

Para comenzar a interactuar con las API, necesita un módulo que pueda manejar solicitudes HTTP (cliente HTTP) y un punto final (una URL para extraer información).

En algunos casos, es posible que también necesite una clave de API, pero esto no siempre es necesario.

Para conocer cómo interactúa Node.js con las API, consulte este guión Publiqué que utiliza la API PageSpeed ​​de Google para extraer datos de Core Web Vitals y otras métricas de laboratorio de forma masiva.

Raspado de sitios web

Ya sea que desee monitorear su propio sitio web, vigilar a sus competidores o simplemente extraer información de plataformas que no ofrecen una API, el raspado es una herramienta increíblemente útil para SEO.

Dado que JavaScript interactúa bien con DOM, existen muchas ventajas al usar Node.js para raspar.

El módulo más común que he usado para raspar es Cheerio, que tiene una sintaxis muy similar a jQuery, en combinación con un cliente HTTP como Axios.

// Import modules
const cheerio = require('cheerio');
const axios = require('axios');

// Custom function to extract title
const getTitle = async (url) => {
  const response = await axios(url); // Make request to desired URL
  const $ = cheerio.load(response.data); // Load it with cheerio.js
  const title = $('title').text(); // Extract title
  console.log(title); // Log title
  return title;
};

// Call custom function
getTitle('https://www.searchenginejournal.com/');

Si necesita la versión renderizada de un sitio web, módulos populares como Titiritero o Dramaturgo puede lanzar una instancia sin cabeza de un navegador real como Chrome o Firefox y realizar acciones o extraer información del DOM.

De Chris Johnson Layout Shift Generator es un gran ejemplo de cómo utilizar Puppeteer para SEO. Puedes encontrar mas info aqui o descarga el script aquí.

También hay otras opciones como JSDOM que emulan lo que hace un navegador sin la necesidad de un navegador. Puede jugar con un script basado en JSDOM usando este Node.js SEO Scraper construido por Nacho Mascort.

Procesamiento de archivos CSV y JSON

La mayoría de las veces, los datos extraídos de las API vienen como objetos JSON, y JavaScript es perfecto para tratar con ellos.

Sin embargo, como SEO, normalmente tratamos con datos en hojas de cálculo.

Node.js puede manejar fácilmente ambos formatos usando módulos integrados como el Módulo de sistema de archivos o versiones más simplificadas como csvtojson o json2csv.

Ya sea que desee leer datos de un CSV y transformarlos en JSON para su procesamiento, o si ya ha manipulado los datos y necesita enviarlos a CSV, Node.js lo respalda.

// Import Modules
const csv = require('csvtojson');
const { parse } = require('json2csv');
const { writeFileSync } = require('fs');

// Custom function to read URLs and convert it to JSON
const readCsvExportJson = async () => {
  const json = await csv().fromFile('yourfile.csv');
  console.log(json); // Log conversion JSON

  const converted = parse(json);
  console.log(converted); // Log conversion to CSV
  writeFileSync('new-csv.csv', converted);
};

readCsvExportJson();

Cree funciones en la nube para ejecutar tareas sin servidor

Este es un caso más avanzado, pero es increíblemente útil para el SEO técnico.

Los proveedores de computación en la nube como Amazon AWS, Google Cloud Platform o Azure hacen que sea increíblemente simple (y económico) configurar “instancias de servidores” que ejecutan scripts personalizados creados para propósitos específicos sin la necesidad de que usted configure ese servidor.

Un ejemplo útil sería programar una función que extraiga datos de la API de Google Search Console automáticamente al final de cada día y almacene los datos en una base de datos de BigQuery.

Hay algunas partes móviles en este caso, pero las posibilidades son realmente infinitas.

Solo para mostrarte un ejemplo de cómo crear una función en la nube, mira esto episodio de Agency Automators dónde Dave Sottimano crea su propia API de Google Trends utilizando Google Cloud Functions.

Una tercera avenida potencial, Apps Script

Para mí, tenía más sentido comenzar con el enfoque menos obstinado.

Pero Apps Script puede ofrecer una forma menos intimidante de aprender a codificar porque puede usarlo en aplicaciones como Google Sheets, que son el pan y la mantequilla del SEO técnico.

Hay proyectos realmente útiles que pueden darte una idea de lo que puedes hacer con Apps Script.

Por ejemplo, Mayordomo de hannah‘s Explorador de la consola de búsqueda o Noah lerner‘s Postmatic de Google My Business para SEO local.

Si está interesado en aprender Apps Script para SEO, le recomendaría Dave Sottimano‘s Introducción a las secuencias de comandos de Google Apps. Él también le dio a esto presentación impresionante en Tech SEO Boost, que explica muchas formas de usar Apps Script para SEO.

Pensamientos finales

JavaScript es uno de los los lenguajes de programación más populares del mundoy está aquí para quedarse.

La comunidad de código abierto es increíblemente activa y trae constantemente nuevos desarrollos en diferentes verticales, desde el desarrollo web hasta el aprendizaje automático, lo que lo convierte en un lenguaje perfecto para aprender como profesional de SEO.

Lo que ha leído en este artículo es solo la punta del iceberg.

Automatizar tareas es un paso para dejar atrás las tareas cotidianas aburridas y repetitivas, volvernos más eficientes y encontrar nuevas y mejores formas de aportar valor a nuestros clientes.

Con suerte, este artículo reduce en una pequeña capacidad la reputación ligeramente mala que tiene JavaScript en la comunidad SEO e infunde un poco de curiosidad para comenzar a codificar.

Más recursos:

Credito de imagen

Imagen destacada creada por el autor, mayo de 2021