How to create jump links in Ghost & Substack

In this post I will talk about the mistakes I made in learning how to do this, and how Ghost actually makes it very easy.

This is part of the trouble with using AI apps like Gemini and ChatGPT to help you learn things like this. Sometimes they are only approximately right and really send you round the houses.

Why are jump links useful? 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.

Other platforms (Substack, Wordpress) have their own pretty similar ways of doing it. I'll g over how Substack does jump links here.

Here are three jump links. I will use them to illustrate how they work. Normally this is a short post so I wouldn't include them. Or if I wanted people to read from start to finish.

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

The wrong way to do jump links on Ghost

I write about jump links in this other post - What are jump links

It is like a table of contents where you can click on the text and the link takes you to the relevant section on the page.

You can see what it looks like in Ghost on this post, for example :

SEO for Writers, creatives and arts organisations

Here is what I would do. 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. 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 on interconnected ideas. It is like a ready made frame of reference which people can navigate around easily.