Opening links in a new tab in Ghost

How to Open Links in a New Tab in Ghost

Ghost is a CMS that has a minimalist, Markdown-based content editor. When writing a new blog post using the Ghost editor, you can add a link by simply highlighting the text you want to add the link to and select the chain icon on the appearing formatting bar. Unlike HTML-based editors which typically allow you to add link attributes, the Ghost editor doesn’t allow you to do so. By default, all links you insert to a blog post will be opened in the same tab. There is no option to open the links in a new tab.

Is there a way to open the links in a new tab?

So far, there is no manual option to set a link to be opened in a new tab. If you want the links (external links more precisely) on your Ghost blog to be opened in a new tab, you can add the following JavaScript snipped.

<script type="text/javascript">
    var links = document.querySelectorAll('a');
    links.forEach((link) => {
        var a = new RegExp('/' + window.location.host + '/');
        if(!a.test(link.href)) {
          	link.addEventListener('click', (event) => {
                event.preventDefault();
                event.stopPropagation();
                window.open(link.href, '_blank');
            });
        }
    });
</script>

You can place the snipped above to either the header or footer of your blog. To do so, login to your Ghost dashboard and click the gear icon to open the Settings screen. On the Settings screen, click the Code injection menu.

Paste the snipped above to either the Site Footer or Site Header field. Click the Save button on the top-right corner to save the change.

After pasting the snipped above, all external links on your Ghost blog will be opened in a new tab, including external links on the navigation menu (if you have one).

Why is Opening External Links in a New Tab Crucial?

When writing a blog post, you might need to add a link to the reference source of your blog post. Whether the link is nofollow or dofollow, it’s crucial to open the link in a new tab to lower the bounce rate of your blog.

Similar Posts

Leave a Reply