The Options to Open Links in a New Tab for Webmasters and Visitors

Viewing a link in a new tab or window is a common question asked by both webmasters and website visitors. In this article, we go through several different options for both groups.

How to Make Links Open in a New Tab in HTML – Webmasters

It is pretty simple to make any html hyperlink to be opened on another window. Option 1  listed below is the primary method , and all others are mostly here to make use of option 1 more practical in different situations.

    1. Option 1 – Add “target=”_blank”. The most direct HTML code to open a link in a new tab is to add the “target=”_blank” to HTML anchor tag. If you click the link below, the new URL opens in the existing tab.
      <a href="http://shoutthegeek.com">ShoutTheGeek</a>

      Let’s add the target=”_blank” to the anchor tag.

      <a href="http://shoutthegeek.com" target="_blank">ShoutTheGeek</a>

      When the visitor clicks on the link above, the URL specified in “href” will be displayed in a new page. If you are using an old browser, the linked document can be opened in a new window but most of the modern browsers support tabbed browsing, so it is more likely the linked document will be on a new tab instead of a new window.

    2. Option 2 – Using Javascript. Here is a small inline javascript code to display the links in a new browser page if you don’t prefer to use the target tag.
      <a href="https://yandex.com" onclick="window.open(this.href); return false;">Yandex Search Engine</a>
    3. Option 3 – Using <base target=””>. This method is useful for those that want open any link, inbound or outbound, in a new browser window. Instead of adding target=”_blank” to each anchor tag manually, you can insert the <base target=”_blank”> to head section of your HTML code, and it is all done. All links whether external or internal will now be opened in new tab automatically.
      <html>
      <head>
      </head>
      <base target="_blank">
      <body>
      <a href="https://google.com">Google</a>
      <a href="https://bing.com">Bing</a>
      </body>
      </html>

      In the example above, both the links will be displayed in a separate window.

      You can override the base command by specifying the target attribute in the anchor tag that you want to change.

      <html>
      <head>
      </head>
      <base target="_blank">
      <body>
      <a href="https://google.com" target="_self">Google</a>
      <a href="https://bing.com">Bing</a>
      </body>
      </html>

       

      In this case, by specifying the target=”_self” in the Google’s anchor tag, we command the link to be opened in the default window, while the Bing link continues to comply with the base tag.

    4. Option 4 – Only Outbound Links Using Javascript. This option is for those who want to view only the external links in a new window using pure Javascript. The code will loop through the all anchors and add the “_blank” to only those that have an outbound URL address.
      <html>
      <head>
      </head>
      <body>
      <a href="https://shoutthegeek.com">Internal link in the current tab</a>
      <a href="https://google.com">External in a new one</a>
      <script>
      function openExternalLinksInNewTab() {
       var links = document.getElementsByTagName("a")
      
       for( i = 0;i < links.length;i++) {
       if (links[i].getAttribute("href") && links[i].hostname !== location.hostname) {
       links[i].target = "_blank";
       }
       }
      }
      openExternalLinksInNewTab();
      </script>
      </body>
      </html>

       

    5. Option 5 – External Links Using JQuery. This method is similar to Option 4 but uses the JQuery instead of Javascript. It loops through all links and inserts the target attribute only to outbound links.
      <script>
      $(document).ready(function(){
       $("a:not([href*='"+ window.location.host + "'])").attr('target', '_blank');
      });
      </script>

       

Making Links Open in a New Tab in WordPress

By default, both image and text links are displayed in the current window in WordPress if you do not explicitly set it to be viewed in a new one.

For Text Links

To view a text link in a different tab, you either manually add the “target=”_blank” code to the HTML code of the post or select the right option while inserting a new link.

  1. Click on the “Insert/Edit Link” button in visual mode, then click on the “Link options” to display the “Insert/edit link” popup window. Clicking on the “link” button in “Text” mode opens the “Insert/edit link” popup window.
  2. Mark the option in second image below.

 

Add a New Link In WordPress

How to open link in a new tab-in WordPress

For Images

After you insert the image into the post, select the image and click the edit button.

Edit Image in WordPress

In “Advanced Options” section, just tick the “Open link in a new tab” option.

Of course, to make any image click-able, you also need to change “Link To” to something else other than none in “Display Settings” area. In the above image, I have selected the media file option.

open-How to open images in a new tab in WordPress

Opening Links in a New Page For Website Visitors

