How to Use JavaScript to Automate SEO (With Scripts)

Programming and automation are more and more fashionable matters within the SEO business, and rightfully so.

Leveraging new methods to extract, remodel, and analyze knowledge at scale with minimal human enter might be extremely helpful.

Although velocity is necessary, one of many fundamental advantages of utilizing automation is that it takes the burden off our shoulders from repetitive duties and leaves us extra time to use our brains.

Read on to study a number of the advantages of utilizing JavaScript to automate SEO duties, the principle avenues you possibly can take to begin utilizing it, and some concepts to hopefully spark your curiosity.

Why Learn Automation With JavaScript?

Quite a lot of improbable automation tasks locally come from SEO professionals coding in Python together with Hamlet Batista, Ruth Everett, Charly Wargnier, Justin Briggs, Britney Muller, Koray Tuğberk GÜBÜR, and plenty of extra.

However, Python is barely one of many many instruments you should utilize for automation. There are a number of programming languages that may be helpful for SEO comparable to R, SQL, and JavaScript.

Advertisement

Continue Reading Below

Outside of the automation capabilities you’ll study within the subsequent part, there are clear advantages from studying JavaScript for SEO. Here are just some:

1. To Advance Your Knowledge to Audit JavaScript on Websites

Whether or not you cope with net apps constructed with fashionable frameworks (e.g., Angular, Vue), the possibilities are that your web site is utilizing a JavaScript library like React, jQuery, or Bootstrap.

(And maybe even some customized JavaScript code for a particular function.)

Learning to automate duties with JavaScript will enable you to construct a extra stable basis to dissect how JavaScript or its implementation could also be affecting your web site’s natural efficiency.

2. To Understand and Use New Exciting Technologies Based on JavaScript

The net improvement business strikes at an extremely quick tempo. Hence, new transformative applied sciences emerge consistently, and JavaScript is on the middle of it.

By studying JavaScript, you’ll have the ability to higher perceive applied sciences like service employees, which can instantly have an effect on SEO and be leveraged to its profit.

Advertisement

Continue Reading Below

Additionally, JavaScript engines like Google’s V8 are getting higher yearly. JavaScript’s future solely appears to be like brighter.

3. To Use Tools Like Google Tag Manager That Rely on JavaScript to Work

If you’re employed in SEO, you could be conversant in Tag Management Systems like Google Tag Manager or Tealium. These providers use JavaScript to insert code (or tags) into web sites.

By studying JavaScript, you’ll be higher geared up to perceive what these tags are doing and doubtlessly create, handle and debug them in your web site.

4. To Build or Enhance Your Own Websites with JavaScript

One of the good issues about studying to code in JavaScript is that it’s going to enable you to to construct web sites as facet tasks or testing grounds for SEO experiments.

There is not any higher approach to perceive one thing than by getting your fingers soiled, particularly if what you need to check depends on JavaScript.

Paths to Leveraging JavaScript for SEO Automation

JavaScript was initially developed as a browser-only language however has now developed to be in every single place, even on {hardware} like microcontrollers and wearables.

For the needs of SEO automation, there are two fundamental environments the place you possibly can automate SEO duties with JavaScript:

  • A browser (front-end).
  • Directly on a pc/laptop computer (back-end).

SEO Automation with Your Browser

One of the principle benefits that separate JavaScript from different scripting languages is that browsers can execute JavaScript. This means the one factor you want to get began with JavaScript automation is a browser.

Automation Using the Browser’s Console

The easiest method to get began is utilizing JavaScript instantly in your browser’s console.

There are some straightforward and enjoyable automations you are able to do. For instance, you can also make any web site editable by typing “document.body.contentEditable = true” in your console.

Example of using JavaScript directly in your browser’s console.

This may very well be helpful for mocking up new content material or headings on the web page to present to your purchasers or different stakeholders in your organization with out the necessity for picture enhancing software program.

Advertisement

Continue Reading Below

But let’s step it up a bit extra.

The Lesser-Known Bookmarklets

Since a browser’s console can run JavaScript, you possibly can create customized features that carry out particular actions like extracting info from a web page.

However, creating features on the spot generally is a bit tedious and time-consuming. Therefore, Bookmarklets are a less complicated approach to save your personal customized features with out the necessity for browser plugins.

Bookmarklets are small code snippets saved as browser bookmarks that run features instantly from the browser tab you might be on.

An example of a Bookmarklet.

For instance, Dominic Woodman created a bookmarklet right here that permits customers to extract crawl stats knowledge from the outdated Google Search Console person interface and obtain it to a CSV.

Advertisement

Continue Reading Below

It may sound a bit daunting, however you possibly can learn the way to create your personal Bookmarklets following the steps on this nice useful resource on GitHub.

Snippets, a User-Friendly Version of Bookmarklets

If you utilize Chrome, there’s a good easier resolution utilizing Snippets. With this, you possibly can create and save the identical sort of features in a way more user-friendly approach.

For instance, I’ve created a small Snippet that checks what number of “crawlable” hyperlinks are on-page and obtain the listing to a CSV file. You can obtain the code from GitHub right here.

Chrome snippet link counter SEO.

While these are normally small duties which are “nice to have” you’d most likely need to do extra heavy-lifting duties that may assist along with your SEO workload in a extra important approach.

Advertisement

Continue Reading Below

Therefore, it’s a lot better to use JavaScript instantly in your laptop computer (or a server within the Cloud) utilizing Node.js.

SEO Automation within the Back-End with Node.js

Node.js is software program that allows you to run JavaScript code in your laptop computer with out the necessity for a browser.

