Tuesday, July 23, 2019

How to make an External Link Open in the New Tab

Some people might want the external links on the blog to be opened in a new tab automatically without the need to replace them manually one by one.

This might be the reason for each of the bloggers, if I myself for the internal link do not use the target tag = "_ blank" so that when the internal link is clicked it will remain on the same tab page.

As for external links, I always use the target tag = "_ blank" so that external links will appear or open in a new tab when clicked.

By the way, do you know what external links and internal links are?

If not, I'll explain a little about the external links and internal links below.

What are External Links?
External links are URLs or other website links on our website or we can call them links that point to other websites.

What is Internal Link?
Internal links are URLs or links that come from our own website or we can call them links that point to other pages on our own website.

That's a little explanation about external links and internal links.
Speaking of external links so that they can be opened on a new tab I just found out a few months ago.

There are already hundreds of posts or articles that have external links but don't open automatically when the link is clicked.

If we edit or change one by one manually, it may take a lot of time this will certainly be very ineffective if we already have hundreds or even thousands of articles.

Therefore with the help of JavaScript we can change all external links to open new tabs or open in a new tab when clicked.

What are the benefits of opening external links in the new tab?
I give a little leak about an external link that should be given the target tag = "_ blank" or open new tab.

In terms of SEO, opening an external link in a new tab is to reduce the Bounce Rate or the reflection ratio between how many visitors and how long they are on your site or blog.

The logic is like this, if visitors are reading your article then they click on the link or link in the article, then it is transferred to another website so the time the reader spends will be shorter.

Unlike if, the external link in your post or article has a target = "_ blank" tag then when the reader clicks on the link your article will not be lost or switched to another website therefore the ratio of time spent by the reader is longer.

This is certainly an important factor for us to pay attention to.
How to Make All External Links Open in the New Tab
1. Log in to Blogger.com
2. Go to the Template> Edit HTML section
3. Then enter this javascript code above the code </ body>

<script type='text/javascript'>
//<![CDATA[
function externalLinku(){for(var e=document.getElementsByTagName("a"),t=0;t<e.length;t++){var n=e[t];n.getAttribute("href")&&n.hostname!==location.hostname&&(n.target="_blank")}}externalLinku();
//]]>
</script>
4. Then click Save theme

You can also use the code below that has been tagged rel = "nofollow noopener"
<script type='text/javascript'>
//<![CDATA[
function externalLinku(){for(var e=document.getElementsByTagName("a"),t=0;t<e.length;t++){var n=e[t];n.getAttribute("href")&&n.hostname!==location.hostname&&(n.rel="nofollow noopener")&&n.hostname!==location.hostname&&(n.target="_blank")}}externalLinku();
//]]>
</script>
The above code has two commands at once:

Nofollow is a command to prevent bots from accessing or indexing the link.

Noopener to prevent malicious links from taking over the currently opened tab. For those of you who use the target = "_ blank" tag then you need to add the rel = "noopener" or rel = "nofollow noopener" tag for security reasons.

Conclusion
With the help of the javascript code above, you can now change all external links to be opened in a new tab when clicked easily and quickly.

It would be better if the external link is given the target = "_ blank" command to reduce the bounce rate of your site or blog, besides adding also the rel = "noopener" tag on each link or link given the open new tab command for security reasons.


EmoticonEmoticon