There are plenty of SEO chrome extensions available that help you do or see different things, depending on your needs.
However, adding extra extensions can slow down your work and open up security vulnerabilities if you don’t know what you’re installing. This is why creating your own bookmarklets can be super useful. They’re quick, very specific in what they do, and only include the code you need to accomplish the job.
The bookmarklets below are a set of bookmarks that I’ve created that help me in my day-to-day. Perhaps they will help you as well.
I will update this list over time as I create more bookmarklets and use them across my work.
Show headings on a page
The “Show headings” bookmarklet does exactly what it’s name suggests.
You can save the below code as the URL of a bookmark. When visiting any URL, you can then click that bookmark and it will display the heading tag with a bright red background, to the left of the heading text.
This has been extremely helpful to me when I’m visually scanning a page and trying to see what headings are being used where.
Show Headings bookmark Javascript (encoded for use in bookmarklet)
Use this when creating your bookmark!
javascript:(function()%7Bconst%20headings%20%3D%20document.querySelectorAll('h1%2C%20h2%2C%20h3%2C%20h4%2C%20h5%2C%20h6')%3Bheadings.forEach(heading%20%3D%3E%20%7Bconst%20tagName%20%3D%20heading.tagName%3Bconst%20prefixText%20%3D%20'%5B'%20%2B%20tagName%20%2B%20'%5D%20'%3Bconst%20firstChild%20%3D%20heading.firstChild%3Bconst%20isSpan%20%3D%20firstChild%20%26%26%20firstChild.nodeType%20%3D%3D%3D%20Node.ELEMENT_NODE%20%26%26%20firstChild.tagName%20%3D%3D%3D%20'SPAN'%3Bconst%20hasPrefix%20%3D%20isSpan%20%26%26%20firstChild.textContent.trim()%20%3D%3D%3D%20prefixText.trim()%3Bif(!hasPrefix)%20%7Bconst%20prefixSpan%20%3D%20document.createElement('span')%3BprefixSpan.textContent%20%3D%20prefixText%3BprefixSpan.style.background%20%3D%20'%23ff0000'%3BprefixSpan.style.padding%20%3D%20'10px'%3BprefixSpan.style.color%20%3D%20'%23fff'%3BprefixSpan.style.marginRight%20%3D%20'10px'%3BprefixSpan.style.borderRadius%20%3D%20'3px'%3Bheading.insertBefore(prefixSpan%2C%20firstChild)%3B%7D%7D)%3B%7D)()Here is the full code, decoded so you can see what’s going on:
Show Headings bookmark Javascript (decoded)
(function() {
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
headings.forEach(heading => {
const tagName = heading.tagName;
const prefixText = `[${tagName}] `;
const firstChild = heading.firstChild;
const isSpan = firstChild && firstChild.nodeType === Node.ELEMENT_NODE && firstChild.tagName === 'SPAN';
const hasPrefix = isSpan && firstChild.textContent.trim() === prefixText.trim();
if (!hasPrefix) {
const prefixSpan = document.createElement('span');
prefixSpan.textContent = prefixText;
prefixSpan.style.background = '#ff0000'; // Red background
prefixSpan.style.padding = '10px'; // 10px padding
prefixSpan.style.color = '#fff'; // White text color
prefixSpan.style.marginRight = '10px'; // 10px right margin
prefixSpan.style.borderRadius = '3px'; // 3px border-radius
heading.insertBefore(prefixSpan, firstChild);
}
});
})();