Previously, I've posted a script that automatically opens all external links in a new browser window.
Today, this post is on a refined JavaScript solution that prevents internal links with the attribute `target="_blank"` from opening in a new tab.
This script adds an intelligent layer, distinguishing between internal and external links within your blog content and comments.
The tutorial below includes instructions for both Blogger blogspot blogs and Wordpress blogs.
This script will immensely improve your daily page views and will tremendously decrease the overall blog bounce rate thus leading to a better search engine ranking and of course blog revenue.
How it Works
This plugin will look for all http and https hyperlinks inside your blog content section which includes the blog post body and comment body.
It will then add a target="_blank" attribute to all external links but will remove target="_blank" attribute from all internal links found inside your blog post and comments.
Why Refine the Script?
The updated script aims to handle internal and external links more precisely:
User-Friendly Navigation:
Avoiding the annoyance caused by internal links opening in new tabs, providing a more intuitive user experience.
Strategic Engagement:
This script also maintains Opening external links in new tabs.
Opening external links in a new window while maintaining the natural behavior for internal links to keep users engaged without unnecessary tab management.
JavaScript Enhancement:
The refined JavaScript script selectively adds `target="_blank"` to external links while excluding it from internal links:
How to Implement Opening all links In New Tab Except Internal Links
Blogger templates and Wordpress themes have different DOM structures and therefore due to the difference in class and ID name, I will be discussing the installation steps separately for both platforms.
Installing on Blogger
1. Go To Blogger > Template
2. Backup your template
3. Click Edit HTML
4 Paste the following script just above </head> tag.
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function () {
var externalLinks = document.querySelectorAll("#Blog1 a[href^='http'], #Blog1 a[href^='https']");
externalLinks.forEach(function(link) {
if (link.href.indexOf(location.hostname) == -1) {
link.setAttribute("target", "_blank");
}
if (link.href.indexOf(location.hostname) != -1) {
if (link.getAttribute('target') == '_blank') {
link.removeAttribute("target");
}
}
});
});
</script>
5. Save your template and all done!
Implementing on Wordpress
Follow these steps for a wordpress blog to open external links in a new window but open internal links inside the same window.
1. Go to your theme settings page or go to Appearance > Editor > header.php
2. Paste the following code just above </head> tag.
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function () {
var externalLinks = document.querySelectorAll("#content a[href^='http'], #content a[href^='https']");
externalLinks.forEach(function(link) {
if (link.href.indexOf(location.hostname) == -1) {
link.setAttribute("target", "_blank");
}
if (link.href.indexOf(location.hostname) != -1) {
if (link.getAttribute('target') == '_blank') {
link.removeAttribute("target");
}
}
});
});
</script>
3. Save Settings and you are all done!
Adding on Any HTML Site, the Raw Code.
You can use this on your HTML site without worrying about DOM structure.
Note: Unlike the blogger and wordpress which functions based on the Post or Content class and Id, this version is subjected to the site Body. Meaning It checks for every link on the site and not just on posts and comment.
If you know your site structure or use Inspect Element, you can replace "body" with your ID or Class. Example "#ID" or ".class"
Blogger or Wordpress users can also use it. It is just a Javascript implementation.
Implementation Instructions:
To implement this script on your site:
1. Just Insert the script within your blog's HTML, ensuring it runs after the document has fully loaded.
document.addEventListener('DOMContentLoaded', function () {
var links = document.querySelectorAll('body a[href^="http"], body a[href^="https"]');
links.forEach(function(link) {
if (link.href.indexOf(location.hostname) == -1) {
link.setAttribute("target", "_blank");
}
if (link.href.indexOf(location.hostname) != -1) {
link.removeAttribute("target");
}
});
});Update:
You can use you can use this script alone or use along with the former posted one.
As Used on this site is a combined version, ensuring that the functionality of both is preserved.
Here's the merged JavaScript code:
document.addEventListener('DOMContentLoaded', function () {
var allLinks = document.querySelectorAll('a[href^="http"], a[href^="https"]');
allLinks.forEach(function(link) {
if (link.href.indexOf(location.hostname) == -1) {
link.setAttribute("target", "_blank");
}
});
});
This code achieves the same goal as others, but in a more concise manner.
It ensures that all external links open in a new window by adding the target="_blank" attribute.
You can use this single script on your site. If the functionality aligns with your requirements, you can remove the previously provided script in place of this one.
Conclusion:
This enhanced JavaScript script offers a nuanced approach to link behavior, contributing to a smoother user journey on your blog.
By distinguishing between internal and external links, you can optimize user engagement, reduce bounce rates, and potentially improve your blog's search engine ranking.
Whether you run a Blogger or WordPress or a regular HTML site, this script can be a valuable addition to enhance your overall user experience.
