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.


This is a companion discussion topic for the original entry at https://strapi.io/blog/how-to-create-a-slug-system-in-strapi-v4

Hey, really interesting post thanks!

The solutions you have mentioned for querying by slug work but seem heavy handed when another potential solution to this would be to overwrite the ‘findOne’ method to search using the slug instead of the id. Was this something considered or is there a way to manually change this in the UI without having to edit the underlying code? Given that u-id’s are unique we should be able to guarantee that there will be either 0 or 1 entities which have the slug specified.

For context, it would be preferable to have a graphql which looks like:

query Test {
  example(slug: "test-slug") {
    id
    slug
  }
}

Over using the where JSON.

@OhKalypso Thank you!! Yeah I think you are right, and I’ve felt this way too. I may be building a new site on Strapi soon and will look into that when I do. My initial thought is that you would need to override the findOne method on that collections model/controller. I think it would be simple to do, I just haven’t done it yet.

Could you please describe, how I can use the UUID field with internationalization? I tied it and I got an error “this attribute must be unique”

1 Like

Completely agree that it should be a smaller change and I think with a bit more work by editing the content-manager admin files I could potentially add this dropdown to the admin panel as well so that non-developers could change this. I don’t know if other Strapi user’s have found this to be a pain point but it feels like it should be an out of the box option on the UI in my mind.

.

@bio great question! That’s not something I have tried. I’m guessing that you will need to set the UUID manually instead of using the name or title field unfortunately, or override the UUID method that generates the Unique ID, but I would need to look more into it.

If that is an issue, you can set a slug automatically with the method used in version 3. The code may look a bit different, but have the same implementation as far as features go. Here is a link in the version 3 docs on how to do that: Slug System - Strapi Developer Documentation

In my current project I added a slug uid with targetfield name. But what happens, is, when I create a new entry, that per default the slug refers to my modelName, not my targetfield. When I push the regenerate button, everything’s fine…is there a way to fix this?
that you don’t have to hit regenerate every time you create a new entry?

@cwray-tech, I have a requirement where my static content is unique to each 50 states in the United State. For example, if the State = New York, then display NY’s content. The logic is the same for all of the states. How can I accomplish it using “Slug” or I must look for a different approach?

Thank you.

Hello!
Thanks for writing this text, was looking for a way to get collection element through slug in strapi v4 and this was really helpful.

But could you update this REST API example to be like:
/api/blogs?filters[Slug][$eq]=create-a-slug-system-with-strapi-v4

Those backslashes can be quite confusing :grin:

Cheers!

As with @bio we’ve also bumped into the ‘unique’ problem with internationalization. We’d actually like to ‘not’ translate the slug, and therefore have it shared across locales. I’ll take a look at the v3 code approach.

1 Like

Is there a way to build a UID from multiple fields, such as from a parent page’s slug with the custom slug after? Or even prepend a custom string to the slug, such as 'news/orblog/`?

hey @chrisrhymes out of the box in the admin panel, that isn’t possible but you could create a lifecycle hook to do that for create ca custom field (better for use on multiple collections)

This field is no good when using localisation I am afraid. You cannot keep the same slug on entries across different locales. In many cases, e.g. “Product” types, you would not want to translate the slug, nor add numbers to the end.

Ideally it would be good to have an option to not have it unique, or a new field for slug which operates the same, slugifies another field, but is not unique.

Interesting. I have not tried this with locales but you bring up a good point. Will be interesting to see how this can be accomplished.

How is it work with apollo/client on the frontend. I get 400 bad request error when navigating to the slug?

Hi, Ok, I need the slug field, which generated automatically, like post-${year}-${month}-${day}-${hours}-${minutes}-${seconds}
How can I do it now?

I have added a slug as a UID in Strapi but got slug: null in the console even thought I put the slug to be the name attributes. I have checked that the attributes is showing name on each collectionType in my admin panel in Strapi but int the console in the client sill show: null. Anyone with the same issue?

At the moment we don’t have this type of functionality out of the box, but one idea is to create a custom field that allows you to do that or a service that can auto generate the required slug.

I made this plugin for that

Also it is cool plugin for slug is Slugify | Strapi Market but I still not watched it.