How to make Ghost open links in a new tab

Ghost doesn't have a native way of making links open in a new tab.

This is annoying, but I'll show you a way to fix this.

There are 2 ways of achieving this: with a script or with HTML.

Thanks to the Ghost community in the forum there is more than one script to achieve this. But I'll show you the one I use at the moment.

So, let's dive into it.

How to make links open in a new tab

There are 2 ways of achieving this solution.

One is with scripts and the other with HTML.

With scripts

This method is easier because the community already did the hard work of creating the script.

So, you only need to go to Code Injection and paste the script in the footer section.

First, the script. I found this script on the Ghost Forum and I use it on this website.

If you want to use it, copy the code below:

<script>
	var links = document.querySelectorAll('a');
	links.forEach((link) => {
		var a = new RegExp('/' + window.location.host + '/');
		if(link.href.indexOf("javascript") == -1){
			if(!a.test(link.href)) {
				link.addEventListener('click', (event) => {
					event.preventDefault();
					event.stopPropagation();
					window.open(link.href, '_blank');
				});
			}
		}
	});
</script>

Then go to the Ghost dashboard and look for Code Injection, as shown in the screenshot below.

Next, paste the script above (like in the screenshot below):

It's done. You don't need to worry more about external links.

Now, the script will see if the link domain is the same domain as the page. If it's different it adds target=_blank and makes it open in a new tab automatically.

With HTML

The alternative method is with HTML.

This process is more elaborated. That's why I use the method above and recommend you do the same.

Yet, I need to use this method when adding affiliate links in posts (something I'll show you how to do soon).

So, let's see how to do it.

First, let's add an HTML card in Ghost editor.

Then add the paragraph tags. It needs to be a pair, one for opening and the other for closing. Like this:

<p>
</p>

Now, you should add the text of the sentence where the link is.

<p> 
	This is the text of the link.
</p>

Next is the confusing part. So, I'll break it into small steps before adding the link into the sentence.

Links are represented as <a> in HTML. And again you need one tag for opening (<a>) and for closing (</a>).

First, let's add the link text.

<p> 
	<a>This is the text of the link.</a>
</p>

Now, we'll add the URL information. The URL should be inside the quotation marks of the href.

<p> 
	<a href="Put URL inside quotation marks">This is the text of the link.
	</a>
</p>

To finish the process and make it open in a new tab, add target=_blank. Like this:

<p> 
	<a href="Put URL inside quotation marks" target=_blank>This is the text of the link.
	</a>
</p>

The final result will look like this:

Congrats, you've done it!

You can save this last piece of code as a snippet in Ghost editor to save time when you need to do the process again.

Final considerations

This is a primary feature that should be available out of the box. Especially if Ghost wants to appeal to non-technical users.

With the script I show you above, you can do it in 2 minutes.

But, people might not discover this post. Or be comfortable with adding code they don't understand to their website.

This is one of the shortcomings that are more annoying than hard to overcome.

If you have any questions, contact me here or on Twitter.

Thanks for reading.

Subscribe to newsletter about tech for blogs and newsletters

Rate this article