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

Linking to external resources adds context and credibility, but it can also pull visitors away from your Ghost site. A small JavaScript snippet can keep their place intact by opening external links in a new tab.

The challenge with external links

External links are useful, but they can interrupt the reading flow and make it less likely that visitors return to your original page. The goal is to let readers explore references without losing their place on your site.

The JavaScript fix

This script automatically detects external links and opens them in a new tab:

document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a');
    const currentDomain = window.location.hostname;

    links.forEach(link => {
        if (link.hostname !== currentDomain) {
            link.target = '_blank';
            link.rel = 'noopener';
        }
    });
});

How to implement it

• Access Code Injection: In Ghost Admin, go to Settings > Code Injection.
• Paste in the footer: Add the script inside opening and closing script tags in the Site Footer area.
• Save your changes: External links will now open in a new tab automatically.

Why this helps

• User-friendly: Readers can explore external resources without losing their place.
• Lower friction: This can help reduce unnecessary drop-off.
• Simple to maintain: One lightweight snippet handles the behavior site-wide.

Need more help

If you want help implementing this or need deeper Ghost navigation customization, contact Inoryum.