DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. On Slugs and How to Generate Them Quickly

On Slugs and How to Generate Them Quickly

Slugs can be a great way to boost your article's SEO by making more human readable URLs. Learn how to generate them using jQuery!

Łukasz Mądrzak user avatar by
Łukasz Mądrzak
CORE ·
Dec. 18, 18 · Tutorial
Like (2)
Save
Tweet
Share
14.91K Views

Join the DZone community and get the full member experience.

Join For Free

Introduction

I’ve been developing a blog feature for one of my customers this week. A blog is naturally a simple list of posts displayed in a chronological order. Each post will probably consist of properties such as a title, the author’s name, content, and maybe a date.

I think the date is an important one because whenever I judge articles trustworthiness and relevance on the net I always look at how recent the article is. We all know how quickly things become obsolete in tech.

All of this sounds straightforward and it is. But us developers are not about that easy life. We always look for ways to make our lives harder. In theory you could invoke a blog post from the URL by its unique ID pretty easily and be done with it.

The URL would look something like this.

http://example.com/index.php?article=39610

39610 is the unique id of your wonderful, ground breaking article that will wow the elites. That would be easy. But in comes the slug. I personally don’t like that name very much. WordPress calls them permalinks. So you pick whatever names suits you better. Back to business. Here comes the slug!

http://example.com/2018/title-of-my-awesome-article

Isn’t this URL just so much more pleasant on the eye? I think so. But it has other benefits too.

The main reason you would want to use a slug is SEO. Google will reward you for descriptive information about your content in your URL.

I hope you are convinced that your blog needs a slug and this tutorial will show you how to generate slugs on your website using jQuery rather quickly.

Here’s the end result:

Image title




* Notice how certain symbols get converted to text and others get ignored. Nifty!

The Nitty Gritty

First of all, the requirements:

  • jQuery
  • jquery-slugify package

Both can be obtained pretty easily using npm.

npm i jquery

npm i jquery-slugify

When you install jquery-slugify it will also install the speakingurl package, as it’s dependant on it.

Then make sure to import them in your HTML file.

<script src="speakingurl.min.js"></script>
<script src="slugify.min.js"></script>

For the sake of this tutorial I have created a super simple form consisting of two text inputs.

<input id="title" type="text" style="width: 600px"/>
<br>
<input id="slug" type="text" style="width: 600px"/>

The important parts are the IDs. The input with id=‘title’ is the one user will type their article title into. The latter one is the one the slug will be generated into.

And time to discover the magic code that does it all in three lines.

<script>
    jQuery(function ($) {
        $("#slug").slugify("#title", {
            separator: '-' // If you want to change separator from hyphen (-) to underscore (_).
        });
    });
</script>

And you're done! Congrats.

Conclusion

Blogs are very popular these days and can do wonders for your customers SEO. If you’re not going to use WordPress and instead, implement your own solution, make sure that your links are SEO friendly. And as you know now, slugs are a nice and quick way of achieving that.

And if you are too lazy in this holiday season and don't feel like typing all of the 7 lines I've shown you above. I have created a small repo with a working example which you can simply pull and copy into your own project. Enjoy.

https://github.com/madrzak/example-slug

Blog POST (HTTP) SEO JQuery WordPress Typing Google (verb) HTML Npm (software)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • GPT-3 Playground: The AI That Can Write for You
  • Problems of Cloud Cost Management: A Socio-Technical Analysis
  • Implementing Infinite Scroll in jOOQ
  • Learning by Doing: An HTTP API With Rust

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: