Optimize Your Ghost CMS Site's Navigation: Make External Links Open in New Tabs
Enhance your Ghost site's navigation and reduce bounce rates. Discover how to easily make external links open in new tabs for a seamless user experience.
Linking to external resources enriches your content, but it can be frustrating when those links take visitors away from your Ghost website.
Let's enhance your user experience with a simple JavaScript solution that automatically opens external links in new tabs, keeping your visitors engaged with your content.
The Challenge with External Links
While valuable for providing context and credibility, external links carry a risk. Visitors clicking on these links leave your website, potentially interrupting their engagement and making it less likely they'll return.
Our goal is to offer a seamless browsing experience where external resources can be explored without losing a visitor's place on your site.
The Easy JavaScript Fix
A small snippet of JavaScript code provides a quick and efficient solution for automatically opening external links in new tabs. Here's the code:
document.addEventListener('DOMContentLoaded', function() { // Ensures code only runs after page is loaded
const links = document.querySelectorAll('a');
const currentDomain = window.location.hostname; // Cleaner domain tracking
links.forEach(link => {
if (link.hostname !== currentDomain) { // Compares domains for accurate external detection
link.target = '_blank';
link.rel = 'noopener'; // Security measure for external links
}
});
});How to Implement:
Access Code Injection: In your Ghost Admin, navigate to Settings > Code Injection.
Paste in the Footer: Add the provided code snippet to the Site Footer area inside opening & closing script tag.
Save Your Changes: That's it! Now all external links on your site will open in new tabs.
Benefits of This Solution
- User-Friendly: Visitors can explore external resources without navigating away from your primary content, improving their browsing experience.
- Reduces Bounce Rate: By keeping visitors engaged with your website, this tweak has the potential to lower your bounce rate.
- Quick and Easy: This is a simple solution, ideal for most Ghost website owners.
💡
Note: For even finer control, you can add the
target="_blank" attribute directly to the HTML of specific links that you want to open in a new tab.Need Assistance?
If you'd like to help implement this solution or explore more advanced navigation customizations for your Ghost site, feel free to contact us