Guides on system administration, 3D printing and other technology related projects.

Open External Links in New Window with Ghost Blog

Open External Links in New Window with Ghost Blog

By default, Ghost opens external links in the same window. As of now there’s no way to change that. This can be an issue, as your visitors may click a link and never return to your site again.

The Ghost editor uses Markdown, which is a language used to convert formatted text into XHTML. Unfortunately, XHTML doesn’t allow the target attribute to be used in elements.

So, how exactly do you get Ghost to open links in a new window then?

Thankfully it’s quite easy to add a target to external URLs with jQuery.

The code

If you’re not already running jQuery on your website, download the latest version of it onto your server and place it into the content/themes/your-theme-name-here/assets/js/ directory.

Next log into your blog’s admin panel. Under settings, click Code injection.

Copy into Blog Header:

<script type="text/javascript" src="/assets/js/jquery-3.2.1.min.js"></script>

Copy into Blog Footer:

Replace *ericmathison.com with your own domain. And be sure to escape the period in your domain with double slashes.*

<script type="text/javascript">
  $(document).ready(function(){
    $('a[href^="http://"], a[href^="https://"]').not('a[href*=ericmathison\\.com]').attr('target','_blank');
  });
</script>

If your code injection page looks like this image, go ahead and save your changes.

ghost-code-injection

Congratulations. External links on your website will no longer open in the same window.

Worried that Google’s algorithm might penalize you for this method, as it displays different content to different users? Do you have a better method than using Javascript? Let us know and discuss it in the comments section below!


Tags: #ghost

© Eric Mathison 2017-2020.