Opening external links in new tabs or windows using target="_blank" is a common yet controversial practice, for which I admit I am often guilty myself. You see, the best practice suggests that forcing links to open in new tab should be used sparingly, as it takes away the choice from the user.

Jakob Nielsen includes this in his list of top 10 mistakes in web design, emphasizing how annoying and confusing it can be for the users, as it practically disables the back button, which is the most apparent way to return to previous sites. If they indeed wanted to open the link in a new tab or window, they can do so themselves. This problem can be even more apparent on mobile devices, where keeping track of all open tabs is harder.

Besides that, the use of target="blank" could even cause security and performance issues, as demonstrated from Mathias Bynens and Jake Archibald respectively. Luckily, both of those issues can be addressed by using the rel="noopener" attribute, which WordPress’ Editor takes care automatically whenever you set a link to open in a new tab.

When is it OK to open links in a new tab?

Despite the drawbacks, there can be valid reasons to open a link in a new tab. In an opinionated but interesting article, Chris Coyier mentions a few good and bad reasons to open links in new windows, with the most apparent being that sometimes the user might work on something on the page, that might be lost if it changed. For example, when filling a form, having the link to the privacy policy or some external reference open in a new tab is not only acceptable, but also advisable, to prevent potential data loss.

Besides that, there are sites which by their very nature reference to external sources and know that the user wants to remain there. Then, having external links directly open in new tabs might be more user-friendly.

Take Twitter, for example. If you don’t know that you can open links in a new tab with a middle click or by hitting Ctrl + Click (or Cmd + Click if you are on a Mac) or if you browse from your phone, having to manually open links in new tabs might be annoying. On the other hand, opening the link in the same tab, reading the article, and then hitting the back button might be equally problematic, as you might lose the exact point in the stream of tweets to which you were before leaving the page.

Finally, there is always the marketeer’s perspective. If you ran a usability test and concluded that having external links open in the same tab increases the site’s bounce rate, then you simply must weight which comes first: best practices or keeping your visitors more on your site. I emphasize the usability test, though; you shouldn’t make the decision based on a simple guess, as forcing external links open in new tabs just because it sounds right, might actually make the bounce problem worse instead of improving it.

So, how should we deal with external links, after all?

In a controversial article, uxmovement.com mentions a few interesting arguments on why, contrary to what is believed to be best practice, external links should open in new tabs. Even though I can’t say I agree with them, they do have a point when they say that sometimes, especially on informational articles, users will often click multiple links on the page to get information from different sources. That doesn’t mean that they want to leave your site. This very page that you are reading right now, filled with external references, might be a good example for that argument.

Of course, you could counterargue that if you wanted to stay on the page, you would prefer to open links in new tabs no matter if they are internal or external, so forcing only external links to open in new tabs makes no sense.

Yet, I am convinced that letting the users know which link is external and which is internal, while at the same time leaving them the choice of how to open it, is good UX. It’s not an innovation, after all. It’s what Wikipedia does with its external references, it’s what many other sites do too and it is what benefits everyone: the users remain in control, even more than before, as now they have more input for their decision and the site, on the other hand, prevents them from accidentally leaving it.

It’s :not() hard to implement it!

If you think that implementing the aforementioned functionality is hard, requiring one more plugin or bloating your site with more JavaScript, you ‘d be surprised to find out that it’s not. All you need is a few lines of CSS:

.single-post .entry-content li a:not([href*='example.com']),
.single-post .entry-content p a:not([href*='example.com']) {
  white-space: nowrap;
}

.single-post .entry-content li a:not([href*='example.com'])::after,
.single-post .entry-content p a:not([href*='example.com'])::after {
  content: '';
  display: inline-block;
  position: relative;
  width: 12px;
  height: 12px;
  background-image: url("path/to/your-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

Here are the key points:

1. The .single-post .entry-content part targets only the links found in the main content of single posts, excluding peripheral elements like header, footer and sidebars.
2. The white-space: nowrap; makes sure that the link remains in a single line and prevents the icon to fall in a second line, alone, if there is not enough space. If you think that your links can get too long, you might want to remove that.
3. The a:not([href*='example.com']) part is where the magic happens, as it targets all links that do not contain your site’s domain. Obviously, you should replace example.com with your own URL.
4. If you are familiar with CSS, the rest should be self-explanatory. It’s just an ::after pseudo element which loads the icon that you want to use. Just make sure that you get the path right. Also, depending on the image that you choose, you might need to adjust a bit the dimensions and positioning.

And that’s pretty much it. If you have a counter argument to any of the above, feel free to mention it in the comments. I myself used to open external links in new tabs out of habit, but after giving it some thought, decided to switch.