In this post, I will show you JavaScript (JS) functions that you can use to implement SEO split tests with Google Tag Manager, to automate your SEO tasks and to do data manipulation tasks.
JavaScript SEO Functions for Google Tag Manager
JavaScript SEO Functions for Browser Automation
Useful JS Functions for Data Manipulation
JavaScript Functions for Chrome DevTools Console
JavaScript SEO Functions for Google Tag Manager
Here is a collection of many useful SEO JavaScript functions that you can use with Google Tag Manager. Just note that this should be implemented for testing purposes and not as a long term deployment.
Add Nofollow to All External Links on a Page
Using Google Tag Manager, you could make an SEO Split Test to see if adding rel=nofollow
to all external links helps your SEO performance or not.
<script> function toNofollow() { var x = document.getElementsByTagName("a"); var i; for (i = 0; i < x.length; i++) { if (location.hostname!=x[i].hostname){ x[i].rel = "nofollow"; }}} mft=setTimeout("toNofollow()",0); function LoadEvent(func){ var oldonload = window.onload; if (typeof window.onload != 'function'){ window.onload = func; } else{ window.onload = function() { if(oldonload) {oldonload();} func();}}} LoadEvent(function(){ toNofollow(); }); </script>
Modify Text of a Link Using the Index
If you want to know how it would look in your webpage to change the text of a link, you can use .textContent
.
Press CTRL + Shift + J
to open the JavaScript console. You can find more useful expressions here.
//Here I will change the anchor of the 2nd link in the page. $('a')[2].textContent="New Text"; //same as the document.querySelector() function document.querySelector('a')[2]="New Text";
Modify a Meta Description Using CSS Selector
<script> var metaRobots = document.querySelector('meta[name="description"]'); if (!metaRobots) { metaRobots = document.createElement('meta'); metaRobots.setAttribute('content', 'Your new meta description'); document.head.appendChild(metaRobots); } metaRobots.setAttribute('content', 'Your new meta description'); </script>
Modify the Title Tag
Nothing more simple than to modify the title tag.
<script> document.title = "New title"; </script>
Modify a H1 Tag
You can change visual elements in a page like the h1 (not that I recommend it).
const newHeadline = document.querySelector('h1'); newHeadline.textContent = "This is a new h1';
JavaScript SEO Functions for Browser Automation
Browser Automation is awesome to automate SEO tasks.
The functions I am showing you here will help you making punctual tasks at scale such as clicking on all links of a page.
For advanced SEO automation, you should use Selenium or Puppeteer. Puppeteer is faster but only works with chrome, which is why I prefer using Selenium for SEO.
Click on a Link
One of the most useful things you can do when you use JavaScript (JS) for SEO is to click on a link. You can do so using the click()
function.
document.getElementById('yourLinkID').click(); //Click using ID document.getElementsByClassName(yourLinkClass").click(); //Click using Class document.querySelectorAll("css.slector").click(); //Click CSS Selector
Open a Page in a New Tab
The JavaScript window.open()
method combined with the href
and the '_blank'
parameters open a new browser window to the specified URL.
window.open('https://www.jcchouinard.com', '_blank');
Get the Current Page Address (URL)
Using window.location
, you can get the current page address with JavaScript.
window.location.href // Current URL (href) window.location.hostname // Current domain name window.location.pathname // Current Page Path window.location.protocol // Current web protocol used (http or https)
Useful JS Functions for Data Manipulation
Convert Permalinks to a String of Keywords
At some point in your keywords research, you might want to modify a URL into a string of words.
function urltoText(str) { return str.split(/\W/).join(" "); } urltoText("/extracted-permalink-to-change").trim(); //"extracted permalink to change"
Convert Titles to URL Slugs
The opposite is also possible. You might want to convert stuff into a list of URLs. Take a list of keywords from your keywords research or titles of blog posts, for example.
var yourPostTitle = "Title of my SEO post"; function texttoUrl(title) { return "/"+ title .toLowerCase() .trim() .split(/\s+/) .join("-"); } texttoUrl(yourPostTitle);
JavaScript Functions for Chrome DevTools Console
The Chrome DevTools console can be really useful for SEOs.
View the Number of DOM elements
Is your DOM size too large for Google?
Google’s official documentation tells you that an optimal DOM tree:
- Has less than 1500 nodes total.
- Has a maximum depth of 32 nodes.
- Has no parent node with more than 60 child nodes.
To look for the number of DOM nodes, you can use this function in the JavaScript Console.
document.getElementsByTagName('*').length
Get All Links Containing Href
Gather all the links in a page that contain a specific substring, and return an array.
var link = document.querySelectorAll("[href*='/blog']"); var arr = []; for(var i = 0; i < link.length; i++){ href = link[i].getAttribute('href'); arr.push(href) }; console.log(arr); // ['/blog','/blog/1st-blog-post','/blog/2nd-blog-post']
Modify the Anchor Link in the Page
Return the Value of the Latest Expression
$_ //Latest Expression 5+2 //7 $_ //7
View The Latest Inspected Elements
If you have inspected an element using right-click > inspect. You can find it using the $0
, $1
, $2
, $3
and $4
commands. By using $0
, you’ll show the latest selected element and by using $1
you’ll get the second latest selected element.
Clear the Console
You can clear the console using the clear()
function.
Conclusion
There are a lot more that you can do with JavaScript. Other programming languages are also really interesting for SEOs who want to gain technical SEO skills.
Check out this complete series to help you learn python for Search Engine Optimization (SEO).
Sr SEO Specialist at Seek (Melbourne, Australia). Specialized in technical SEO. In a quest to programmatic SEO for large organizations through the use of Python, R and machine learning.