Jekyll - Creating External Links That Open In A New Tab

Coding
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 newsletter about creativity and design. Each week I share insights from what I've been watching, reading, or listening to. Released every Friday at 5 pm GMT.

I'm Interested!