In this section, we talk about how a website visitor can display links in another browser page by using keyboard and mouse shortcuts.

  1. Option 1 – Using Keyboard Shortcuts. It is not very practical but possible to open a link just by using the keyboard. The challenge here is that you have to move the cursor to the text that you want to open. You can navigate to the text by pressing the tab button on your keyword. But this could be tiresome if there are a lot of links on the page. Another simple trick is to search the text (CTRL+F), hit the escape when the cursor focus is on the link text, and use one of the following shortcuts.
    • CTRL + Enter – view the link in a new browser tab
    • Enter – view it in the same window
    • Shift + Enter – view the link in a new window
    • Shift + F10 – this one is not a direct shortcut. The command is equivalent of pressing the right mouse button. It opens the contextual menu where you can choose to view the link not only in new window or tab but also in a private window.
  2. Option 2 – Using Keyboard + Mouse Combination Shortcuts.  Using the keyboard and mouse together is handier than using only the keyboard. Below are the keyboard and mouse combinations that you can use;
    • CTRL + Left Click – This shortcut opens the new tab in the background but keeps the focus on the current window.
    • Ctrl + Shift + Left Click – Use this when you want to switch the window focus to the new tab.
  3. Option 3 – Using Only Mouse. For this to work, move your cursor to the link, press on the right mouse button to display the contextual menu. Then choose one of the options from the menu list to open the link in a new tab, window or private window.

How to Open Google Search Results in a New Browser Window/Tab

Did you know that Google has an option in its setting page where you can opt for opening the search result always on a new tab?

Typically, if you click on a search result, the current window URL is replaced by the search result, and you go back and forward using browser buttons to visit new results.

If you wanted to visit more than one site from the search results, you can, of course, use one of the keyboard & mouse shortcuts that we talked about above.

If you are a heavy google search user and most of the time visit more than one site from the search results, setting this option beforehand might be pretty handy.

Google Search Settings

Open Search Settings

Just click on Settings, then on “Search Settings”. Find the section with the title, “Where results open”, then tick the box “Open each selected result in a new browser window”, and Save.

Open Result in a New Browser Window - Google Search Setting

More About Target Attribute For Webmasters

Target attribute can take five different values. Let’s see how each value display the linked document;

  • _self – default option – in the same frame
  • _blank – in a new window or tab
  • _parent – in the parent frame
  • _top – in the top-most window
  • framename – in the named frame

Differences between Anchor Tag Attribute Values

target="_self" – this is the default for the browser, and the link opens in the same frame (or in the window if frames are not used). You may need to use this attribute if you want to override the <base target=””>.

target="_blank" – this is the one that opens the linked document in a new one.

target="frame name" – when first time clicked it opens the document link in a new window or tab just like the “_blank”. On subsequent clicks, it refreshes the already opened tab or window.

You probably don’t need to worry about any of _parent, _top tags if you are not building sites using frames. These tags become useful when you have frames inside frames.

Let’s say we have 3 frames and they are embedded into each other like this:

Frame-2 is inside of Frame-1.

Frame-3 is inside of Frame-2.

In case target="_parent" is used – the link opens in the parent of the current frame. If you click a link inside of the Frame-3, it will be opened in Frame-2, which is the parent of the Frame-2.

In case target="_top" is used – the link opens in top-most frame. If you click a link on the Frame-3, the linked document opens in the Frame-1, which is the top parent.

Pros and Cons of Using _Blank

People have different opinions on whether displaying links in a separate browser window a is a good experience for visitors or not.

Some suggest that forcing a new tab is hijacking the user experience since users can easily do it by a keyboard shortcut.

Others argue that it is used so often and common behavior on many websites that it became an expected behavior.

I think more and more people get used to tabbed browsing and it is not as annoying as it was when links were opened in a new window.

But we should note that both sides of the debate have valid points.

As a webmaster, I prefer to add target="_blank" to all outbound links for potential SEO benefits since keeping the page active can help to reduce your bounce rate, time on page or exit page percentage.

Security Risk of Using target=”_blank”

There is a risk of vulnerability to phishing attacks when you use target=”_blank” option.

Basically, the opened page acquire restricted access to the opener page via the window.opener JavaScript object and can change the URL of the opener page.

window.opener.location = 'https://changetheurl.com';

When visitor switches back to the opener website page, your URL is replaced by a new URL.

For example, let’s assume Twitter is using “target=”_blank” to display any clicked links in a new window.

An interesting link captured your attention, and you clicked on the link and viewed the new URL. If you go back to the Twitter tab on your browser, you notice that the previous twitter page is replaced with a new one, perhaps a Twitter password reset page encouraging you to reset your password immediately.

In actuality, the page is served from a different domain (changed by using window.opener.location), and if you have not noticed the new URL, and reset your password, you can expect that your twitter account will be in trouble soon.

How to Fix It

Adding rel="noopener noreferrer" should partly help to fix this problem in browsers that support these tags.

When rel="noopener" is used, the opened page will not have access to the JavaScript “window.opener” object.

When rel="noreferrer" is added, the referrer information is not passed to the opened page. By the way, if a page uses noreferrer in the anchor tag, the destination page will have no clue of where the visitor came from in their google analytics.

Using these properties is not a foolproof solution to prevent a phishing attack since not all browser or previous version have support for them. For example, Firefox has been supporting “noopener” since March 2017 and Google Chrome since March 2016, and IE and Edge yet to support it as of 2018.

Can I Use rel-noreferrer? Data on support for the rel-noreferrer feature across the major browsers from caniuse.com.

Therefore, The best approach will be to use both of the values together to minimize any risk potential.