There are many SEO and marketing tools that can give us great insights about websites and web pages; but there are occasions that you just need to quickly check that one thing.

It can be a pain to load up some software to check something small, and not everyone has access to paid tools that have the feature you need.

You could also install a browser extension, but if you’re just checking a one-off thing, it’s not always necessary. All of us in SEO probably have a ton of extensions installed, many of which overlap in functionality – who wants to install yet another one? 

However, there is a great solution to this problem; enter the bookmarklet.

What is a Bookmarklet?

A bookmarklet is a one-click browser bookmark, which generally contains Javascript, that can complete simple tasks or add additional functionality to a web page. They only complete an action when you click on them.

What is the benefit of using a bookmarklet? 

They are quick and easy to use – with one-click you can make simple checks a doddle, and you can add in a bookmarklet for those repetitive tasks you do over and over, with just one click – which can save you time. 

A bookmarklet is compatible on pretty much every browser, and more importantly they also work on mobile browsers that don’t support browser extensions. They are also very lightweight, and don’t need much in terms of resource to run. 

This makes them a good alternative to browser extensions, which can be resource intensive and may run in the background, slowing down your browsing experience – especially if you have many installed.

Security is another benefit – when you install an extension on Chrome, we’re usually giving these permission to ‘read and change all your data on the websites you visit’ – which has the potential and power to do harm. There was a recent instance of a large scale data mining leak of the browsing history of 4 million users.  We have trust in the extensions we install and the publishers that created them, but there is still a risk. 

How do I create a bookmarklet?

in Chrome:

  • Right click on the bookmark bar
  • Click Add Page
Menu Option in Google Chrome with Add Page... Highlighted

to show bookmark bar;
Windows, Linux, and Chrome OS: Press Ctrl + Shift + b
Mac: Press ⌘ + Shift + b.

  • Give the Bookmark a relevant name
  • Paste the code into the URL section
  • Save this, and then click on it for the alert to pop up.

For easy access, we recommend saving it to your bookmark bar so it’s easily accessible.

What tasks can I complete with a bookmarklet? 

You can complete a whole host of tasks with a bookmarklet, but we’re going to focus on ones that specifically help with checks for SEO and Digital PR. Here are a selection of our favourites;

  • Rich Snippet Test – Opens the page in Google’s Rich Snippet Testing tool:

javascript:window.open('https://search.google.com/test/rich-results?url='+encodeURIComponent(location.hostname + location.pathname + location.search) + '&user_agent=1');

  • Follow or No Follow Links – Highlights followed links in green and no-follow links in red. With this bookmarklet you can quickly determine if the link that you’ve received from a piece of online coverage is a followed link, or if it has been set to no-follow.

javascript:function highlightLinks(){ var newStyle=document.createElement('style'); newStyle.type='text/css'; newStyle.appendChild(document.createTextNode( ' a{border:none;background-color:#090! important;color:#fff! important;} a[rel~=nofollow]{border:1px dashed #852! important;background-color:#fcc! important;} ' )); document.getElementsByTagName('head')[0].appendChild(newStyle); }; highlightLinks();

  • Structured Data – Pull the page you’re on into Google’s Structured Data Testing Tool

