How to Open External Links in a New Tab in Webflow

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to automatically open all external links in a new tab on your Webflow site.

Example

The script

This script automatically detects all links that point to a different domain than yours and adds target="_blank" and rel="noopener noreferrer" to them.

document.querySelectorAll('a[href]').forEach(function(link) {
  if (link.hostname !== window.location.hostname && link.hostname !== '') {
    link.setAttribute('target', '_blank');
    link.setAttribute('rel', 'noopener noreferrer');
  }
});

Desktop only version

On mobile, opening in a new tab is less useful (multi-tab browsing feels less natural). To apply the script only on desktop:

if (window.innerWidth >= 768) {
  document.querySelectorAll('a[href]').forEach(function(link) {
    if (link.hostname !== window.location.hostname && link.hostname !== '') {
      link.setAttribute('target', '_blank');
      link.setAttribute('rel', 'noopener noreferrer');
    }
  });
}

Conclusion

This script is added once globally and automatically applies to all links on the site.