How to Open External Links in a New Tab in Ghost

By default, all links in your posts are opened in the same browser window. There are advantages and disadvantages for both cases, but since you are reading this article you are probably aware of these and looking for opening the external links in a new tab on your Ghost site.

What to consider when opening links in a new tab?

There are several considerations to keep in mind when doing this:

Time on site: Having external links open in a new tab can help keep visitors on your site longer, which in turn could possibly help improve engagement metrics like bounce rate and time on site.
User experience: If a reader is in the middle of your blog post, they probably don't want to leave your page every time they click a link. You want people to spend as much time as possible on your site and provide the best experience possible.
Inaccurate Analytics: Sometimes users want to better understand the article's context by clicking a link, but this doesn't mean they want to leave your site without having finished reading the article. However, your site analytics will show a different story. If your external links open in the same tab, it'll show that users are exiting your site quicker than they actually are.
Back-Button Fatigue: Opening external links in the same tab creates back-button fatigue for users. Every time the user goes to an external website they have to hit the back button to go back to your website. If they decide to click the links on the other website, they have to hit the back button even more times to get back to your site. This is a lot of unnecessary work for users.

How to achieve it in Ghost

There are two main ways you can achieve opening your external links in a new tab in Ghost: HTML and Javascript. With HTML you control each link separately, while with Javascript you can target all external links in your article.

The HTML way

As mentioned before, this gives you the possibility to control each link separately, but you will have to use either use the HTML card or the Markdown editor to manage it. The most important thing is, that you have to add the target="_blank" property to the links. Here's an example:

<a href="https://www.example.com" target="_blank">Go to example dot com</a>

As you can see this is not complicated but it's inconvenient because every external link has to be replaced with this code block, and you lose some of the flexibility of the Ghost editor.

The Javascript way

Another solution is using Javascript to check all the external links and add the target="_blank" property to the links programmatically. You can use the following JavaScript snippet for this.

<script>
  const domain = location.host.replace('www.', '');
  const links = document.querySelectorAll('a');

  links.forEach((link) => {
    if (!link.href.includes(domain) || link.href.includes(`ref=${domain}`)) {
      link.setAttribute('target', '_blank');
      link.setAttribute('rel', 'noreferrer noopener');
    }
  });
</script>

Add this snippet in your Ghost Admin Settings > Code Injection > Site Footer. It should be placed in the footer because your content should be loaded when the script is executed.

To explain the different parts of the script:

the domain constant will store your domain name for comparison against other links
the links constant will store all links on your current page
the next step is looping through the links and adding the target="_blank" attribute as well as the rel="noreferrer noopener" attribute.

Feel free to adapt the script according to your needs. For example, you can target links inside your post content only, for this you have to know the CSS class or ID. In our case this is content most of the time, so the code would be:

const links = document.querySelectorAll('.content a');

If you want to find out more about the noopener or noreferrer attributes check out this guide from ahrefs.

Conclusions

There are some important things to consider before changing your links' behavior and some simple things you can do to open your external links in a new tab. The Javascript code provided can be changed as explained above and it's a good way to handle this.

推荐订阅源