By Eli Colpaert, on Nov 29, 2019

Creating an automated slug with Contentful

Header for article: creating an automated slug in Contentful

When writing an article or blog post, you want to have an appealing title. Something with a lot of keywords in it, or something to attract your audience to read on. This sounds reasonable and fairly easy to do. But there's more to the matter than just picking the correct title.

The problem

For the purposes of SEO and technical requirements, you need to have a valid URL. If you have a title like "My super awesome article," the browser is going to replace the spaces with a strange token: %20. This is not very readable in your browser's address bar:

https://www.your-site.com/my%20super%20awesome%20article

Introducing a slug

To solve this problem, you can introduce a slug. You might be asking yourself — what is a slug? A slug is the part of a URL which identifies a particular page on a website in an easy-to-read way. In other words, it’s the part of the URL that explains the page’s content. For example, if the URL is https://your-site.com/slug, the slug is simply slug.

When writing a blog post or article, begin by replacing the slug with the title of your article, and incorporating several key words to draw the visitor's attention. Next to attention, readability of your article title in the URL is also important. A solution for this problem is to add dashes as a replacement for every space in your title. So the title changes from

https://www.your-site.com/my%20super%20awesome%20article

to

https://www.your-site.com/my-super-awesome-article

Now your URL is reader-friendly and contains all the SEO keywords you wanted to include as well. You win on two fronts. But there’s another problem — how do you teach everyone who ever writes an article or blog post these technical requirements? You probably want to automate the replacement of spaces in the title to dashes, to avoid concerning editorial people with technicalities. Content-driven people shouldn't have to care about how to format a valid URL. They should care about content and writing an appealing, descriptive title.

Creating a slug in Contentful

Automating the removal of spaces to obtain a valid URL is a great way to make sure content creators meet technical requirements. In the steps below, I’ll show you how you can configure your Title attribute to allow spaces and generate a slug without spaces — replaced by dashes — at the same time.

First, create a new content type and name it whatever suits you best. Something like Article or BlogPost should fit.

slug-1

slug-2

After creating the content model, you can assign some attributes. Of course, a good article needs a title, so create one. Next, define a slug as shown below:

The results

Once the slug is created, all that’s left is to test your automated slug creator in Contentful:

By automating the generation of valid, human-readable URLs, you reduce the risk of errors and increases usability. Now you can give copywriters the freedom to write slugs without fear!

Eli Colpaert

Working at delaware, professional SAP C/4 enthusiast and passionate about new Open-Source technology.

Community Contributor
Become a contributor