Jekyll - Creating External Links That Open In A New Tab

Coding
Written: March 31, 2021
Reading Time: 1 mins

A common convention for external links is that they open in a new tab. The idea behind this is that you can easily go back to the previous tab if you need to. This makes it easy for users to return to your website.

You might already know how to do this in plain HTML.

However, if you’ve built your website in Jekyll like me, you’ll want to know how this can be achieved on your Jekyll website.


Let’s step through the process.

In regular HTML this is how you create a link that opens in a new tab:

<a href="link.com" target="_blank" rel="noopener noreferrer">External Link</a>

The attributes rel=”noopener noreferrer” are added alongside the target=”_blank” attribute to ensure security.

More on that here: Links to cross-origin destinations are unsafe.

In Jekyll, if you’re writing your articles in markdown, you can use the traditional markdown link syntax with Jekyll’s liquid structure:


plain markdown:
[Link To A Page](/pageurl/)

or using liquid:

[Link To A Page]( {% post_url 2021-02-12-book-getting-things-done %} )

However, when you click on these links, they open in the same tab.

To add the target and rel attributes you need to add the following:

[Mishacreatrix Website](https://mishacreatrix.com/){:target="_blank"}{:rel="noopener noreferrer"}

This will give you links that open in a new tab.

I hope you found this article helpful. If you did, please consider sharing it on social media to help others to find it.

Design Insight

A weekly newsletter for creatives with a focus on design. Learn to think like a designer in less than 5 mins a week with curated articles, resources, tools, and insights. Released every Friday to over 180 creators.

I'm Interested!