How to Generate Clean, URL-Safe Slugs from Any Title

The problem with raw titles in URLs

You cannot put How I Saved 20% (in 2024!) directly into a URL. Spaces become %20, the parentheses and percent sign need encoding, and the result is ugly, fragile, and bad for SEO. A slug is the clean, lowercase, hyphenated version, how-i-saved-20-in-2024, that reads well, survives copy-paste, and tells both users and search engines what the page is about.

How slugification works

Turning a title into a slug is a pipeline of small, well-defined steps:

1. Normalize Unicode so accented letters can be separated from their marks.
2. Strip the diacritic marks, leaving the base letters.
3. Lowercase everything.
4. Replace every run of non-alphanumeric characters with a single hyphen.
5. Trim leading and trailing hyphens.

function slugify(input) {
  return input
    .normalize('NFKD')                 // decompose é into e + accent
    .replace(/[̀-ͯ]/g, '')   // remove the accent marks
    .toLowerCase()
    .trim()
    .replace(/[^a-z0-9]+/g, '-')       // non-alphanumerics to hyphen
    .replace(/^-+|-+$/g, '');          // trim stray hyphens
}

slugify('Héllo, World!');         // "hello-world"
slugify('  Node.js & React  ');   // "node-js-react"
slugify('50% Off — Today Only!'); // "50-off-today-only"

The key trick is normalize('NFKD'), which decomposes é into a plain e plus a combining accent character; the following regex then deletes the accent, so café becomes cafe instead of vanishing entirely.

A practical walkthrough

Say your CMS does not auto-generate slugs and you are publishing an article titled 10 Things I Wish I Knew About CSS Grid. Paste it into the Slug Generator and you get 10-things-i-wish-i-knew-about-css-grid, ready to paste into your permalink field. For a batch of headings, run them through one at a time and drop each result into your router or front-matter.

Common pitfalls

• Uniqueness. Two posts titled "Untitled" produce the same slug. Append a short id or a date if collisions are possible; the slug is often a database key.
• Length. Very long slugs get truncated in search results and shared links. Trimming to the first five to seven meaningful words is common.
• Stop words. Some teams strip a, the, and of for shorter URLs. It is optional, but be consistent so old links keep working.
• Non-Latin scripts. The NFKD trick only helps with Latin accents. For Cyrillic, Greek, or CJK you need a transliteration library, or you keep the characters and percent-encode them.
• Changing slugs. A slug is a public URL. If you change it after publishing, set up a redirect or you will break every existing link.

Related tools

If you need to encode characters that a slug intentionally strips, for query strings or non-Latin paths, reach for URL Encode / Decode. And when you want the same words in a different naming style for a variable or file name, the Case Converter handles camelCase, snake_case and the rest.

Conclusion

A good slug is short, lowercase, ASCII, hyphen-separated, and stable. The slugify pipeline above gets you there for Latin text, and understanding each step means you will know exactly why an accent disappeared or a hyphen doubled up. When you just want the result, the Slug Generator does it instantly and privately in your browser.