Getting Started

How to create URL subdirectories in Ghost

Organizing related content into subdirectories is important for SEO. This post will walk you through the process of setting up a subdirectory structure in Ghost and make it easy to add content later.

How to create URL subdirectories in Ghost

A good example of using subdirectories is on the Mindspun website:  the footer contains links to pages that compare Mindspun against various technologies.  These pages are related so the best practice is to show that relation using a common subdirectory. Each of these pages lives under the subdirectory /compare/ and we'll use this structure as our example throughout this article.

Here's an overview of the process:

  1. Create an internal tag.
  2. Create a collection in routes.yaml using that internal tag.
  3. Create posts and tag them with the new tag.
  4. Update your theme to list posts with that tag (optional).

Ghost Posts vs Pages

It may seem like we should be using pages (in the Ghost terminology) instead of using posts since the resulting posts are completely different from the usual blog articles.   This is really just a terminology issue.  A 'post' in Ghost is a generic piece of content and the collection it lives in really determines what it is.  Pages are just special cases of posts that are outside of a collection and are therefore only useful for special cases (like the home page).

Create an internal tag

Internal tags are used for content organization outside of the standard /tags/ hierarchy.  We'll create an internal tag to indicate which posts are shown under the /content/ subdirectory.

Internal tags created like regular tags but begin with a hash (#) symbol.  Go to the Tags page of the Ghost admin dashboard and create a new tag:

Ghost internal tag
Ghost add internal tag

The name has to begin with a hash sign so we'll use #compare.   You can leave everything else blanks for now and just hit Save.  After saving the tag, note that the slug is auto populated as hash-compare - this value will be used to filter our collection.

Create a collection

A collection in Ghost is just a group of associated content.  Content can only live in one collection so if you add posts to a collection they will automatically be excluded from later collections.  This means that after we are done, any posts that appear under /compare/ will not appear under /blog/.

Collections are defined via the routes.yaml file.  Download your routes.yaml file via the 'Labs' section in the Ghost admin dashboard.

Ghost routes.yaml

Add a section under the 'collections' section indicating where you want the posts to appear - in our case under /compare/.

routes:
  /:
    data: page.home
    template: home

collections:
  /compare/:
    permalink: /compare/{slug}/
    filter: tag:hash-compare
  /blog/:
    permalink: /blog/{slug}/

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

Save your changes and upload the resulting file.  Don't worry about breaking anything, if there is an error Ghost will warn you and not accept the file.

Tag Posts

Tag each comparison post with the #compare tag and don't use that tag for any other purpose.  Those tagged posts will now show up under /compare/ and no where else. Adding new posts to this subdirectory will be easy - simply tag them.

Update your theme (optional)

Since the subdirectory is now its own collection, you'd need some way to link to your posts.  One approach is to just hard-code the post permalink - similar to what you have to do with a Ghost page - but a better approach is to use the Ghost API.  Using the API ensures that content you add later automatically shows up where it's supposed to without you having to remember to add it manually.

The footer on mindspun.com lists all the posts tagged with #compare under the comparisons column.  The list of posts is automatically generated by the Ghost theme via the following:

<h5 class="text-uppercase">Comparisons</h5>
<ul class="list-unstyled">
    {{#get "posts" limit="all" filter="tag:hash-compare" order="published_at asc"}}
        {{#foreach posts}}
            <li><a href="{{url}}">{{title}}</a></li>
        {{/foreach}}
    {{/get}}
</ul>

The posts are ordered by publish date since we tend to write the most important ones first, but you can use any filters you want.

Conclusion

Organizing your content by subdirectory might not be the most intuitive in Ghost, but is very important from an SEO perspective.  We've seen how to use a Ghost collection and tags to make certain posts exclusively appear in a path subdirectory.  Finally, we saw how to update our theme to automatically list our subdirectory posts without having to hard-code links.

Ghost Registration Form

Need a backend for your website registration form? The Ghost subscription API is a perfect choice.

Everything You Need to Know About Subscription Forms in Ghost

This article describes the Ghost membership/subscription form so you can use it in your website theme. Learn about form settings, CTA buttons, etc.

Small Business SEO Strategies That Work

Several different things are required for any individual or business

Great! Check your inbox and click the link to confirm your subscription.
Please enter a valid email address!