My eBook: Design Faster, Design Better

Jekyll - Creating External Links That Open In A New Tab

Jekyll - Creating External Links That Open In A New Tab - Cover Image

Published: 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="" 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]({: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.

Enjoy Reading This Article?

Here are some more articles you might like to read next:

Want To Improve Your Design Skills?

Design Insight is a weekly newsletter filled with design resources, tips, and insights to make you a better designer. It's sent directly to your inbox every Friday.

Click the button below to go to the Design Insight newsletter and sign up.