Ghost CMS: Open all external links in new tab

When it comes to providing a frictionless browsing experience, ensuring that your users don't abruptly leave your website is a key concern. On Ghost CMS, a popular content management system, one common issue is that all links open within the current tab, including external links. This can potentially lead to higher bounce rates, as users might navigate away from your site entirely.

In this article, we'll discuss a simple JavaScript solution to enhance user experience by automatically opening external links in new tabs. This will allow users to explore external links without leaving your website, which can help to reduce bounce rates and improve engagement.

The Issue with Ghost CMS

Ghost CMS, known for its simplicity and user friendliness, unfortunately opens all links within the current tab by default. While this is standard behavior, it might not be the most user-friendly approach, especially when it comes to external links. When users click on a link that directs them to an external website, they might lose track of your original content and potentially never return. Although this behavior can be achieved using an HTML card in the Ghost editor, it requires writing raw HTML, which is not the most intuitive method and can be challenging to implement across a lot of content.

A Simple JavaScript Solution

To address this issue, we can use a simple JavaScript solution to modify the behavior of external links without adjusting any source theme template files. By adding a small JavaScript script to the Ghost admin code injection section, we can make external links open in a new browser tab, ensuring that users remain on your website while accessing external content.

<script>
    window.addEventListener('load', ()=>{
		const web_domain = window.location.host;
		const ahrefs = document.querySelectorAll('a') || [];
		const regexPattern = /^(http:\/\/|https:\/\/)/;
		for(let a of ahrefs){
    		if(regexPattern.test(a.href) && !a.href.includes(web_domain)){
        		console.log('[*] external url found...');
        		a.setAttribute('target', '_blank');
    		}
		}
        
    })
</script>

Benefits of Opening External Links in New Tabs

By automatically opening external links in new tabs, you provide a more seamless browsing experience for your users. Here are some benefits:

• Improved User Experience: Users can easily access external content while keeping your website open, enhancing their browsing experience.
• Reduced Bounce Rates: Users are more likely to return to your site after exploring external content in a new tab, reducing bounce rates.
• Retained Engagement: By keeping users on your website, you increase the likelihood of retaining their engagement and encouraging further exploration.

Enhancing user experience is paramount for any website, and addressing the way links open is a critical aspect of this effort. By implementing the simple JavaScript solution discussed in this article, you can significantly improve user satisfaction and engagement on your Ghost CMS website. It's a small change with a big impact on your website's bounce rates and overall user experience.

If you have any Ghost CMS needs, please contact us. We offer a variety of professional services to help you get the most out of your Ghost CMS website.