I have obsessed over every small detail when it comes to a website’s user experience.
One of the things I have considered is the behavior of links, specifically whether they should open in a new tab / window or not.
In this article, I review the pros and cons of opening links in the same or new tab and what you should choose for your own site.
But first, let’s quickly review the difference between windows and tabs, as well as internal and external links.
Windows vs tabs
Back in the day, if you wanted to open a new web page separately from the web page you were browsing, it would open in a new application window.
However, with the invention of tabbed browsing, separate pages now usually show in new tabs instead of separate windows.
Therefore, when discussing whether to open links in a new window or tab, this usually refers to opening a new browser tab, not a new browser window.
Internal vs external links
There are two types of links:
- Internal links: When you click on an internal link, it takes you to another page on the same website.
- External links: Clicking on an external link brings you to a page on another website.
If you are using a computer, then you can see whether a link is an internal or external link by hovering over it.
When you do, you should see the URL of the link at the bottom of the screen.
If it goes to the same domain as you are currently on, then it is an internal link. If it goes to a different domain, then it is an external link.
If you are using a smartphone or tablet, you can usually see where a link goes with a long press.
Internal links should open in the same window
With very few exceptions, internal links should open in the same tab or window.
This is the standard behavior and anything else is going to be highly unexpected for users.
If you decide to open an internal link in a new tab, then you should probably tell the reader about it, for example by putting “(opens in new tab)” next to the link.
Should you open external links in a new tab?
Most of the debate revolves around external links and whether they should open in the same or a new tab.
There are several considerations to keep in mind.
Time on site
Many website owners prefer to open external links in a new tab in order to keep visitors on their site longer.
Having your external links open in a new tab could possibly help improve engagement metrics like bounce rate and time on site.
Multiple back button clicks
If a user clicks on an external link that opens in the same tab, then that could make it harder to get back to your site.
For example, if the user clicks around the new site after opening the link, then the user may need to click the back button multiple times before getting back to your site.
On the other hand, if the link opens in a new tab, the user can click around the other website and then easily get back by closing the new tab or clicking the tab that your site is on.
Then there is no need to press the back button multiple times.
If you expect that your readers may click around the external site before eventually returning to your site, then opening links in a new tab is best.
Bloated and ad-heavy websites
If your site is ad-heavy, then clicking the “back” button to go back to your website may not be ideal.
This is because the site may need to refresh ads and scripts, which leads to a lot of shifting design elements. In that case, the visitor may need to wait for several seconds before being able to start consuming the content again.
You can try this on your own site. If clicking “back” triggers the loading of a lot of ads and scripts, then it is probably better to open external links in a new tab.
This can also save bandwidth for your visitors.
Mobile clicks
When you click a link that opens in a new tab on a mobile browser, it can take two clicks to get back to the previous website.
Instead of just clicking the back button, you need to click the tabs button and then select the previous tab.
If you have reason to believe that your readers are particularly bad with technology, then some of them may not know how to switch tabs on a mobile browser to get back to your site.
In that case, it may be better for your users to open external links in the same tab.
Security considerations
There are some security considerations with opening links in a new tab.
If you link to a website that has been compromised in some way, chances are that the site could gain control over the browser window of your own page.
However, many sites get around this by using the rel=”noopener” and rel=”noreferrer” attributes on their links. In fact, this is now the default behavior in WordPress.
That being said, I recommend avoiding the noreferrer attribute and just using noopener. That’s because noreferrer also hides referral information from your links, so other sites won’t see when you are sending them traffic.
So, this is what your html link code should look like if you are using target=”_blank” to open a new link:
<a href="https://www.example.com" target="_blank" rel="noopener">Go to example dot com</a>Accessibility considerations
People with vision problems use a screen reader to browse the web. Opening links in a new tab may lead to poor user experience for those visitors.
Form data
If you have forms on your web pages that you want people to fill out, then you should open links on that page in a new tab so that the data remains in the form.
For example, if you have a checkout form, then links on that page should open in a new tab or people may need to type everything back into the form after clicking the back button.
Video or audio
If there is video or audio playing on your website and you assume that the reader wants to keep it active, then it makes sense to open links in a new tab.
PDFs or download items
If you are linking to a PDF or any sort of file that prompts a download, then it usually provides a better user experience to make it open in a new tab.
What popular sites do
If you look at the world’s most popular websites, then you will see different practices when it comes to external links.
For example, Google and Wikipedia open links in the same tab, while Facebook, YouTube, and Instagram open them in a new tab.
Clearly, there are differences of opinion on this, even among the world’s most successful websites.
How to open links in a new tab
Here are a few different ways to open links in a new tab.
1. Via HTML
If you are editing the HTML directly, then the most common way to make the link open in a new tab is to add the target=”_blank” attribute to the link.
<a href="https://www.example.com" target="_blank">Go to example dot com</a>However, this can cause a security problem, so it is recommended that you also add rel=”noopener” to the link.
<a href="https://www.example.com" target="_blank" rel="noopener">Go to example dot com</a>2. Via Javascript
Some sites use a javascript function to make buttons open a link in a new tab. It looks something like this:
<button onClick="window.open('http://www.example.com', '_blank');">Open</button>3. In WordPress
If you are using WordPress, then you simply add a link via the editor, but check “Open link in a new tab” before you click the “Add Link” button.
WordPress automatically adds the required security attributes to the links, so you don’t need to worry about those.
4. In the browser
Your users can also choose on their own to open a link in a new tab.
- Computer: Right click the link, select “open in new tab” or hold down CTRL (Windows) or CMD (Mac) when clicking on the link.
- Smartphone or tablet: A long press on the link brings up an option to open it in a new tab.
My personal preferences
As a user, I prefer it when external links open in a new tab. I think this provides a better experience.
As a website owner, I also prefer to open external links in a new tab, because that’s what most of the sites in my industry do.
For this reason, all the external links on this site open in a new tab, while all internal links open in the same tab.
You should simply pick whatever you think works best for your site and your audience. That is usually the right choice.
Whatever you choose, make sure to be consistent with it. If you decide to open external links in a new tab, then this behavior should be consistent for all external links on your site.