In ghost cms, all links in your posts are automatically opened in the same browser window. There are pros and cons to both options, but if you're reading this article, you're probably already aware of these and want to open external links on your Ghost site in a new tab.
What should you think about when you open links in a new tab?
When doing so, there are several things to keep in mind:
Time on site: Having external links open in a new tab can help keep visitors on your site longer, potentially improving engagement metrics such as bounce rate and time on site.
User experience: If a reader is in the middle of reading your blog post, they are unlikely to want to leave the page every time they click a link. You want people to spend as much time as possible on your site and have the best possible experience.
Inaccurate Analytics: Users may want to better understand the context of an article by clicking a link, but this does not mean they want to leave your site without having finished reading the article. Your site analytics, on the other hand, will tell a different story. If your external links open in the same tab, it will appear that users are leaving your site faster than they are.
Back-Button Fatigue: Users experience back-button fatigue when they open external links in the same tab. When a user visits an external website, they must use the back button to return to your website. If they decide to follow the links on the other website, they will have to hit the back button several times before returning to your site. This creates a lot of extra work for users.
How to do it in Ghost
In Ghost, there are two main ways to open external links in a new tab: HTML and Javascript. With HTML, you can control each link individually, whereas, with Javascript, you can target all external links in your article.
The HTML method
As previously stated, this allows you to control each link separately, but you must do so using either the HTML card or the Markdown editor. The most important thing is that the links must have to do the target=" blank" attribute. Here's one:
<a href="https://www.example.com" target="_blank">Go to example dot com</a>
As you can see, it's not difficult, but it is inconvenient because every external link must be replaced with this code block, and you lose some of the Ghost editor's flexibility.
The Javascript method
Another option is to use Javascript to check all external links and programmatically add the target=" blank" property to them. You can do this with the JavaScript snippet below.
<script>
const domain = location.host.replace('www.', '');
const links = document.querySelectorAll('a');
links.forEach((link) => {
if(!link.href.includes(domain)) {
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noreferrer noopener');
}
})
</script>
In Ghost Admin Settings > Code Injection > Site Footer, paste this snippet. Because your content must be loaded when the script is executed, it should be placed in the footer.
To describe the various parts of the script:
-
the domain constant will store your domain name for comparison against other links
-
the links constant will store all links on your current page
-
the next step is looping through the links and adding the target="_blank" attribute as well as the rel="no-referrer no opener" attribute.
Please feel free to modify the script to meet your specific requirements. For example, you can only target links within your post's content if you know the CSS class or ID. In our case, this is usually content, so the code would be:
const links = document.querySelectorAll('.content a');
If you want to learn more about the no-opener and no-referrer attributes, check out this article guide.
To Sum Up
There are some things to think about before changing the behavior of your links, as well as some simple things you can do to open external links in a new tab. As previously stated, the Javascript code provided can be modified, and this is a good way to handle this. Besides, if you want to buy any premium ghost themes then visit our website here- themeix.com
