How to Open Links in a New Window or Tab in Multiple CMSes

Linking to external resources in your site's posts and pages might sound counter intuitive to your search engine optimization efforts. If you want readers to stay on your site, then it doesn’t make much sense to point them to others — or does it?

Linking to high-quality external websites and blogs is actually important to your site’s SEO and to your readers. First, it’s an important element of any link building strategy. When you link to other sites in a consistent and strategic way, then one of those site owners is likely to return the favor. These backlinks are crucial to your SEO efforts since they are one of the most important ranking factors for major search engines. Google, for example, counts backlinks among the top eight factors.

Linking to high-quality external resources is also important to your content strategy. You can’t cover every aspect of a topic in one post — and you shouldn’t try. Instead, you can leverage the wealth of information available on the web by providing external links in your content. This will help you provide as much information to your readers as possible, which will ultimately give them a better experience on your site.

There’s just one potential pitfall. If you don’t set these links to open in a new tab or window, then readers will be redirected to the external site or blog and might not come back to yours. With readers spending less time on your site, your bounce rate will increase, which can negatively impact your rankings on search engines.

Setting these links to open in a new tab or window is a simple solution. That way, you provide readers with additional resources without directing them away from the post or page they’re reading. 

In this post, we'll cover the different ways you can implement this feature, no matter which CMS you have: 

• Using HTML
• In HubSpot
• In WordPress
  • Manually
  • Automatically
  • With a Plugin
• In Netlify CMS
  • Automatically
  • With Rendered HTML

How to Open Links in a New Tab or Window Using HTML

If you're using code to build your website or you're comfortable editing the code created by your WYSIWYG editor, one way to ensure that links open in a new tab or window is to go directly to the HTML.

Below is HTML code for opening in a new tab:

  <a href="https://www.hubspot.com/" target="_blank" rel="noopener">Visit HubSpot!</a> 

You'll notice the familiar "href" attribute that tells the browser where to go. The difference here is that the "target" attribute is included and set to "_blank". The "_blank" attribute is what commands the browser to open the link in a new window or tab.

The downside to this approach is that there are many use cases in which those who are editing web pages want to interact with as little code as possible. That's why we'll dive into the ways to open links in a new tab for multiple common CMSes.

How to Open Links in a New Tab in HubSpot

The HubSpot CMS has an easy way to set links to open in a new tab. Simply click on the Insert Link option in the toolbar. A new window will pop up, giving you the option to check the box that reads "Open this link in a new window."

Choosing this selector will automatically add the "_blank" in the back end without you needing to fuss with the coding.

How to Open External Links in a New Tab in WordPress

With WordPress, you have several options for accomplishing this goal. We’ll look at how you can manually set external links to open in a new tab or window in WordPress. Then, we’ll cover how you can use code or a plugin to automate the process. Let’s look at these different methods below.

Manually Set Links to Open in a New Tab (for WordPress)

You can easily set external links to open in a new tab in WordPress. In the Classic Editor, just insert your link and click Link Options to open the advanced insert link popup. Then check the box labeled “Open link in a new tab.”

The process is nearly identical in the Gutenberg Editor. You just click Link Settings and toggle on the “Open in New Tab” slider.

In both editors, the process is easy. The issue is it doesn’t scale well. You may produce a large volume of content and forget a link here or there. Or you may run a multi-author site and have trouble hardwiring this best practice into your writers’ and freelancers’ workflows. In either case, you would benefit from an automated solution for setting your external links to open in a new tab or window.

Let’s look at how you can use code to automatically set external links to open in a new tab or window.

Getting Links to Open in a New Tab Automatically (for WordPress)

You can add a code snippet to your theme’s footer.php file to automatically open external links on your site in a new window. Just navigate to Appearance > Editor in your WordPress dashboard. Then click on the footer.php file to open it. Scroll down until you see the body and HTML closing tags.

Source

Copy and paste the following code before the body and HTML closing tags.

 
<script type="text/javascript">
//<![CDATA
jQuery(document).ready(function($) {
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if (!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, '_blank');
});
}
});
});
//]]>
</script>

Once you save your changes, all external links in your published posts and pages will open in a new tab. This code will also work for new posts and pages.

This code does not work for internal links or for links in comments or text widgets, however. If you’d like to set all links anywhere on your site to open in new tabs, then you can use a plugin.

WordPress Plugins to Automatically Open External Links in a New Window

Plugins are the fastest and most flexible option for setting links to open in a new tab or window. Let’s look at two options below.

External Links in New Window / New Tab

External Links in New Window / New Tab by WebFactory Ltd is a free WordPress plugin that automatically sets all external links to open in a new window. It begins working as soon as you install and activate it.

There is a settings page for turning the functionality on or off for specific links if you want more control.

Source

External Links – nofollow, noopener & new window

For more control in configuring your link settings, you can use External Links – nofollow, noopener & new window. This is another free plugin by WebFactory Ltd.

After installing and activating this plugin, you can set different options for external and internal links in your WordPress dashboard. You can display an icon after external links to indicate to readers which links are pointing to other websites. It may look like this in your published post.

Source

You can also automatically set all external links on your site to “nofollow.” This tag tells search engines not to follow these links and associate them with your site’s rankings. This is recommended for newer sites that may not be earning many inbound links. Why? Because sites that are linking out more often than they are getting linked to are looked on less favorably by search engines.

Source

How to Open Links in a New Tab in Netlify

Netlify CMS uses a Markdown editor to add links to web pages.

Unfortunately, users are not prompted to choose the "target" attribute's behavior within the popup or the Markdown editor. You then have two choices if you want the added functionality:

1. Set all links to automatically open in a new tab via CSS.
2. Write the HTML in the Markdown environment and set that HTML to render.

Set All Links to Automatically Open in a New Tab

Here is the code that you would use to set all links' target attribute to "_blank" as a default functionality:

  { name: body, label: Body, widget: markdown, options: { linkAttrs: { target: _blank, rel: noreferrer noopener } } 

This would be added to the CSS of your site.

The downside to this is that this setting is applied across all links, which may not be the type of behavior you want on your site.

Write the HTML in the Markdown Environment

Here is the code that you would use to render all HTML:

  markdownit: { html: true, }, 

The upside to this is that you'd get to set which links open in a new tab. The downside is that you have to write the HTML code each time, and you'd need to be careful about including any HTML you don't want rendered.

Following this tutorial, you can manually or automatically set your external links to open in a new tab or window for whatever CMS that you have. Doing so will help reduce your site’s bounce rate and provide your visitors with better experiences.

Editor's note: This post was originally published in November 2019 and has been updated for comprehensiveness.