Herramientas · Texto · Generar un slug · Guías · How to Turn a Title Into a Clean URL Slug

How to Turn a Title Into a Clean URL Slug

5 min de lectura

The slug generator turns a title into a clean, URL-safe slug the instant you finish typing - no button to press, no separate "generate" step.

Step 1 - paste or type the title

The title box takes several lines. With "One slug per line" on, which is the default, each line becomes its own slug, so a whole list of titles can be converted at once. Turn it off and newlines are treated as ordinary whitespace, so a title that wrapped across two lines when you copied it still becomes one slug. There's a practical 1,000-character limit; past it, a toast names the limit but the text isn't truncated, since the transform underneath is cheap at any length this tool will realistically see - the cap exists because a slug longer than a couple of hundred characters has stopped being a usable URL segment in practice, not because the tool struggles with longer input.

The slug updates on every keystroke and every paste, with a short debounce so a fast typist doesn't see it flicker mid-word. There's no separate "generate" button to find or click - if you can see the title in the field, the slug underneath it is already current.

Step 2 - choose a separator

Hyphen is the default, matching the dominant convention across the web - the choice most static-site generators and CMS platforms use out of the box. Underscore is offered as the alternative for the systems that specifically prefer it - some programming-adjacent contexts, some CMSes with their own established convention. Both produce the same word boundaries; only the character joining them changes, and switching between them re-renders the current slug immediately without needing to retype the title.

Step 3 - decide on case

Lowercase is on by default, which is the near-universal convention for a URL slug - mixed-case URLs are technically valid but inconsistent about whether two visitors' typed-in copies of the same URL will actually match, since URL paths are case-sensitive on most servers. Turning the lowercase option off preserves the original casing of Latin letters instead, for the rare case where a mixed-case slug is genuinely wanted. It makes no difference to Arabic or any other script without a case distinction; those pass through identically either way, checkbox on or off.

A worked example

Type Café à Zürich Guide and the slug becomes cafe-a-zurich-guide the instant the last letter lands - the accents are gone (é and ü decomposed and stripped), the spaces became hyphens, and the accent-free words survived untouched. Switch the separator to underscore without retyping anything and it becomes cafe_a_zurich_guide - same words, same order, only the joining character changes.

Type What's the Real Cost of Cloud Hosting? and the result is whats-the-real-cost-of-cloud-hosting - the apostrophe simply disappears, so "What's" stays one word instead of splitting into "what" and "s". Every other run of punctuation, like the question mark at the end, collapses into a single separator or is trimmed away, which is why the slug neither doubles a hyphen nor ends on one.

The transform, step by step, from a raw title to a finished slug A pipeline of four steps: the raw title has its whitespace collapsed, then accented Latin and Arabic characters are stripped down to their base letters, then it is optionally lowercased, then any run of characters that is not a letter or a number becomes the chosen separator, with repeated or trailing separators collapsed and trimmed. Raw title Strip accents / diacritics Lowercase Join non-letter, non-number runs become the separator repeated and trailing separators are collapsed and trimmed
The same four-step transform runs on every title, in this order, every time.

What happens to non-Latin input

Arabic and any other non-Latin script is preserved in the slug rather than transliterated to a Latin guess or stripped out - type مقال عن البرمجة and the slug is مقال-عن-البرمجة, the words kept whole and joined by the separator, exactly as typed. A mixed title works the same way: React مقدمة becomes react-مقدمة, each word kept intact in the order it was typed. This guide covers why that's the deliberate choice here and what most other slug generators do instead.

What the output field's direction setting is actually for

The slug output is always shown left-to-right, even when it contains Arabic words, because a URL path is a structural value read in byte order rather than a line of prose - the same reasoning this codebase already applies to a page-range field like "1-3, 5, 8-10". Individual Arabic words inside that left-to-right container still render their own letters correctly; what's fixed is only the order the hyphen-separated segments appear in, matching the actual order they'll appear in in the URL.

When the result is empty

Some input legitimately slugifies to nothing - a title made entirely of emoji or punctuation, for instance. When that happens, the output is honestly empty, with a small note explaining why, rather than a fabricated placeholder standing in for a slug that doesn't actually exist. A single character, on the other hand, works exactly like a longer title - there's no minimum length below which the tool starts behaving differently.

Keyboard use

The separator choice is a two-option control operated with the arrow keys once it has focus, the lowercase option is a normal checkbox, and the title field is a normal text input - nothing here needs a mouse, and the slug updates the same way regardless of whether the last change came from typing, pasting, or switching an option with the keyboard.

Copying it

One Copy button next to the output puts the exact slug text on your clipboard. Nothing about the title is uploaded anywhere at any point - the whole transform runs in your browser, on every keystroke, which matters if the title in question is an unpublished draft or an internal project name nobody's decided to make public yet.

For the broader reason a clean slug is worth the extra step, the why guide covers where naive slug generators actually break.

Probar Generar un slug gratis Generar un slug

Herramientas relacionadas