By default, Ghost's post URLs are like this:

yourdomain.com/post-title/

For some use cases it's useful to organise posts using tags in each posts's URL. For this, it's best to use a post's "primary tag" (the first tag added to each post).

Say we have a site and want to split up posts into different sections. For this site, the homepage is custom landing page with some featured posts, then we will add tag directories and posts "within" these directories.

This is the URL structure that we will achieve:

Homepage
cookwell.com/ (an intro to the site, some featured posts)

Tag page
cookwell.com/cooking/ (blog-type list of posts for each category)

Post page
cookwell.com/cooking/30-ways-to-cook-baked-beans/

It's easy to get this to work; you just have to edit one file. Just bear in mind that you can only do this for primary tags (the first tag listed on a post), as you can only assign each post to one URL "folder".

How to add tags to your post URLs

Download your current routes.yaml file from Settings > Labs.

Edit the collections and taxonomies sections as follows, then re-upload the file.

  • The collection at / should have its permalink changed from /{slug}/ to /{primary_tag}/{slug}/
  • The tag value in the taxonomies section should be changed from /tag/{slug}/ to just /{slug}/

Here's the updated file:

routes:

collections:
  /:
    permalink: /{primary_tag}/{slug}/
    template: index

taxonomies:
  tag: /{slug}/
  author: /author/{slug}/

First, we want to add the tag into each post's URL, so we just append the primary_tag value to the permalink value in the root collection.

Secondly, we need to change the tag page URLs. By default, Ghost puts every tag list view at /tag/tag-name/ so we just remove the /tag prefix and change it to render just /tag-name/.

You then need to re-upload the routes file into Settings > Labs. The URL and page structure changes will be instant.

Thanks for reading!

Dan Rowden   Dan Rowden

I am the founder of Codelet. I have four years experience publishing and developing for Ghost, on over 100 sites. Codelet is an agency and blog about the basics and hidden features of Ghost.