What is Slug?
Slug is a URL-friendly version of a string, typically derived from a title or name, that uses only lowercase letters, numbers, and hyphens. It is used to create human-readable and SEO-friendly URLs for web pages, blog posts, and other content.
Quick Facts
| Full Name | URL Slug |
|---|---|
| Created | Web usage from early 2000s |
| Specification | Official Specification |
How Slug Works
The term 'slug' originated from newspaper publishing, where it referred to a short name given to an article for internal tracking. In web development, a slug transforms titles like 'How to Create a Website' into 'how-to-create-a-website'. Slugs improve SEO by including relevant keywords in URLs and make links more shareable and memorable. Good slugs are lowercase, use hyphens instead of spaces or underscores, remove special characters and stop words, and are concise yet descriptive.
Key Characteristics
- Lowercase letters and numbers only
- Hyphens replace spaces (not underscores)
- Special characters and accents removed
- Concise yet descriptive
- SEO-friendly with relevant keywords
- Unique within the same content type
Common Use Cases
- Blog post and article URLs
- Product page URLs in e-commerce
- Category and tag URLs
- User profile URLs
- Content management systems
Example
Slug Transformation Examples:
Original Title Slug
"Hello World!" hello-world
"How to Learn JavaScript" how-to-learn-javascript
"Top 10 Best Practices" top-10-best-practices
"What is a URL?" what-is-a-url
"Café & Restaurant Guide" cafe-restaurant-guide
"2024 年度总结" 2024-nian-du-zong-jie
URL Examples:
https://example.com/blog/hello-world
https://example.com/products/blue-widget
https://example.com/users/john-doe
JavaScript Slug Function:
function slugify(text) {
return text
.toLowerCase()
.trim()
.replace(/[^\w\s-]/g, '')
.replace(/[\s_-]+/g, '-')
.replace(/^-+|-+$/g, '');
}