What is a slug and why should you use it in your URLs?

You know, I'm sure, what an identifier is, whether it's incremental (1, 2, 3, 4...), whether it's a UUID (123e4567-e89b-12d3-a456-426614174000) or in some other form.

All these alternatives have their advantages, but also a flaw that they all share: The lack of semantics.

If I give you a url in the following form: https://cadeau.com/15643, it will be impossible for you to guess what's hidden on this page (except maybe a gift).

Now, if I give you this url: https://cadeau.com/peluche-licorne-rose, you normally know what to expect, because instead of a simple identifier, I used a SLUG.

A slug is a simplified textual representation of a resource (or its title) whose format allows it to be passed as a url parameter just like an identifier.

The format isn't standardized, but it follows at least these few rules:

• Only lowercase characters
• No spaces or special characters other than "-" or "_"
• No accented characters

Best Practices

Passing a slug instead of an identifier in your websites will have two positive effects: Improve the page's natural SEO (because robots also index the content of the url) and give users confidence so they'll click on your links more easily.

But for that, you need to follow a few best practices, including the following:

• The resource's keywords must absolutely appear in the slug
• It must remain readable and not contain too many one- or two-letter words
• It must truly reflect the content of the resource and not mislead the user
• It must be unique

Be careful, slugs must be used with discernment; they'll be, for example, very useful for blog posts, categories, or e-commerce products. However, they won't be relevant for multiple resources that can have the same name, such as people for example, there are too many homonyms.

Tip: If you still want to use slugs for resources having the same name, you can add an identifier at the end of the slug, example: pierre-dupont-1654 and pierre-dupont-1752.

A Javascript Library

Generating a slug using regular expressions can sometimes quickly become complex, which is why there's a Javascript library called "Slugify" that makes the job much easier.

With slugify, you just need to call slugify('some string') to convert a string into a beautiful slug.

Moreover, the library lets you configure how slugs are generated, and even allows you to turn certain special characters (like emojis) into semantically meaningful words, example: "♥" becomes "love".

You even have the option to extend this feature by adding semantics to other special characters! In short, I recommend it.

Fun Fact

In English, the term "slug" literally means "limace" [snail-like creature], and was formerly used to describe the long lines of lead forming a sequence of characters in the world of print publishing.

The word has traveled through the ages, being used by journalists to "identify" an article passing from hand to hand from the freelancer to the editor-in-chief, up until today when it's widely used on the web, especially on blogs and e-commerce sites.