The Ultimate Guide to Opening External Links in New Tabs for SEO & Usability (2024)

Are you losing visitors because your external links navigate them away from your site? Enabling outbound links to open in new tabs could be the solution for improving engagement and SEO. Learn how to set up external links to open in new windows in WordPress and other CMSes.

Contents

Why Open External Links in New Tabs? The Benefits for UX & SEO

Linking to external resources in your website‘s content is a double-edged sword. On one hand, citing authoritative sources and recommending supplementary information can boost your SEO and establish your site as a helpful resource. On the flip side, sending users to other websites risks them not coming back to yours.

The solution is setting external links to open in new tabs. This simple tweak keeps users on your site while allowing them to access additional content.

Still not convinced it‘s worth implementing? Check out these benefits of opening outbound links in new tabs backed by data:

  • Reduced bounce rates: "Bounce rate" refers to the percentage of visitors who leave your site after only viewing one page. Keeping users on your site with new tab links can lower your bounce rate. Websites with bounce rates over 56% risk being seen as low quality by Google. (Source)

  • Increased time on site & user engagement: Since users aren‘t completely navigated away from your site, they‘re likely to explore more content after viewing an external link. Longer session durations indicate to search engines that your site is valuable. Even an extra 3 seconds on site can boost your relative value by 23%. (Source)

  • More conversion opportunities: The more time visitors spend on your site, the more chances they have to convert on your offers and CTAs. Even a 1 second delay in page load time can hurt conversions by 7%. (Source) Keeping visitors on your site with new tab links removes that friction.

Now that you understand the why, let‘s dive into the how of setting external links to open in new tabs in WordPress and beyond.

How to Manually Set External Links to Open in New Tabs in WordPress

WordPress makes it easy to control how individual links open right in the post or page editor. The process is slightly different between the Classic Editor and the Block (Gutenberg) Editor, so we‘ll cover both.

Classic Editor Instructions

  1. Highlight the text you want to make into a link and click the link button in the toolbar
  2. Paste the URL you‘re linking to
  3. Click the gear icon to expand the Link Options
  4. Check the box labeled "Open link in a new tab"
  5. Click Add Link to insert the hyperlink with the new tab attribute

WordPress Classic Editor Link Settings

Block (Gutenberg) Editor Instructions

  1. Highlight the text you want to link and click the link button in the toolbar or hit Ctrl + K
  2. Paste the URL you‘re linking to
  3. Expand the Link Settings in the editor sidebar
  4. Toggle on the "Open in new tab" switch
  5. Click Submit or hit Enter to insert the link

WordPress Block Editor Link Settings

Setting links to open in new tabs individually gives you granular control but it doesn‘t scale well if your site has tons of outbound links. Let‘s look at how to automatically apply the new tab setting to all your external links in WordPress.

How to Automatically Open External Links in New Tabs in WordPress

If you want to save time by universally setting all external links to open in new tabs, you can either modify your WordPress theme files or install a plugin. Here are your options.

Using Code in Theme Files

To automatically add the "open in new tab" attribute to every external link on your WordPress site, you can paste this code snippet into your theme‘s functions.php file:

function external_link_newtab_js() {
    ?>
      <script type="text/javascript">
      var links = document.links;

      for (var i = 0, linksLength = links.length; i < linksLength; i++) {
          if (links[i].hostname !== window.location.hostname) {
              links[i].target = "_blank";
              links[i].rel = "noopener noreferrer";
          }
      }
      </script>
    <?php
}

add_action(‘wp_head‘, ‘external_link_newtab_js‘);

This JavaScript loops through all the links on the page, checks if the linked hostname is different from the current site, and if so, adds target="_blank" to open the link in a new tab. The rel="noopener noreferrer" improves performance and security.

To add this code:

  1. In your WordPress dashboard, go to Appearance > Theme Editor
  2. Select the functions.php file from the list on the right
  3. Paste the code snippet at the very end of the file
  4. Click Update File

All existing and future external links will automatically open in new tabs. Keep in mind this change will be overwritten if you update your theme. Consider using a child theme or custom plugin to safely store the code.

If you‘d rather not mess with code, a WordPress plugin is an easier solution.

Using a WordPress Plugin

Several WordPress plugins can automatically set external links to open in new tabs with just a few clicks. Let‘s look at two popular options:

External Links – Open in New Tab Free Plugin

External Links Plugin Screenshot

The free External Links plugin by WebFactory Ltd. not only sets external links to open in new tabs but also lets you:

  • Add "nofollow" and "sponsored" attributes to outbound links
  • Automatically add the link‘s Font Awesome icon
  • Exclude specific links or domains
  • Apply settings only to new posts or sitewide
  • Set internal links to open in new tabs too

After installing and activating the plugin, go to Settings > External Links to configure your preferences. By default, the plugin will add target="_blank" and rel="noopener noreferrer" to all external links in your posts, pages, and widgets.

WP External Links Plugin

WP External Links Plugin Usage Stats
Source

