I want my external links to open in a new tab

Hello all

I’d like all external links on my blog to open in a new tab.
I’ve been reading the blog posts on this forum from people that had a similar question. I found some possible solutions that were posted here, but none of them seem to work on my Ghost website. The current version of Markdown seems to overrule attempts to manually create links like
[Text goes here](http://linkgoeshere" target="_blank)
and take out the target="_blank" part.

Does anyone know if there is a way to overrule this, without using Javascript?

PS: I noticed that some of the posts around this topic were closed by admins, stating that links should never open in a new tab, using some old blog posts around the topic dating as far back as 1999 to prove their point.

Please, do not close this blog post with the same kind of response. I’d like to get an actual workaround from the community.

I personally don’t care how links in HTML and Markdown were initially intended to work and that they “should” never open in a new tab. I don’t agree with that stance because it is a technology push without taking the user experience into account, which is shortsighted and obnoxious. Most users and a lot of webmasters expect external links to open in a new tab. Period.

By the way, here’s a good article about why external links should open in a new tab: https://uxmovement.com/navigation/why-external-links-should-open-in-new-tabs/

3 Likes

but it’s so easy in JS… and instead of _blank I just use a single named tab (e.g. moredetail ) so that I don’t spam my users by opening lots of tabs.

I have the following in my Code injection Site Footer:

<script type='text/javascript'>
  $( document ).ready(function() {
  	$(".post-content a").attr("target","moredetail");
  });
</script>
4 Likes

If you only wanted to do this for specific links, you could simply embed a tag in the href and look for the tag.

For example; say I decide to use: ?xgtab& as an indicator to open the page in an [External Giani Tab]

and then just use a more advanced selector:

$( "a[href*='?xgtab&']" ).attr("target","moredetail");

This will embed the xgtab arg in the request - but I doubt that will cause a problem if you choose a tag that is unlikely to be used by the websites you are linking to.

2 Likes

Aha, this is actually very usefull. Just what I need. Thanks!

1 Like

I am a photographer and I have a Facebook page. I want an internal link on my Facebook page to my business website to get more traffic. But I don’t know how to do this.

Is this question related to a Ghost site? :slight_smile:

1 Like

@DavidDarnes the reply above by @pattersonmatilda062 looks like a spammer message to me – not related to Ghost site as far as I can tell.

1 Like

Hi Jeff,

I added the code in the side footer but its not working for me. All the links are still opening in the same tab.

Do I need to do anything apart from adding the code in the site footer?

Thank you. :slight_smile:

I think @jeff’s version expects jQuery to be present, here’s a vanilla JavaScript version:

[...document.querySelectorAll("a[href*='?xgtab&']")].forEach(link => {
	link.setAttribute("target", "moredetail");
});
2 Likes

Welcome to Ghost community, @Sumeet_M !

Here are several ways I do this on my sites:

Just a newbie question: - Won’t this jQuery make the specific page slow ?

Since I was missing this feature, I posted a similar question (labelled as IDEA) in the forum a day ago. Link

Hey @ajeet, the JavaScript I wrote doesn’t need jQuery and will apply the attribute instantaneously:

2 Likes

Thank you David. You are kind :slightly_smiling_face:

2 Likes

Hi thanks for this code, so we only neeed to inject this in the footer? Not working for me. IS there something I’m missing?

Hi @GTS, I think you’d also need to add attributes to the link ( ?xgtab& is the example) as per @jeff’s earlier post - see I want my external links to open in a new tab

1 Like