javascript:void(window.open(%27https://search.google.com/structured-data/testing-tool/u/0/#url=%27+window.location.href,%27_blank%27));

  • Edit the page – This turns the entire webpage editable, you can cut and paste code and content into it. This is where the fact this works on a mobile comes in handy – you can use it to show clients and demo changes on the fly. You can use the inspect element to do something similar, but this is a little quicker and easier. 

javascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0

  • XHeaders via Daniel Miessler – this looks at the information hidden in the response headers

javascript:(function(){function read(url){var r=new XMLHttpRequest();r.open('HEAD',url,false);r.send(null);return r.getAllResponseHeaders();}alert(read(window.location))})(); 

  • Open the page in Page Speed Insights, Structured Data Tool and Google cached version

javascript: (function(){url='https://developers.google.com/speed/pagespeed/insights/?url='+encodeURIComponent(location.href);javascript:window.open(url);}());(function(){url='https://webcache.googleusercontent.com/search?strip=0&q=cache:'+encodeURIComponent(location.href);javascript:window.open(url);}());(function(){url='https://search.google.com/structured-data/testing-tool/u/0/#url='+encodeURIComponent(location.href);javascript:window.open(url);}());

Via bikeshopseo.com

  • Weekly Index Status – this runs a site search on the website you’re currently on and gives you an overview of any pages that have been indexed within the past seven days.


javascript:(function()%7B window.open(%27http://www.google.co.uk/search%3Fq%3Dsite:%27%2BencodeURIComponent(location.host)%2B%27%26tbs%3Dqdr:d7%27)%7D)()%3B

  • Highlight Headings – This highlights all heading elements on a page. It adds a box around each heading, tells you if its H1, H2, etc and colour codes them for a quick and easy overview.


javascript:void((function()%7Bvar a,b,c,d,e,f%3Bf%3Dnew Array(%27pink%27,%27orange%27,%27yellow%27,%27aquamarine%27,%27lightskyblue%27,%27plum%27)%3Bfor(a%3D1%3Ba<%3D6%3Ba%2B%2B)%7Bb%3Ddocument.getElementsByTagName(%27h%27%2Ba)%3Bfor(c%3D0%3Bc<b.length%3Bc%2B%2B)%7Bd%3Db%5Bc%5D%3Be%3Dd.style%3Be.backgroundColor%3Df%5Ba-1%5D%3Be.border%3D%27solid%27%3Be.padding%3D%272px%27%3Be.color%3D%27black%27%3Bd.innerHTML%3D%27H%27%2Ba%2B%27 - %27%2Bd.innerHTML%3B%7D%7D%7D)())

  • Canonical tag Checker – This scrapes the current page, identifies and pulls out the canonical URL set within the code and then displays this alongside the current URL, so you can have a quick overview of the canonical linking structure and identify issues.

javascript: (function () %7B var url %3D document.location%3B var links %3D document.getElementsByTagName(%27link%27)%3B var found %3D %27Not Found%27%3B for (var i %3D 0, l%3B l %3D links%5Bi%5D%3B i%2B%2B) %7B if (l.getAttribute(%27rel%27) %3D%3D %27canonical%27) %7B found %3D %27Canonical Found%5Cn%5CnCanonical Reference:%5Cn%27%2Bl.getAttribute(%27href%27)%2B%27%5Cn%5CnCurrent URL:%5Cn%27%2Bdocument.location%3Bif(l.getAttribute(%27href%27)%3D%3Ddocument.location)%7Bfound%3Dfound%2B%27%5Cn%5CnCanonical tag matches current URL.%27%7Delse%7Bfound%3Dfound%2B%27%5Cn%5CnThe Canonical reference and current URL are different. Canonical fallback in place.%27%7D break%3B %7D %7D alert(found)%3B %7D)()%3B

  • Broken link check – Highlight broken links using W3 Validator

javascript:(function(){%20window.open('http://validator.w3.org/checklink?uri='+encodeURIComponent(location.href)+'&hide_type=all&depth=&check=Check')})();

  • View naked URLs – This strips the anchor text from a hyperlinked page, to reveal just the URL on it’s own. This is super useful for finding what page has been linked to in a piece of coverage at a glance. It’s also good to quickly see if a link is potentially an affiliate link.  

javascript:(function()%7Bvar%20i,c,x,h%3B%20for(i%3D0%3Bx%3Ddocument.links%5Bi%5D%3B%2B%2Bi)%20%7B%20h%3Dx.getAttribute(%22href%22)%3B%20x.title%2B%3D%22%20%22%20%2B%20x.innerHTML%3B%20while(c%3Dx.firstChild)x.removeChild(c)%3B%20x.appendChild(document.createTextNode(h))%3B%20%7D%20%7D)()

Via https://seocipher.com/seo-bookmarklets/ 

  • Referrer – this one gives you access to the referrer as it’s tracked by Google Analytics and other packages. Very useful if you want to see what information is available to packages as not all links and search engines pass the full referrer.

javascript:alert(document.referrer) 

  • UK Sistrix – This loads up the UK Sistrix data for the domain you’re on

javascript:(function(){ location.href = ‘https://uk.sistrix.com/’ + window.location.hostname; })();

  • Page Speed timings – this shows you the timings for requests, dom loads and other key page speed metrics

javascript:(function()%7Bvar%20res%20%3D%20''%3Bfor%20(t%20in%20window.performance.timing)%7Bvar%20tAll%20%3D%20window.performance.timing%3B%20var%20t0%20%3D%20tAll%5B'navigationStart'%5D%3Bif%20(tAll%5Bt%5D%20!%3D%3D%20%22undefined%22%20%26%26%20(tAll%5Bt%5D-%20t0)%20%3E%2010)%7Bvar%20s%20%3D%20t%20%2B%20'%3A%20'%20%2B%20((tAll%5Bt%5D-%20t0)%2F1000).toString()%20%2B%20'%20secs'%3Bres%20%3D%20res%20%2B%20s%20%2B%20'%5Cn'%7D%7Dalert(res)%7D)()

  • On Page SEO Checks by Troy Meier – This is a super packed bookmarklet which covers a wide range of SEO checks – from a tonne of on-page checks such as meta title and description values and length, cookies, canonicals, robots.txt, if there’s a sitemap and more. All in a one click bookmarklet – no extension in sight!
  • View Dom Source by Martin Splitt – You can look at the rendered source of a page, so you can easily see the content when a page relies on Javascript or client-side rendering. It also highlights the syntax so it looks great too!

    Gif showing the Dom Source bookmarklet working in a browser
  • NoJS Side-by-Side by Chris Johnson – This shows how the website you are on looks with and without Javascript enabled, side by side in the browser – so you can see at a glance which parts of the site change when Javascript is off.
Screenshot of NoJS Side-by-Side bookmarklet using Twitter.com as an example.
  • Speed Up Video Playback via Tori Gray – This bookmarklet speeds up any video on a webpage. This technically isn’t an SEO specific bookmarklet, but it is great for getting through SEO and other educational videos that touch faster. Just change the playbackRate= section to what you’re comfortable with – I typically listen to podcasts on 1.3 speed, so that’s what I’ve used here.

javascript:(function()%7Bdocument.querySelector(%22video%22).playbackRate=1.3%7D)();

  • Open CrUX Dashboard by Lennart Leienbach – It opens the current domain in the new Chrome User Experience (CruX) Dashboard v2. Just an FYI that if there isn’t enough data within the CrUX to give these figures, it will still open but will show as blank in the report.

javascript:(function(){ window.open('https://datastudio.google.com/reporting/bbc5698d-57bb-4969-9e07-68810b9fa348/page/keDQB?params=%7B"origin":"'+window.location.origin+'"%7D')})();

javascript:void(window.open(%27https://search.google.com/search-console/performance/search-analytics?resource_id=%27+window.location.protocol+%27//%27+window.location.hostname,%27_blank%27));

Now, all that’s left to do is decide what to do with those precious minutes you’ve saved doing those repetitive tasks, and which extensions you can now replace.

Have you got a favourite bookmarklet? Let us know!

You can tag us on Twitter @riseatseven or drop me an email at sophie.gibson@riseatseven.com 

Sophie Gibson

About Sophie Gibson

Sophie is an SEO Strategist at Rise at Seven, working on all things SEO - from technical, to on-page and content. A big fan of e-commerce and auditing, she is currently lined up to speak at Brighton SEO.