Introduction

Ensuring that external links on your website open in a new tab is a best practice for improving user experience and keeping visitors on your site longer.

This guide will walk you through various methods to achieve this, including HTML, JavaScript, and content management system (CMS) plugins.

Whether you’re managing a personal blog or a large corporate site, these techniques will help you optimize your external linking strategy.

Why Open External Links in a New Tab?

1 Enhancing User Experience

Opening external links in a new tab ensures that visitors don’t leave your site entirely. They can easily return to your original content without losing their place, which enhances overall user satisfaction.

2 Reducing Bounce Rates

By keeping users on your site while they explore external content, you can potentially reduce bounce rates. This helps maintain engagement and encourages users to explore more pages on your site.

3 Improving Navigation

When users follow external links, they can quickly switch between your site and the new content, improving their navigation experience. This is especially useful for reference pages or additional resources.

Method 1: Using HTML

1 Adding target="_blank" Manually

The most straightforward method to make external links open in a new tab is to add the target="_blank" attribute to each link. Here’s how:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>

Why Use rel="noopener noreferrer"?

• Security: The noopener value ensures that the new page cannot access the window.opener property, which prevents potential security risks.
• Performance: The noreferrer value prevents the browser from sending the referrer header to the new page, which can help with privacy and reduce external tracking.

Method 2: Using JavaScript

1 Automatically Adding target="_blank"

If you prefer an automated approach, you can use JavaScript to apply target="_blank" to all external links on your site. Add this script to your website’s header or footer:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var links = document.querySelectorAll('a');
    links.forEach(function(link) {
      if (link.hostname !== window.location.hostname) {
        link.setAttribute('target', '_blank');
        link.setAttribute('rel', 'noopener noreferrer');
      }
    });
  });
</script>

2 Benefits of Using JavaScript

• Efficiency: This method automatically updates all external links without manual intervention.
• Consistency: Ensures that all external links adhere to the same behavior across your site.

3 Considerations

• Performance: The script runs quickly but ensure that it does not impact site load times.
• Testing: Test the script in different browsers to ensure compatibility and functionality.

Method 3: Using CMS Plugins

1 For WordPress Users

If you’re using WordPress, several plugins can automatically handle external links. Some popular options include:

• External Links – nofollow, noopener & new window
• WP External Links

How to Install a Plugin

1. Navigate to Plugins: Go to the WordPress admin panel, click on “Plugins,” and select “Add New.”
2. Search and Install: Search for the desired plugin, install, and activate it.
3. Configure Settings: Follow the plugin’s instructions to set up external link behavior.

2 For Other CMS Platforms

If you use another CMS, look for similar plugins or modules that can handle external links. Many CMS platforms offer extensions or built-in settings for managing link behavior.

Method 4: Using Google Tag Manager

1 Implementing via Google Tag Manager

Google Tag Manager allows you to run custom JavaScript on your site without modifying the core code:

1. Create a New Tag: In Google Tag Manager, create a new tag and choose “Custom HTML.”
2. Insert the Script: Paste the JavaScript snippet provided earlier.
3. Set Triggers: Configure the tag to fire on all pages.
4. Publish Changes: Save and publish your changes to apply the script.

2 Advantages

• Centralized Management: Manage external link behavior through Google Tag Manager, which is convenient for sites with frequent updates.
• Non-Intrusive: Allows for modifications without directly altering the site’s source code.

Comparison Table: Methods for Opening External Links

Conclusion

Making external links open in a new tab is a valuable practice for enhancing user experience, improving navigation, and maintaining engagement on your website.

Whether you use HTML, JavaScript, CMS plugins, or Google Tag Manager, there’s a method that fits your needs. Implement the technique that best suits your site’s structure and enjoy a more user-friendly browsing experience.

FAQs

1. Why should I use rel="noopener noreferrer" with target="_blank"?

Adding rel="noopener noreferrer" improves security and privacy by preventing the new page from accessing the window object of the originating page and avoiding referrer information leakage.

2. Can I use JavaScript to modify only specific external links?

Yes, you can customize the JavaScript code to target specific links based on criteria such as class names or URL patterns.

3. Are there any risks associated with using JavaScript for this purpose?

The risks are minimal if the script is well-written and tested. Ensure compatibility and performance by conducting thorough testing.

4. What if I encounter issues with CMS plugins?

If plugins cause issues, consider alternative methods or consult the plugin’s support for troubleshooting.

By following the steps outlined in this post, you can ensure that all external links on your website open in a new tab, enhancing user experience and improving overall site engagement. In case you missed it, we recently published a post on, how to make every external link on your website nofollow.