How to Create Jump Links in Ghost & Substack

Jump links are extremely useful and help with the user experience. A lot of people read on their phones and it helps them navigate your writing easily. It's quite hard on the thumb if it is a wall of text. Google is mobile-first when it comes to search, so we need to bear that in mind.

Ghost actually makes it very easy to create jump links. Other platforms (Substack, Wordpress) have their own pretty similar ways of doing it. I'll go over how Substack does jump links here.

In this post:

• The wrong way to do jump links on Ghost
• The right way to do jump links on Ghost
• How to do jump links in Substack

I will use these three jump links to illustrate how they work. There are cases where I wouldn't use them and some of my favourite bloggers don't. If it was a more reflective essay, say, and I wanted people to read from start to finish, then I might not use them.

The wrong way to do jump links on Ghost

Jump links are like a table of contents where you can click on the text and the link takes you to the relevant section on the page.I write about jump links in more detail in a section in another post - What are jump links?

You can see what it looks like in Ghost on this post, for example. If you're to interested in the wrong way to do jump links, you can jump forward to The right way to do jump links on Ghost.

Here is what I would do. It's valid enough, but time consuming. I would add this bit of code before each heading:

<div id="insert menu name"></div>

Then I would highlight the text in the jump links menu. Then I would click to add a link (as if you were going to add a url link.) Then I would add #insert-menu-name as the address of the link. The two bits of text need to be exactly the same.

And it does work, it creates a link from your table of content at the top (the list of jump links)

However...

I wrote about a similar issue of conflict I had with canonical tags here : What are canonical tags?

Ghost creates this link automatically. And so the extra code (and sometimes what followed the #) created a conflict.

This next link should take you directly to it on the other page, so you can see how jump links work between pages. Note - you have to add the whole url when it is on another page, not just #what-are-canonical-tags. I had to add https://www.iainfmacleod.com/seo-for-writers-and-creatives/#what-are-canonical-tags

Remember to add the # in the full url.

The right way to do jump links on Ghost

It is very easy.

For each menu you highlight in say H2, Ghost automatically creates the necessary link.

So for this section, the text I input into the link box is #jump-links-on-ghost-the-right-way. I have the heading as an H2. (Ignore things like ! - ? and so on.)

And it then works without any conflict. Also much simpler for your blogging workflow.

It also works across pages, so you can take readers exactly where you want - rather than people having to scroll around in a blog trying to find the piece you're referenceing. It's a bit like a zettelkasten. Pretty cool!

Google also sometimes uses these links in search. It helps Google make sense of your site.

So now I have to go back to the start and re-do all of it. As the saying goes, you can't buy experience, but you certainly pay for it. Anyway, am pretty happy to discover this and it will really make this part of the process simpler.

How to do jump links in Substack

It is very easy. When you add an H3 header, you hover over it to the left. A little clink icon appears and you click on that. Sometimes I've fun that the page needs to be published first.

You can then use that as you would a normal web link. When someone clicks on, it takes them directly to that section.

It's great because your writing becomes a web of interconnected ideas. It is like a ready made frame of reference which people can navigate around easily.