How to Create a Slug System in Strapi v4

When building a website for a customer or yourself, you’d normally want to make your public content accessible via a human readable slug in your URLs. This will help for search engine optimization (SEO) and is easier for your users to understand. Thankfully, with Strapi’s headless CMS, you can easily make your content accessible in this way.

The Evolution of Strapi

In version 3 of Strapi, to build a slug system for your Strapi content, there are a few steps you need to do manually with code in order to generate slugs automatically for your Strapi app. You can also see a quick overview of building a slug system in the Strapi v3 docs. Now, in v4 of Strapi, things are much easier when it comes to generating slugs for your website content.

Strapi v4 Makes Generating Slugs Easy

In version 4 of Strapi, Strapi ships with a new field type, UID. This is for generating a unique identifier to use on your frontend.

What is super about this feature is that you can use another field within your content type to generate the unique identifier for you. For instance, if you write a blog with a title, “Create a slug system in Strapi v4,” a slug will be generated for you, such as “create-a-slug-system-in-strapi-v4”. Now, you don’t need to mess with code to get a slug system built out of the box!

Prerequisites

Before you get started, you should have some knowledge of Strapi and the Strapi Admin Panel. If you don’t, I would encourage you to check out the Strapi docs on how to get started.

If you want to follow along, here are some things you will need:

1. Node.JS on your machine. Download Node here.
2. A Strapi instance up and running in development mode.

Steps to Generating Slugs Automatically in Strapi v4:

Below I’ll outline a few steps to generating slugs for your content in Strapi v4.

Go to the Content-Types Builder. In development mode, go to the Content-Types builder in the Strapi Admin panel.

Create a new Content Type. Select the option to create a new collection type.

Name your collection:

Add your title field with a Text field type.

Add your slug field.

Save your Content Type

Add a new entry for your new content type.

Add a title, and see your slug generated!

Using Your Slug on the Frontend

The main reason you may want to generate and use slugs is for SEO purposes. Search engines can better understand and rank content with slugs that include title keywords. In order to utilize and get content by slug, you only need to filter your content by slug.

An example REST API request to the /blogs endpoint above is below:

    GET /api/blogs?filters\[Slug\][$eq]=create-a-slug-system-with-strapi-v4

An example GraphQL Query:

    query {
      blogs(filters: { Slug: { eq: "create-a-slug-system-with-strapi-v4" } }) {
        data {
          id
          attributes{
            Title
            Slug
            publishedAt
          }
        }
      }
    }

Conclusion

Now, it is easier than ever to generate slugs with Strapi. You can do it fully within the admin panel using the Content-Type Builder plugin and you don’t need to touch the code.

Give it a try and install v4 today. Open up your terminal, cd into a the directory you want your project to live. Then, type the following command.

    yarn create strapi-app my-project --quickstart