Jekyll - Creating External Links That Open In A New Tab

Jekyll - Creating External Links That Open In A New Tab - Cover Image
Reading Time: 1 min

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:

Liquid Markdown Syntax - Pin

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.


Enjoy Reading This Article?

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