# Unfriendly URL slug in Vanilla JS

> How to fix unfriendly url slug in Vanilla JS — with the exact fix and copy-paste code.

_Category: Search visibility · Detector `seo` · Check `slug-unfriendly` · Severity: info_

A URL like /Blog_Post_00f3a2b1 is hard to read, hard to share, and gives search engines no keyword signal. Clean, human-readable slugs get more clicks when the URL shows in results and are easier to link to. AI-built apps frequently route by database ID or UUID and keep underscores or camelCase from variable names.

## The fix for Vanilla JS

Generate clean slugs when creating content and map them to your routes; redirect legacy ID URLs.

```js
// store a slug alongside the id, route on the slug
router.get('/blog/:slug', handler)
```

### Steps

1. Add a slugify step that lowercases and hyphenates titles
2. Route by the clean slug (optionally slug + id)
3. 301-redirect old ID/underscore URLs to the new slug

## How VibeCheck detects it

The `seo` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `Unfriendly URL slug`
- **Threshold:** path contains a UUID, underscore, or capital letters

## FAQ

### Hyphens or underscores in URLs?

Hyphens. Google treats hyphens as word separators but underscores as joiners, so “scaling_postgres” reads as one token while “scaling-postgres” reads as two words.

### Can I keep the database ID in the URL?

You can pair it with a readable slug (/blog/scaling-postgres-42), but a bare ID or UUID is unfriendly. If you change the scheme, 301-redirect the old URLs.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/unfriendly-url-slug.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/unfriendly-url-slug. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt