Optimize Your Ghost CMS Site’s Navigation: Make External Links Open in New Tabs

When you're building a content-focused website with Ghost CMS, every interaction matters. You spend time creating articles, newsletters, membership experiences, and carefully structured navigation to keep readers engaged.

At some point, you'll likely need to link to external websites. Maybe you're citing a source, recommending a useful tool, linking to a partner organization, or directing readers to additional resources.

By default, Ghost opens all links in the same browser tab unless you've manually configured them otherwise. While that's perfectly acceptable in many situations, there are times when opening external links in a new tab can improve the overall user experience.

In this guide, we'll look at why you might want external links to open in new tabs and how to implement this behavior across your Ghost website using a simple JavaScript snippet.

Why Open External Links in New Tabs?

Imagine a reader is halfway through one of your articles when they click an external resource you've referenced.

If that link opens in the same tab, your website is immediately replaced by the destination site. While the visitor can always return, many won't.

Opening external links in a new tab allows readers to:

• Continue reading your content later
• Keep your website open while exploring references
• Compare information between multiple sources
• Return to your site without using browser navigation

For publishers, newsletters, educational websites, membership communities, and content-heavy publications, this can create a smoother browsing experience.

When Should You Use This?

Opening external links in new tabs is particularly useful for:

• Resource pages
• Documentation websites
• Newsletters
• Research publications
• Educational content
• Membership websites
• Product comparisons
• Curated content collections

However, internal links should generally remain in the same tab. When readers move between pages on your own website, keeping navigation within the same browser tab usually creates a more natural experience.

The goal isn't to force visitors to stay on your site. It's simply to make it easier for them to continue where they left off.

A Simple Solution for Ghost CMS

Ghost doesn't currently include a built-in setting that automatically opens external links in a new tab across your entire site.

Fortunately, we can achieve this using Code Injection.

The following script automatically detects external links and adds the necessary attributes to open them in a new tab.

document.addEventListener('DOMContentLoaded', () => {
    const currentHost = window.location.hostname;

    document.querySelectorAll('a').forEach(link => {
        if (
            link.hostname &&
            link.hostname !== currentHost
        ) {
            link.setAttribute('target', '_blank');
            link.setAttribute('rel', 'noopener noreferrer');
        }
    });
});

What Does This Script Do?

Let's break it down:

Detects the Current Website

The script first determines the hostname of your Ghost website.

For example:

example.com

Finds Every Link

Next, it scans the page and identifies every anchor element:

<a href="https://example.com">

Compares Domains

For each link, it checks whether the destination hostname matches your website.

If the destination is different, it's considered an external link.

Adds Security Attributes

The script automatically adds:

target="_blank"

which opens the link in a new tab.

It also adds:

rel="noopener noreferrer"

These attributes improve security and prevent the destination site from gaining access to certain browser window properties.

How to Add the Code to Ghost

Ghost makes this process straightforward.

Step 1

Log in to Ghost Admin.

Step 2

Navigate to:

Settings → Code Injection

Step 3

Locate the Site Footer section.

Step 4

Paste the JavaScript snippet.

Wrap it inside script tags:

<script>
document.addEventListener('DOMContentLoaded', () => {
    const currentHost = window.location.hostname;

    document.querySelectorAll('a').forEach(link => {
        if (
            link.hostname &&
            link.hostname !== currentHost
        ) {
            link.setAttribute('target', '_blank');
            link.setAttribute('rel', 'noopener noreferrer');
        }
    });
});
</script>

Step 5

Save your changes.

Ghost will automatically load the script across your website.

Testing the Implementation

After saving the code:

1. Visit a page on your website.
2. Find an external link.
3. Click the link.
4. Verify that it opens in a new browser tab.

You should also test:

• Article content
• Navigation links
• Footer links
• Call-to-action buttons
• Membership pages

to ensure everything behaves as expected.

Optional: Apply Only to Navigation Links

Some publishers prefer to leave article links untouched while modifying only navigation links.

In that case, you can target a specific menu container instead of all links on the page.

For example:

document.querySelectorAll('.gh-head-menu a')

This approach limits the behavior to your website navigation.

The exact selector will depend on your Ghost theme.

Optional: Exclude Specific Domains

You may have trusted external services that shouldn't open in a new tab.

For example:

• Checkout systems
• Authentication portals
• Customer dashboards

You can modify the script to ignore specific domains when needed.

This allows for more advanced navigation control without changing individual links manually.

Things to Keep in Mind

Opening external links in new tabs isn't always the right choice.

Some accessibility experts argue that users should be informed whenever a new tab is created. Others prefer letting users decide how links should open.

The best approach depends on your audience and the type of website you're running.

For most publishing-focused Ghost websites, opening external resources in a new tab is a practical compromise that helps readers continue their journey without losing their place.

Final Thoughts

Ghost CMS gives publishers a clean and flexible foundation, but small customizations can make a significant difference to the reader experience.

Automatically opening external links in new tabs is a simple enhancement that helps readers explore references, tools, and resources without navigating away from your website entirely.

The implementation takes only a few minutes, requires no theme modifications, and can be added directly through Ghost's built-in Code Injection feature.

If you're building a custom Ghost experience and need help with themes, memberships, migrations, integrations, automation, or publishing workflows, we're always exploring ways to push Ghost beyond its default capabilities.