Making slugs with the jQuery Slugular plugin
I’ve had some jQuery code around for a few years that generates a slug for you based on title text you provide.
I’ve had several bouts of working on it now to get it working just right, and it’s been in production in various content management systems for quite a long time. It seems to be pretty solid, so I’ve finally taken the time to put it into a jQuery plugin and get it on GitHub.
If you’re not familiar with a slug, it’s the URL-safe version of a title. So for example if I have a blog post titled “My Favourite Cafés”, its slug might be something like my_favourite_cafes.
Calling this piece of text a slug does sound daft but it seems to be a known term originating from newspaper production, and it’s tough to come up with a better name, so “slug” does the job.
People will slugify their text in different ways depending on their preference, but here’s what I do:
- Convert everything to lowercase.
- Condense multiple adjacent whitespace characters into one.
- Remove leading and trailing whitespace.
- Replace whitespace characters with something else. For my plugin the default is underscores as that’s my preference, but it’s customizable.
- Transliterate special characters to their basic equivalents.
äbecomesa, etc.
What you end up with is a neat, concise string that you can present in a URL without things getting messy. For example: paulherron.com/blog/my_favourite_cafes looks rather nicer than paulherron.com/blog/My%20Favourite%20Caf%C3%A9s.
To me this sort of stuff is important because I really subscribe to the idea the URL being part of the UI. People do interact with URLs directly – they chop bits out of them, type bits into them, read them out over the phone, write them down – so it makes sense to have that URL be concise and descriptive. It’s also nice to be able to see at a glance what a page is about (paulherron.com/blog/simple_nginx_setup_with_homebrew is more meaningful than paulherron.com/blog.php?id=4, for example). Not to mention, in optimizing these things for humans you’re probably getting an SEO boost too. There’s a bigger discussion here about URL formatting more generally (and I think that might be a blog post for another day), but using concise, meaningful slugs is certainly an important factor in creating a URL.
The challenge in a content management system is getting people (by which I really mean normal people – not people who are interested in naming conventions) to choose good slugs. Most don’t want to read up on your idiosyncratic formatting preferences before they publish their first post, and there’s no reason they should have to when you can take a good stab at auto-generating the correct thing anyway. I do think it’s worthwhile allowing it to be overridden as it’s not always going to be what’s desired, and hence I’ve billed this plugin as “unobstrusive”: you can manually override the suggestion with a custom slug, and as soon as you’ve done that it’ll stop interfering.
Anyway, I hope the plugin is useful!