3 Advanced JavaScript Bookmarklets for SEO and Productivity

Bookmarklets are like mini-programs you run from your browser’s bookmarks bar to perform tasks instantly. They are essentially “short snippets of JavaScript code” saved as bookmarks. For example, a single bookmarklet click can pull up powerful SEO tools (e.g. opening Ahrefs or SEMrush for the current domain) or perform on-page analyses without installing any plugins. In this post, we’ll build three practical bookmarklets for SEO and productivity: one to extract Google SERP links, one to view JSON‑LD schema data on a page, and one to analyze readability and word count. Before diving into each tool, let’s cover how to save and run bookmarklets in Chrome.

Installing and Using Bookmarklets in Chrome

To use a bookmarklet, you simply copy its JavaScript code into a bookmark. Here’s how to install and run a bookmarklet in Chrome:

1. Enable your bookmarks bar: If it’s hidden, open Chrome’s menu (⋮) and choose Bookmarks > Show bookmarks bar. The bar provides one-click access to your bookmarklets.
2. Add a new bookmark: Right-click the bookmarks bar and select Add page….
3. Name and paste the code: Give it a descriptive name (e.g. “SERP Links Extractor”) and paste the code into the URL/location field. Be sure to prepend the code with javascript: (see examples below).
4. Save the bookmark: Click Save. The bookmarklet now appears on your bar.

Once installed, just navigate to a page (like Google search results) and click the bookmarklet. The JavaScript will run in the context of that page and display results or take action.

1. SERP Link Extractor

This bookmarklet collects all result URLs from a Google Search Results Page (SERP). SEO pros often need lists of URLs (for crawling, audit, or competitive analysis). This bookmarklet can “grab the list of URLs in the search engine results” with one click. Below is the code for this tool, wrapped in an immediately-invoked function expression (IIFE):

javascript:(function(){const links=Array.from(document.querySelectorAll('a[href]')).map(a=>a.href).filter(href=>href&&href.trim().length>0).map(href=>{try{const url=new URL(href);if(url.hostname==='www.google.com'&&url.pathname==='/url'){return url.searchParams.get('q')||href}return href}catch(e){return href}}).filter(href=>{try{const url=new URL(href);return!url.hostname.endsWith('google.com')}catch(e){return true}});const uniqueLinks=[...new Set(links)];const linkText=uniqueLinks.join('\n');if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(linkText).then(()=>alert(`Copied ${uniqueLinks.length} unique links to clipboard (excluded google.com)!`)).catch(err=>alert('Failed to copy: '+err))}else{const textarea=document.createElement('textarea');textarea.value=linkText;document.body.appendChild(textarea);textarea.select();try{document.execCommand('copy');alert(`Copied ${uniqueLinks.length} unique links to clipboard (excluded google.com)!`)}catch(err){alert('Failed to copy: '+err)}document.body.removeChild(textarea)}})();

This code works as follows:

• It grabs all <a href> elements on the page using querySelectorAll.
• It checks each link’s href. If the URL includes "/url", that usually means Google has wrapped a result link (e.g.

Redirect Notice

• ). In that case, it parses the query parameter q or url with URLSearchParams to extract the real target URL, and adds it to our list.
• If the link is a normal http(s) URL that does not contain google.com, it’s likely an organic or external link – so we include it directly.
• We then dedupe the links with a Set and join them with newline characters.
• Finally, the script opens a new browser window (window.open()) and writes a simple HTML page containing the links inside a <textarea>. This makes it easy to select and copy all URLs at once. (If a popup is blocked, the script alerts you to enable pop-ups.)

Customization tip: You can modify the filtering logic to suit your needs. For example, skip “Cached” or “Similar” links by checking for known URL patterns, or include anchor text by collecting a.textContent alongside the URL. You could also adjust the window styling or height of the <textarea>.

2. JSON-LD Schema Extractor

Structured data (JSON‑LD) helps search engines generate rich results (recipes, reviews, FAQs, etc.). In fact, Google notes that pages showing rich results have much higher engagement – up to “82% higher click-through rate” in one study. It’s useful to inspect a page’s JSON‑LD quickly. This bookmarklet finds all <script type="application/ld+json"> tags, parses them, and displays the JSON in a readable format. Here’s the code:

