Make Ghost Open All Links in a New Tab: Two Easy Methods

Introduction

Ghost is a fantastic platform for blogging and publishing, but some themes do not include an option to open links in a new tab by default. Suppose you want external links in your Ghost blog to open in a new window. In that case, you can achieve this in two ways: through JavaScript code injection or by modifying your theme files. This guide will explore both methods and discuss why this benefits user experience and SEO.

Why Open Links in a New Tab?

Before diving into the methods, let's understand why you might want to make this change:

1. Improved User Experience: Keeping visitors on your site while allowing them to explore external content in a new tab enhances engagement.
2. Reduced Bounce Rate: Users who leave via an external link may not return; opening in a new tab keeps your site active in their browser.
3. Better Navigation Control: Handy for reference links, documentation, or affiliate links where users may want to return to your site after checking external resources.
4. SEO Considerations: Although opening links in a new tab does not directly affect SEO, keeping users on your site longer can reduce bounce rates, which is beneficial.

Method 1: Using Code Injection (Recommended)

The easiest way to apply this change without modifying your theme is through Ghost's Code Injection feature. This method requires no theme updates and works site-wide.

Steps to Implement via Code Injection:

1. Log in to your Ghost Admin panel.
2. Navigate to Settings → Code Injection.
3. Click Save and refresh your site.

In the "Site Footer" section, paste the following JavaScript code:

<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('a[href]').forEach(link => {
            if (link.hostname !== window.location.hostname) {
                link.setAttribute('target', '_blank');
                link.setAttribute('rel', 'noopener noreferrer');
            }
        });
    });
</script>

Why Use Code Injection?

• No need to modify theme files.
• Works across all pages and posts instantly.
• Easy to update or remove if needed.

Method 2: Modifying Your Theme Files

You can modify your Ghost theme files directly if you prefer a more permanent solution. This requires editing your theme's JavaScript file or Handlebars templates.

Option 1: Editing Theme JavaScript

1. Save the file and re-upload the modified theme.
2. Activate the updated theme in Ghost Admin.

Open the file and add the following code at the bottom:

document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('a[href]').forEach(link => {
        if (link.hostname !== window.location.hostname) {
            link.setAttribute('target', '_blank');
            link.setAttribute('rel', 'noopener noreferrer');
        }
    });
});

Locate your theme’s JavaScript file, typically found in:

/assets/js/main.js

Option 2: Updating Handlebars Templates

If you want to modify only post content, edit the post.hbs file:

1. Open post.hbs and find the {{content}} helper.
2. Save the file, zip the theme, and upload it via Ghost Admin → Design → Change Theme.

Wrap it inside a <script> tag like this:

<article>
    {{content}}
    <script>
        document.querySelectorAll('article a').forEach(link => {
            link.setAttribute('target', '_blank');
            link.setAttribute('rel', 'noopener noreferrer');
        });
    </script>
</article>

Why Modify the Theme?

• This method is permanent and does not rely on JavaScript injection.
• Gives you complete control over where the rule is applied.
• Useful if you want to target specific sections of your website.

Which Method Should You Use?

If you need a quick and easy fix, use Code Injection. Modifying your theme is a better choice if you want a more permanent solution and don't mind editing theme files.

Conclusion

Ghost gives you great flexibility, but sometimes minor tweaks like opening links in a new tab require some extra work. Whether you use JavaScript code injection or update your theme, both methods ensure a better user experience by keeping visitors engaged with your content while allowing them to explore external links easily.

Do you have any questions or need help with Ghost customisation? Let us know!