Identify links that are hidden and/or loaded via JavaScript

The visibility and accessibility of all links on a website is important for SEO performance. Did you know that many links on websites can be hidden or not directly visible in the initial page render? Here's a simple SEO tip to help you uncover such links and make sure you don't miss any valuable links.Why are there undetectable links in the first place?

Hidden or invisible links can be present on a website for a number of reasons:

• Dynamically loaded content: Content that is only loaded by user actions or JavaScript.
• Interactive elements: Links that are embedded in buttons and are triggered by JavaScript events.
• Design aspects: Links that are hidden or difficult to recognize for design reasons.

Such links, which are not loaded via an HREF but are triggered via a JS event, are often not immediately visible and can easily be overlooked. With the following simple script, you can ensure that all links and buttons on a web page are highlighted, including those that are added dynamically, as part of an SEO audit, for example.

Step-by-step guide: Highlighting links on websites

1. open page and call up developer tools: Open the desired web page in your Chrome browser. Press `F12` or right-click on the page and select "Explore" to open the developer tools.

2. select the console area: In the developer tools, click on the 'Console' tab. Here you can execute JavaScript code directly on the website. When you make an entry, the browser may display a warning message for the first time and you must first confirm that you allow the insertion (allow pasting)

3. copy and paste the script: Copy the following script and paste it into the lower console area. Then press the enter key (`Enter`).

// Highlight initial links
document.querySelectorAll('a').forEach(link => {
  link.style.backgroundColor = 'yellow';
  link.dataset.initial = 'true'; // Mark these as initially present
});

// Highlight initial buttons
document.querySelectorAll('button').forEach(button => {
  button.style.backgroundColor = 'red';
  button.dataset.initial = 'true'; // Mark these as initially present
});

// Create a MutationObserver to detect changes in the DOM
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1) { // Check if it's an element node
          // Find any new <a> tags within the added node
          node.querySelectorAll('a').forEach(link => {
            if (!link.dataset.initial) { // Only highlight if not marked as initial
              link.style.backgroundColor = 'pink';
            }
          });

          // Find any new <button> tags within the added node
          node.querySelectorAll('button').forEach(button => {
            if (!button.dataset.initial) { // Only highlight if not marked as initial
              button.style.backgroundColor = 'red';
            }
          });
        }
      });
    }
  });
});

// Start observing the document body for changes
observer.observe(document.body, {
  childList: true,
  subtree: true
});

4. observe the result: After you have executed the script, all links (`<a>` elements) on the web page are highlighted in yellow and all buttons (`<button>` elements) are highlighted in red. New links and buttons that are added dynamically are given a pink (for links) or red (for buttons) background color.

If your website already has a lot of yellow or red elements, you can simply change the highlighting colors in the script to blue and brown, for example.

What happens exactly?

The script first marks all existing links and buttons on the page with a background color. It then creates a so-called MutationObserver, which continuously monitors changes in the DOM (Document Object Model). When new elements are added, the observer checks whether they contain links or buttons and marks them accordingly.

Using this method, you can ensure that no important links are overlooked, regardless of whether they are initially visible or are added by user actions or scripts. This simple but effective technique can help you optimize the usability and SEO performance of your website.

We didn't make this script up, we first saw it in a LinkedIn post by Daniel Foley Carter. The SEO tip is really helpful, which is why we created this blog article. Other users have found it just as useful and have even created a Chrome extension for link highlighting.

Try it out and see for yourself how many links appear on your web pages, and which of them are only triggered by JavaScript!