URL Slugs: How to Create SEO-Friendly URLs for Your Website

What is a URL Slug?

A URL slug is the part of a URL that identifies a specific page in a human-readable format. It comes after the domain name and path:

https://example.com/blog/how-to-create-seo-friendly-urls
                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                         This is the slug

Good slugs are:

• Readable — Humans can understand what the page is about
• Descriptive — Contains relevant keywords
• Short — Easy to share and remember
• Consistent — Follow the same pattern across your site

URL Slug Best Practices

1. Use Hyphens, Not Underscores

✅ /blog/how-to-use-react-hooks
❌ /blog/how_to_use_react_hooks
❌ /blog/how+to+use+react+hooks

Google treats hyphens as word separators but underscores as word joiners. web-development is two words; web_development is one.

2. Use Lowercase Only

✅ /blog/javascript-promises
❌ /blog/JavaScript-Promises
❌ /blog/JAVASCRIPT-PROMISES

URLs are case-sensitive on most servers. Mixing cases creates duplicate content issues.

3. Keep It Short

✅ /blog/react-hooks-guide
❌ /blog/the-complete-and-comprehensive-guide-to-using-react-hooks-in-2024-for-beginners

Aim for 3-5 words. Remove stop words (the, a, an, is, for, to, and, of, in).

4. Include Target Keywords

✅ /tools/json-formatter (targets "json formatter")
✅ /blog/css-flexbox-guide (targets "css flexbox guide")

Put the most important keyword first.

5. Handle Special Characters

Remove or transliterate special characters:

"Café & Résumé" → cafe-and-resume
"What is JSON?" → what-is-json
"10 Tips for #WebDev" → 10-tips-for-webdev
"Über Cool Naïve" → uber-cool-naive

Generate slugs from any text with our Text to Slug converter.

6. Avoid Dates in Slugs

✅ /blog/react-hooks-guide
❌ /blog/2024/01/15/react-hooks-guide

Dates make URLs longer and suggest the content is outdated when the year changes.

7. Use Canonical URLs

If the same content is accessible at multiple URLs, use a canonical tag:

<link rel="canonical" href="https://example.com/blog/react-hooks-guide" />

Generate canonical tags with our Meta Tag Generator.

Implementing Slugs

JavaScript

function slugify(text) {
  return text
    .toLowerCase()
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/[^a-z0-9\s-]/g, "")
    .replace(/\s+/g, "-")
    .replace(/-+/g, "-")
    .replace(/^-|-$/g, "");
}

Python

import re
import unicodedata

def slugify(text):
    text = unicodedata.normalize("NFD", text)
    text = text.encode("ascii", "ignore").decode("utf-8")
    text = re.sub(r"[^a-z0-9\s-]", "", text.lower())
    text = re.sub(r"[\s-]+", "-", text).strip("-")
    return text

Next.js Dynamic Routes

app/blog/[slug]/page.tsx → /blog/my-post-title

Related Tools

• Text to Slug — Generate URL-friendly slugs
• Meta Tag Generator — Generate canonical URLs
• Google SERP Preview — Preview URLs in search results
• URL Encoder — Encode special characters in URLs
• Case Converter — Convert text to kebab-case