Manejo de caracteres especiales en slugs de URL: guía para desarrolladores
La mayoría de los generadores de slugs funcionan bien con texto en inglés simple. Pero el mundo real tiene caracteres acentuados, alfabetos no latinos, emojis y símbolos. Esta guía explica cómo manejarlos todos al generar slugs de URL.
El problema: las URLs tienen un conjunto de caracteres limitado
Las URLs solo pueden contener de forma segura caracteres ASCII: letras (a-z), dígitos (0-9) y unos pocos símbolos como guiones y guiones bajos. Todo lo demás debe convertirse o codificarse con porcentaje (como %C3%A9 para é). Las URLs con codificación porcentual son feas, difíciles de leer y malas para el SEO. La solución es la transliteración.
Transliteración: la técnica central
La transliteración convierte los caracteres de un alfabeto a su equivalente ASCII más cercano. Algunos ejemplos comunes:
| Entrada | Transliterado | Idioma |
|---|---|---|
| é, è, ê, ë | e | Francés, portugués |
| ü, ö, ä | ue, oe, ae | Alemán |
| ñ | n | Español |
| ß | ss | Alemán |
| ç | c | Francés, portugués |
Nuestro generador de slugs realiza la transliteración automáticamente cuando la opción «Transliterar» está activada.
Normalización Unicode
Antes de la transliteración, debes normalizar el texto Unicode. El carácter é puede almacenarse de dos formas en Unicode:
- Compuesto (NFC): un solo punto de código (U+00E9)
- Descompuesto (NFD): la letra «e» seguida de una marca de acento combinante (U+0065 + U+0301)
Ambos se ven idénticos en pantalla, pero son bytes distintos. Normalizar a NFKD (descomposición de compatibilidad) separa la letra base de su marca de acento, lo que facilita eliminar los acentos:
// JavaScript
function removeAccents(text) {
return text
.normalize('NFKD')
.replace(/[\u0300-\u036f]/g, '');
}
removeAccents('Café Résumé');
// Output: Cafe Resume
Caracteres CJK (chino, japonés, coreano)
Los caracteres CJK no se transliteran al latín de forma significativa. Hay dos enfoques comunes:
- Usar romanización (pinyin para el chino, romaji para el japonés). Librerías como
pinyin(npm) okuroshiropueden hacerlo, pero los resultados quizá no coincidan con lo que esperan los usuarios. - Mantener los caracteres tal cual. Los navegadores y buscadores modernos manejan bien las URLs Unicode. Google puede indexar URLs con caracteres CJK. La URL se codificará con porcentaje en la barra de direcciones, pero se mostrará correctamente en los resultados de búsqueda.
Para la mayoría de los casos, la opción 2 es más segura—el texto CJK romanizado puede ser ilegible para los hablantes nativos.
Emojis en las URLs
Aunque es técnicamente posible (los emojis se codifican con porcentaje), poner emojis en los slugs es mala idea:
- Se convierten en cadenas codificadas con porcentaje extremadamente largas
- Fallan en muchos sistemas y APIs
- Puede que los buscadores no los indexen correctamente
- No se pueden escribir manualmente
Elimina siempre los emojis durante la generación del slug. Un patrón de regex sencillo puede quitarlos:
text.replace(/[\u{1F600}-\u{1F6FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/gu, '')
Caracteres especiales comunes
Así maneja un buen generador de slugs los caracteres especiales comunes:
| Carácter | Acción | Motivo |
|---|---|---|
| & | Reemplazar por «and» o eliminar | Tiene un significado especial en las URLs |
| @, #, ?, = | Eliminar | Caracteres reservados de URL |
| “ ” ‘ ’ | Eliminar | Puntuación, sin valor semántico en el slug |
| — – | Reemplazar por guion | Propósito similar, normalizar al separador |
| / \ | Reemplazar por guion | Las barras crean segmentos de ruta |
Probar tu generador de slugs
Prueba con estas entradas complicadas para asegurarte de que tu generador maneja los casos límite:
"Café Menu — Special Édition!"→cafe-menu-special-edition"100% Free & Open Source"→100-free-and-open-source" Lots of spaces "→lots-of-spaces"---triple---hyphens---"→triple-hyphens- Cadena vacía → debería devolver vacío o un valor por defecto
Prueba estos ejemplos directamente en nuestra herramienta Slugify Online y observa cómo maneja cada caso.
Soporte de librerías
Para una comparación más profunda de las librerías de slugs entre lenguajes, consulta nuestra guía sobre cómo convertir texto en slug en JavaScript, Python y PHP. Cada librería maneja los caracteres especiales de forma distinta, así que elige la que se ajuste a tu caso de uso.