Strapi Tutorial - How to Configure Slug to have Nice URLs for SEO

Introduction

In our previous posts, we have seen How to Create Article in Strapi by REST APIs.

For SEO purpose, you would want that the article URL will have some nice english characters, like title.

In this post, we will configure article content type to have a slug field based on the title.

Add the field in Article Content Type

• Goto your content type -> Article
• Add another field
• Text field, give it name: slug
• in Advance setting of this field, you can write in default value as Auto generated slug
• Save it
• Click on Collection types -> Add new article
• Click Configure the view
• Click on Slug field, a popup will open
• Click on “Editable field”. It should be OFF.
• Click on Done, Save.

Generate Unique Slug for Article

After this, we need to write little code to generate slug.

Edit /api/article/models/article.js, and put below code:

'use strict';

/**
 * Read the documentation (https://strapi.io/documentation/developer-docs/latest/development/backend-customization.html#lifecycle-hooks)
 * to customize this model
 */

const slugify = require('slugify');

const getUniqueSlug = async (title, num=0) => {
  let input = `${title}`;
  if (num > 0) {
    input = `${title}-${num}`;
  }
  const slug = slugify(input, {
    lower: true
   });
  const [article] = await strapi.services.article.find({
    slug: slug
  });
  if (!article){
    return slug;
  }
  else {
    return getUniqueSlug(title, num+1);
  }
}

module.exports = {
  lifecycles: {
    beforeCreate: async (data) => {
      data.slug = await getUniqueSlug(data.title);
    },
  },
};

In above code, we are using a new module: slugify. Install it via: npm i slugify

Also, I have written a custom function getUniqueSlug to get a unique slug. Otherwise, if two users write the same title. My slug will have same string. And, I did not want to give error to users to have unique title across.

Lets look at the examples below:

# title = How to do Exercise
# Slug will be
how-to-do-exercise

# Another user write same title,
# Now the slug will be
how-to-do-exercise-1

# Another user write same title,
# Now the slug will be
how-to-do-exercise-2

What Next

Note: Till now we have just populated the slug field. You would not see this slug in the actual URL. For this, now we will need to look at the frontend part.

See out next post for a dive into the frontend with Next.js