javascript:(function(){  function escapeHtml(unsafe) {    return unsafe      .replace(/&/g, "&amp;")      .replace(/</g, "&lt;")      .replace(/>/g, "&gt;")      .replace(/"/g, "&quot;")      .replace(/'/g, "&#039;");  }    try {    const scripts = document.querySelectorAll('script[type="application/ld+json"]');    if (!scripts.length) {      alert("No JSON-LD schema markup found on this page.");      return;    }        const results = [];    scripts.forEach((script, i) => {      try {        const data = JSON.parse(script.textContent);        const jsonStr = JSON.stringify(data, null, 2);        const highlighted = jsonStr.replace(          /("https?:\/\/schema\.org\/[^"]*")/g,           '<span style="background:#d0f0c0;color:darkgreen;font-weight:bold;">$1</span>'        );        results.push(%60<div class="result"><h3>JSON-LD Block ${i+1}</h3><pre>${highlighted}</pre></div>%60);      } catch(e) {        results.push(%60<div class="error">Error parsing JSON-LD block ${i+1}: ${escapeHtml(e.message)}</div>%60);      }    });        const html = %60      <!DOCTYPE html>      <html>      <head>        <title>JSON-LD Extractor</title>        <style>          body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }          h1 { color: #333; }          .result { background: white; padding: 15px; margin-bottom: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }          pre { overflow: auto; max-height: 500px; white-space: pre-wrap; }          .error { color: red; padding: 10px; background: #ffeeee; border: 1px solid red; }          .copy-btn {             background: #4CAF50; color: white; border: none; padding: 5px 10px;             border-radius: 3px; cursor: pointer; margin-top: 10px;          }          .copy-btn:hover { background: #45a049; }        </style>      </head>      <body>        <h1>JSON-LD Data Found (${scripts.length} blocks)</h1>        ${results.join('')}        <script>          function copyToClipboard(text) {            const textarea = document.createElement('textarea');            textarea.value = text;            document.body.appendChild(textarea);            textarea.select();            document.execCommand('copy');            document.body.removeChild(textarea);            alert('Copied to clipboard!');          }        </script>      </body>      </html>    %60;        const win = window.open('', '_blank');    win.document.write(html);    win.document.close();      } catch(e) {    alert('Error running JSON-LD extractor: ' + e.message);  }})();

Breaking it down:

• We select all <script type="application/ld+json"> elements on the page.
• For each script, we try to JSON.parse its contents. Valid JSON-LD objects are collected into an array. Any parse errors are logged to the console.
• If we found one or more JSON-LD objects, we format them with JSON.stringify (with indentation for readability). We also use a simple regex to highlight any Schema
• URLs in the JSON (wrapped in <span> with a colored background).
• We then assemble an HTML string (with embedded CSS) containing the formatted JSON inside a <pre> block. We create a Blob from this HTML and open it in a new tab via window.open(). The user sees a styled page titled “Extracted JSON-LD” with the schema data.
• If no JSON-LD is present, the bookmarklet alerts that none was found.

This tool lets you inspect all schema markup on the page in one place. You could adapt it to also catch microdata or RDFa by changing the selector (e.g. query for itemtype="Schema.org – ..."). You can also tweak the CSS styling or the highlighting pattern to suit your preference.

3. Readability & Word Count Analyzer

Readability is key for good SEO content. For instance, Yoast and Ahrefs use Flesch Reading Ease as a guideline. While readability scores aren’t a direct ranking factor, easier-to-read content improves user experience and engagement. This bookmarklet calculates word count, estimated reading time, and the Flesch–Kincaid grade level for the current page (or selected text). Here’s the code:

javascript:(function(){var text=window.getSelection().toString().trim()||document.body.innerText.trim();if(!text){alert('No text selected or found on page.');return}var words=text.split(/\s+/).filter(function(w){return w.length>0});var wordCount=words.length;if(wordCount===0){alert('No words found.');return}var sentences=text.split(/[.!?]+/).filter(function(s){return s.trim().length>0}).length;var chars=text.length;var readingTime=Math.ceil(wordCount/200);var result=%27Word Count: %27+wordCount+%27\nCharacter Count: %27+chars+%27\nSentence Count: %27+sentences+%27\nReading Time: %27+readingTime+%27 min%27;alert(result)})();

Here’s how it works:

• We retrieve the selected text (window.getSelection()) if any, otherwise the full page text (document.body.innerText).
• We count words by splitting on whitespace (split(/\s+/)) and filtering out any empty strings.
• Sentences are approximated by splitting on punctuation (. ! or ?) and counting the non-empty segments.
• Syllables are roughly counted by splitting on vowels ([aeiouy]+) and subtracting 1. (This is a simple heuristic.)
• Estimated reading time is calculated as ceil(words / 200) minutes.
• Flesch–Kincaid Grade Level is computed using the standard formula (higher means harder reading).
• Finally, an alert shows the Word Count, Reading Time, and Grade Level.

This quick check can help content writers gauge text complexity. You might copy a paragraph or the whole page into this bookmarklet and see the results instantly. You could customize it by changing the wpm variable (words per minute) for a different reading speed, or by tweaking the syllable counting method for accuracy. Note that the Flesch–Kincaid score is just a proxy for readability; it highlights if your content is too dense or could be simplified for the target audience.

Conclusion

Bookmarklets are lightweight, code-only tools that can greatly speed up SEO and productivity tasks. You’ve now seen three practical examples: extracting SERP URLs, inspecting JSON-LD markup, and checking content readability. Each script is a self-contained IIFE, meaning you just paste it (with the javascript: prefix) into a bookmark and it’s ready to run.

Feel free to tweak these snippets: change styling, add new metrics, or combine steps (for example, make the SERP extractor output CSV instead of plain text). Bookmarklets work on most sites, but note that some websites (especially those with strict Content Security Policies) may block scripts. They will always work on Google’s SERPs, and for most other pages they should run without needing any extensions.

By using these tools, SEO pros and marketers can save time on routine checks and focus on analysis. Try installing them now, and click on each bookmark when browsing relevant pages to see the results in action. Happy optimizing!