DEV Community

Michael Lip
Michael Lip

Posted on • Originally published at zovo.one

URL Slugs: The Small Detail That Affects SEO More Than You Think

#javascript #seo #webdev #tutorial

A URL slug is the human-readable part of a URL that identifies a specific page: /how-to-bake-sourdough-bread/. It looks simple. Getting it right involves understanding URL encoding, SEO best practices, Unicode normalization, and CMS-specific conventions.

The rules

A good slug follows these conventions:

  1. Lowercase only: URLs are case-sensitive. Page-Title and page-title are different URLs. Using lowercase prevents duplicate content from case variations.

  2. Hyphens, not underscores: Google treats hyphens as word separators and underscores as word joiners. web-development is two words for SEO. web_development is one word.

  3. No special characters: Remove or transliterate non-ASCII characters. Replace spaces with hyphens. Remove punctuation.

  4. No stop words: "a", "the", "is", "of", "and" can often be removed. /the-best-way-to-learn-javascript/ becomes /best-way-learn-javascript/. This is debatable. Some SEOs keep stop words for readability.

  5. Short but descriptive: 3-5 words is ideal. /how-to-bake-sourdough-bread/ is better than /h-t-b-s-b/ (too short) and /the-complete-step-by-step-guide-to-baking-perfect-sourdough-bread-at-home/ (too long).

The algorithm 

function slugify(text) {
  return text
    .toString()
    .normalize('NFD')                   // Decompose accented chars
    .replace(/[\u0300-\u036f]/g, '')    // Remove diacritical marks
    .toLowerCase()
    .trim()
    .replace(/[^a-z0-9\s-]/g, '')      // Remove non-alphanumeric
    .replace(/[\s_]+/g, '-')            // Replace spaces/underscores
    .replace(/-+/g, '-')               // Collapse multiple hyphens
    .replace(/^-+|-+$/g, '');          // Trim hyphens from ends
}
Enter fullscreen mode Exit fullscreen mode

The normalize('NFD') step is crucial for internationalization. It decomposes characters like e (e with acute accent) into e + combining acute accent, then the regex removes the accent mark. This converts "creme brulee" into "creme-brulee" instead of removing the entire character.

Slug collision handling

When two pages would produce the same slug, you need disambiguation. Common strategies:

  • Append a number: page-title, page-title-2, page-title-3
  • Append a hash: page-title-a1b2c3
  • Include a category prefix: /recipes/chocolate-cake/, /reviews/chocolate-cake/

Most CMS platforms use the number-appending strategy. WordPress, for example, automatically adds -2, -3, etc. when a slug collision occurs.

Slug permanence

Once a page is published, its slug should not change. If you change a slug, the old URL returns a 404 unless you set up a redirect. Lost backlinks, broken bookmarks, and search index confusion result.

If you must change a slug, implement a 301 (permanent) redirect from the old URL to the new one. This preserves the SEO value of any backlinks to the old URL.

I built a slug generator at zovo.one/free-tools/slug-generator that converts titles and strings into clean, SEO-friendly slugs. It handles Unicode, stop word removal (optional), collision detection, and generates slugs compatible with major CMS platforms.

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.

Top comments (0)