How to create jump links in Ghost

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.

Other platforms (Substack, Wordpress) have their own pretty similar ways of doing it, In Substack you go to the live post, however beside the section, a little lock icon appears and that's where you get the relevant link you paste in.

Here are two jump link. 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

The wrong way to do jump links on Ghost

I write about jump links in this 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 last 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.