SlugGenerator.app

Manejo de caracteres especiales en slugs de URL: guía para desarrolladores

6 min de lectura

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:

EntradaTransliteradoIdioma
é, è, ê, ëeFrancés, portugués
ü, ö, äue, oe, aeAlemán
ñnEspañol
ßssAlemán
çcFrancé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:

  1. Usar romanización (pinyin para el chino, romaji para el japonés). Librerías como pinyin (npm) o kuroshiro pueden hacerlo, pero los resultados quizá no coincidan con lo que esperan los usuarios.
  2. 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ácterAcciónMotivo
&Reemplazar por «and» o eliminarTiene un significado especial en las URLs
@, #, ?, =EliminarCaracteres reservados de URL
“ ” ‘ ’EliminarPuntuación, sin valor semántico en el slug
— –Reemplazar por guionPropósito similar, normalizar al separador
/ \Reemplazar por guionLas 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.