JavaScript Scripts & Snippets

Credit where credit’s due: this clever idea was initially proposed by Metehan Yesilyurt, and I think it’s genius. I’ve just implemented a version on my WordPress blog and forum, and I think more people...

 

Generating random numbers in JavaScript is pretty straightforward, but doing it properly means understanding how the Math.random() function works.

If you need a number within a specific range, you cannot just call...

 

This script will add a zoom effect to all images on a webpage when hovered over. You can add it as a snippet or paste it into the console in the Chrome browser.

The script works by dynamically applying CSS...

 

Node.js script, leveraging Puppeteer to automate the extraction of essential web data. Perfect for SEO professionals and digital marketers, this script systematically navigates through a website, gathering valuable...

 

Quickly extract all the href links on the current webpage that you're currently viewing. Paste the JS snippet below into Chrome DevTool Console. It will collect all the links (internal and external), sort them and...

 

JavaScript snippet that extracts the hreflang attribute data for a given URL, suitable for browsers like Chrome and Firefox. This snippet will capture the hreflang values and links, organising the data into a CSV...

 

This JavaScript snippet is to extract the SERP listings from site:example.com search operator. F12 into Chrome DevTools console and paste it in.

It targets specific elements on the search...

 

Here's a quick tutorial on how to connect to the GPT-4 API with Node.js using PowerShell. This is for users of Microsoft Windows and Microsoft Server users.

First, install the axios library using...

 

This script is a Node.js-based web scraper utilizing Puppeteer and Puppeteer extra stealth plugin. It is designed to scrape Google search results for a specified query, collect key data points from each result...

 

This Node.js script uses Puppeteer (headless Chrome) to detect unused JavaScript and CSS from a list of given URLs. Redundant JS/CSS code can impact page load times, consequently affecting SEO. This webperf script...

 

A Chrome bookmarklet to inspect and identify images that are not using lazy loading on a webpage.

Here are a few common lazy loading patterns that you might come across, that are included in the...

 

Here is a Chrome bookmarklet for scraping Bing Search Results.

// Create an empty array to store the data
const data = [];

// Select all the search result links and titles
const searchResults =...

 

Use JavaScript to override common elements that can impact SEO performance within a webpage's HTML contents. Overrides mean that the elements must be present within the HTML markup to be replaced with the new...

 

There are actually several approaches to do this. Some require more overhead than others, and some are considered better than others.

In no particular order:

1. Use AJAX to get the data you need from the...

 

<script>
// JS script to dynamically inject 3 paragraphs after the H1 heading tag.
  (function() {
    // Create the new P element variables
    var para0 = document.createElement('p');
    var para1 =...

 

<script>
if (window.location.href.indexOf("URL-Goes-Here") > -1) {
document.querySelectorAll("h1")[0].innerText = "This is a JS rendered H1 headings";
document.querySelectorAll("h2")[0].innerText = "This is a JS...

 

<script>
// JS function to dynamically inject an image element after the H1 heading tag.
  (function() {
    // Create the new IMG element variable
    var img = document.createElement('img');

    // Add the img...