There are some variations between operating JavaScript in your browser and JavaScript in your laptop computer (or a server within the Cloud) however we’ll skip these for now as that is only a quick intro to the subject.

Nodejs homepage screenshot.

In order to run scripts with Node.js, you need to have it put in in your laptop computer. I’ve written a brief weblog publish the place I’m going step-by-step on how one can set up Node in addition to just a few further setup suggestions to make it simpler to get you began.

Advertisement

Continue Reading Below

Although your creativeness is the restrict when it comes to automation, I’ve narrowed it down to just a few areas that I see SEO professionals come again to when utilizing Node.js.

I’ll embody scripts which are prepared to run so you may get began very quickly.

Extracting Data From APIs

Collecting info from completely different sources to present insights and advocate actions is without doubt one of the commonest jobs in SEO.

Node.js makes this extremely easy with completely different choices, however my most well-liked go-to module is Axios.

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

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

// Custom perform to extract knowledge 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 personal key;
  const apiResponse = await axios(`${endpoint}?url=${url}&key=${key}`); // Create HTTP name
  console.log(apiResponse.knowledge); // Log knowledge
  return apiResponse.knowledge;
};

// Call your customized perform
getApiData('https://www.pixillab.com/');

To begin interacting with APIs, you want a module that’s in a position to deal with HTTP requests (HTTP shopper) and an endpoint (a URL to extract info).

In some circumstances, you may additionally want an API key, however this isn’t at all times obligatory.

For a style of how Node.js interacts with APIs, try this script I revealed that makes use of Google’s PageSpeed API to extract Core Web Vitals knowledge and different lab metrics in bulk.

Advertisement

Continue Reading Below

Scraping Websites

Whether you prefer to to monitor your personal web site, regulate your opponents or just extract info from platforms that don’t supply an API, scraping is an extremely great tool for SEO.

Since JavaScript interacts properly with the DOM, there are lots of benefits to utilizing Node.js for scraping.

The commonest module I’ve used for scraping is Cheerio, which has a really comparable syntax to jQuery, together with an HTTP shopper like Axios.

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

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

// Call customized perform
getTitle('https://www.pixillab.com/');

If you want the rendered model of a web site, fashionable modules like Puppeteer or Playwright can launch a headless occasion of an precise browser like Chrome or Firefox and carry out actions or extract info from the DOM.

Chris Johnson’s Layout Shift Generator is a superb instance of how to use Puppeteer for SEO. You can discover extra data right here or obtain the script right here.

There are additionally different choices like JSDOM that emulate what a browser does with out the necessity for a browser. You can mess around with a JSDOM-based script utilizing this Node.js SEO Scraper constructed by Nacho Mascort.

Advertisement

Continue Reading Below

Processing CSV and JSON Files

Most of the time, the information extracted from APIs comes as JSON objects, and JavaScript is ideal for coping with these.

However, as SEOs, we usually cope with knowledge in spreadsheets.

Node.js can simply deal with each codecs utilizing built-in modules just like the File System module or extra simplified variations like csvtojson or json2csv.

Whether you need to learn knowledge from a CSV and remodel it into JSON for processing, otherwise you’ve already manipulated the information and also you want to output to CSV, Node.js has your again.

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

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

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

readCsvExportJson();

Create Cloud Functions to Run Serverless Tasks

This is a extra superior case, but it surely’s extremely useful for technical SEO.

Cloud computing suppliers like Amazon AWS, Google Cloud Platform, or Azure make it extremely easy (and low cost) to arrange “instances of servers” that run customized scripts created for particular functions with out the necessity for you to configure that server.

A helpful instance can be to schedule a perform that extracts knowledge from the Google Search Console API routinely on the finish of every single day and shops the information right into a BigQuery database.

Cloud function exmple to extract search console data and load it to big query.

There are just a few transferring components on this case, however the potentialities are really limitless.

Advertisement

Continue Reading Below

Just to present you an instance of how to create a cloud perform, try this episode of Agency Automators the place Dave Sottimano creates his personal Google Trends API utilizing Google Cloud Functions.

A Potential Third Avenue, Apps Script

For me, it made extra sense to begin with the less-opinionated strategy.

But Apps Script could supply a much less intimidating approach to study to code as a result of you should utilize it in apps like Google Sheets that are the bread and butter of technical SEO.

Appscript homepage screenshot.

There are actually helpful tasks that may give you a way of what you are able to do with Apps Script.

Advertisement

Continue Reading Below

For instance, Hannah Butler’s Search Console explorer or Noah Lerner’s Google My Business Postmatic for native SEO.

If you have an interest in studying Apps Script for SEO, I might advocate Dave Sottimano’s Introduction to Google Apps Scripts. He additionally gave this superior presentation at Tech SEO Boost, which explains some ways to use Apps Script for SEO.

Final Thoughts

JavaScript is without doubt one of the hottest programming languages on this planet, and it’s right here to keep.

The open-source group is extremely lively and consistently bringing new developments in numerous verticals – from net improvement to machine studying – making it an ideal language to study as an SEO skilled.

What you’ve examine on this article is simply the tip of the iceberg.

Automating duties is a step towards forsaking boring and repetitive on a regular basis duties, turning into extra environment friendly, and discovering new and higher methods to convey worth to our purchasers.

Hopefully this text reduces in a small capability the marginally unhealthy fame that JavaScript has within the SEO group and instills a little bit of curiosity to begin coding.

Advertisement

Continue Reading Below

More Resources:


Image Credit

Featured picture created by creator, May 2021

      Pixillab
      Logo
      Enable registration in settings - general