Another popular option is the WP External Links plugin, also by WebFactory Ltd. This plugin has similar features to External Links but a slightly different settings interface.

It also includes some unique features like:

  • Customizable CSS classes for external links
  • Ability to mark links as "noopener", "noreferrer", or both
  • Option to add an icon to PDFs and other file types
  • Metabox to control settings on a per-post basis

Over 80,000 WordPress sites use this plugin to handle their external links. After installing it, go to the new WP External Links section in your dashboard to configure the settings and exceptions.

These plugins make it a breeze to automatically open external links in new tabs across your entire WordPress site. But what about other platforms? Let‘s quickly cover how to achieve this in HubSpot and Netlify.

Setting External Links to Open in New Tabs in HubSpot

HubSpot‘s page editor has a user-friendly option for setting individual links to open in a new tab. When inserting a link, simply check the "Open in new window" box.

HubSpot Open Link in New Window Setting

However, HubSpot doesn‘t offer a native way to automatically apply this setting to all external links. If you want that functionality, you‘ll need to work with a developer to implement a script that identifies external links and adds the new tab attributes.

Alternatively, you can use HubSpot‘s Content Management API to programmatically update links in existing pages and posts. This API allows you to search for instances of external links and append the target and rel attributes in the page source HTML.

Opening External Links in New Tabs in Netlify

Netlify CMS uses a Markdown editor, which doesn‘t have a GUI for setting links to open in new tabs. You‘ll need to either write out the HTML manually or modify your CMS configuration.

To open individual links in a new tab, use this HTML:

<a href="https://externalwebsite.com" target="_blank" rel="noopener noreferrer">Link Text</a>

To automatically set all links to open in new tabs, add this to your Netlify config.yml file:

markdown:
  render:
    linkify: false

Then in your JavaScript code, use this:

import marked from "marked";

const renderer = new marked.Renderer();
renderer.link = (href, title, text) => `<a target="_blank" rel="noopener noreferrer" href="${href}">${text}</a>`;

marked.setOptions({
  renderer,
});

This configuration uses the Marked library to intercept link rendering and add the new tab attributes. It will apply the behavior to all links, not just external ones.

For more control, consider adding a custom plugin to selectively modify external links in your Netlify build process. You can use the gatsby-remark-external-links plugin with Gatsby or create a custom filter with 11ty.

External Link Best Practices for SEO & User Experience

Opening external links in new tabs can improve the user experience and SEO of your site, but there are a few best practices to keep in mind:

  • Sparingly link to external sites. Aim for a healthy balance of internal and external links. Too many outbound links, especially to lower quality sites, can negatively impact your SEO. The ideal ratio is thought to be around 3:8 external vs internal links. (Source)

  • Choose "open in new tab" for relevant, helpful resources. The new tab behavior is best for supplementary information, related tools, and cited sources. Avoid using it for promotional links or totally off-topic content.

  • Avoid new tabs for conversion-focused links. Links to sign-ups, downloads, and purchase pages typically work better opening in the same tab to minimize distractions and keep users focused on converting.

  • Clearly identify links that open in new tabs. Help users know what to expect from your links by mentioning the new tab behavior in the anchor text or adding an icon. This is especially important for accessibility.

  • Use rel="noopener noreferrer" for security & performance. Always include this rel attribute alongside target="_blank" to avoid security vulnerabilities and optimize the performance of cross-origin links. (Source)

Frequently Asked Questions

Before we wrap up, let‘s address some common questions about opening external links in new tabs:

Do I need to open internal links in new tabs too?

In most cases, no. Keeping internal links that point to other pages on your own site in the same tab makes it easier for users to navigate and encourages them to view more of your content. Only use the new tab setting for external links.

Won‘t opening links in new tabs hurt my bounce rate?

While it may seem counterintuitive, setting external links to open in new tabs can actually improve your bounce rate. Since users aren‘t completely navigating away from your site, they‘re more likely to continue engaging with your content, reducing your bounce rate.

Will opening external links in new tabs improve my SEO?

While there‘s no direct SEO ranking boost from the new tab link behavior itself, it can positively impact user experience metrics like bounce rate and session duration that influence SEO. Keeping visitors on your site longer sends positive engagement signals to search engines.

Can I open external links in new tabs on Squarespace, Wix, etc?

Most website builders offer some way to tweak the default behavior of links, either built-in or through custom code. Check out these guides for details:

Open External Links in New Tabs for a Better User Experience

As a website owner, your goal is to attract visitors and keep them engaged with your brand. Setting external links to open in new tabs may seem like a minor detail, but it can go a long way in improving the user experience, keeping visitors on your site, and boosting your SEO.

Whether you implement the "open in new tab" behavior manually or automatically in WordPress, Hubspot, Netlify, or another CMS, being intentional about your external links will help you build trust with your audience and search engines.

I hope this comprehensive guide has given you the knowledge and tools to successfully navigate the world of external link optimization. Now get out there and start tweaking those links – your visitors and rankings will thank you!

Similar Posts