How to Open External Links in a New Tab in Ghost CMS

The default behavior of Ghost is that all links are opened in the same tab, which can cause readers to leave your website.

This article demonstrates the process of opening external links in new tabs within Ghost, all without the need to modify any template files. Whether you prefer a solution with or without JavaScript, this article provides step-by-step instructions.

Make all links on the page open in a new tab.

We will cover several ways on how you can do this. Please note that we have put these codes into the Ghost CMS context. You can use this code on any other website not built on Ghost - everything should work.

Opening all links in a new tab without the need for JavaScript.

With this solution, you don't need to modify theme files and use JS. All you need to do is to follow these instructions:

1. Login into your Ghost admin
2. Go to Code Injection under Settings
3. In the Site Header section, you can insert the following code

<base target="_blank"/>

This will make all the links on your page open in a new tab.

Force open all links in a new tab with JavaScript.

With this solution, you don't need to modify theme files directly. All you need to do is to follow these instructions:

1. Login into your Ghost admin
2. Go to Code Injection under Settings
3. In the Site Header section, you can insert the following code

<script>
window.onload = function () {
 var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++) {
   links[i].setAttribute('target', '_blank');
   links[i].setAttribute('rel', 'noreferrer noopener');
  }
}
</script>

This will cause all links on your Ghost website to open in a new tab. You can change "_blank" to some other target element. You can find more info about HTML here.

Use JavaScript to force specific links to open in new tabs

With this solution, you don't need to modify theme files directly. All you need to do is to follow these instructions:

1. Login into your Ghost admin
2. Go to Code Injection under Settings
3. In the Site Header section, you can insert the following code

<script>
window.onload = function () {
 var links = document.getElementsByClassName('js-external');
  for (var i = 0; i < links.length; i++) {
   links[i].setAttribute('target', '_blank');
   links[i].setAttribute('rel', 'noreferrer noopener');
  }
}
</script>

You will notice that we have added "js-external" as a class name that targets some aspects of the page. You can add HTML to your content, and the link that you are using will open in a new tab.

<a href="https://iristhemes.com/themes" class="js-external">My Link</a> 

Conclusion

With this tutorial, you will have complete control without modifying template files. The provided JavaScript code, as elaborated above, offers an effective solution for achieving this enhancement. This method allows you to seamlessly manage your website's link behavior and provide an improved user experience.