Opening external links in a new tab by default on Ghost

191107

• Ghost에서 외부 링크를 새로운 창에서 여는 방법

Ghost opens every external URL on the same page by default. It distracts the user and increases the bounce rate. It seems there is no built-in option on Ghost to open external links in a new tab, but we can fix this with a short code snippet.

<script>
var links = document.querySelectorAll('a');
for (var i = 0; i < links.length; i++) {
  if (links[i].hostname != window.location.hostname) {
    links[i].target = '_blank';
    links[i].rel = 'noopener';
  }
}
</script>

Paste this at Ghost Settings → Code injection → Site Footer.

How it works

Put every link in an array. If a link's hostname differs from this Ghost's hostname, change its target and rel.

Changing target to _blank will do the job. But that will run the external link in the same Ghost process, leading to possible performance drops and security risks. We can prevent this by setting rel to noopener.

Modifying every link with JavaScript whenever the page loads might slow your Ghost down, but the performance impact will be negligible unless the page has many external links. This trick will do its job until Ghost provides us a default option to open links in a new tab.

Additional Readings

• Links to cross-origin destinations are unsafe, Google Developers