Enhancing Website Security

by Kuligaposten 2025-03-07

Automatically Adding rel="nofollow noopener" to External Links

When building a website, it's essential to ensure security and proper SEO practices. One small but effective improvement is adding rel="nofollow noopener" to all external links. This prevents potential security vulnerabilities and optimizes how search engines handle outgoing links.

In this post, we'll explore a simple JavaScript snippet that automatically applies these attributes to external links, making your website safer and more efficient.

Why Use `rel="nofollow noopener"`?

Before diving into the code, let's break down why these attributes matter:

nofollow: Tells search engines not to pass link equity to the linked page. Useful when linking to untrusted sources or when you don’t want to boost another website's rankings.
noopener: Prevents the new page from using window.opener to manipulate the parent page, enhancing security against phishing attacks.

Now, let's implement a simple JavaScript solution.

The JavaScript Solution

The following script runs when the page loads and automatically applies rel="nofollow noopener" to all external links:

document.addEventListener("DOMContentLoaded", function () {
  const links = document.querySelectorAll("a");
  links.forEach((link) => {
    if (link.href.startsWith("http")) {
      link.setAttribute("rel", "nofollow noopener");
    }
  });
});

How It Works

Waits for the DOM to load: The DOMContentLoaded event ensures the script runs after all HTML elements are available.
Selects all <a> elements: The script targets every link on the page.
Checks for external links: If a link’s href starts with http, it’s treated as an external link.
Adds the rel attributes: The script dynamically adds nofollow noopener to the external links.

Additional Considerations

Handling https and http Links: If you want to ensure that only absolute links (and not relative ones) are affected, the condition link.href.startsWith('http') is sufficient since relative links will not match.

Excluding Internal Links: If your website has absolute links that start with http, you may want to exclude links pointing to your own domain. You can modify the script like this:

document.addEventListener("DOMContentLoaded", function () {
  const links = document.querySelectorAll("a");
  links.forEach((link) => {
    if (
      link.href.startsWith("http") &&
      !link.href.includes(window.location.hostname)
    ) {
      link.setAttribute("rel", "nofollow noopener");
    }
  });
});

This ensures that only external links (links that don't contain your domain) are modified.

Conclusion

This small script is an easy way to improve both security and SEO without manually editing every external link on your site. By using JavaScript to handle it dynamically, you ensure consistency across all pages.

However, there's another way to manage links efficiently. Instead of converting text to an inline link, inserting a link component gives you full control over customization.

With the link component, you can:

Set the href (URL)
Choose the target attribute (_self, _blank, etc.)
Add rel attributes like noopener or nofollow
Apply Bootstrap classes for styling
Set custom attributes (title, data-, aria- for accessibility)