Generador de Slug

¿Qué es un slug de URL?

Un slug de URL es la parte de una dirección web que identifica una página específica de forma legible para los usuarios. En la URL https://ejemplo.com/blog/mi-primer-articulo, el slug es mi-primer-articulo. Un generador de slug transforma el título o descripción de una página en una cadena que contiene únicamente letras minúsculas, números y guiones (u otro separador elegido). Este proceso elimina espacios, suprime acentos y diacríticos, descarta caracteres especiales y normaliza los espacios en blanco en separadores individuales.

La generación de slugs es un paso estándar en sistemas de gestión de contenidos, generadores de sitios estáticos, plataformas de blog y cualquier aplicación que derive URLs a partir de la entrada del usuario. WordPress, Ghost, Hugo, Next.js y Django incluyen lógica de generación de slugs porque las URLs legibles mejoran tanto la usabilidad como la optimización para motores de búsqueda. Un slug bien formado indica al usuario el contenido de una página antes de hacer clic en el enlace.

El término "slug" proviene del mundo editorial, donde se utilizaba como etiqueta corta para identificar una historia durante la producción. En el desarrollo web, el slug cumple la misma función: es un identificador compacto, único y seguro para URLs, derivado de un título o nombre más largo. Como los slugs se generan mediante programación, un generador de slugs fiable garantiza coherencia en todas las páginas y configuraciones regionales.

¿Por qué usar este generador de slug?

Crear slugs de URL de forma manual es propenso a errores. Olvidar eliminar un acento, dejar un guion doble o no contemplar un caso especial con entrada Unicode puede producir URLs rotas o poco elegantes. Esta herramienta gestiona esos problemas de forma automática.

Casos de uso del generador de slug

Reglas de generación de slug y gestión de caracteres

La generación de slugs sigue una secuencia predecible de transformaciones. Entender cada paso te ayuda a depurar resultados inesperados o a construir tu propia función slugify.

1. 1. Normalización Unicode (NFD)

   Descompón los caracteres combinados en carácter base + marca de combinación. Por ejemplo, é (U+00E9) se convierte en e + acento agudo combinante (U+0301). Esto hace que los diacríticos sean eliminables en el siguiente paso.
2. 2. Eliminar diacríticos

   Elimina todos los caracteres del bloque Unicode de marcas diacríticas combinantes (U+0300–U+036F). Tras este paso, café se convierte en cafe y Ñ se convierte en N.
3. 3. Eliminar caracteres especiales

   Reemplaza cualquier carácter que no sea una letra, dígito, espacio en blanco o guion por un espacio. Esto descarta puntuación, símbolos y caracteres sin equivalente ASCII.
4. 4. Recortar y colapsar espacios en blanco

   Elimina los espacios en blanco iniciales y finales, luego colapsa todas las secuencias de espacios consecutivos, guiones bajos o guiones en un único separador elegido.
5. 5. Aplicar mayúsculas/minúsculas y separador

   Convierte a minúsculas (opcional) y une las palabras con el separador elegido: guion (-), guion bajo (_) o punto (.).

Referencia de transformación de caracteres

La tabla siguiente muestra cómo se gestionan los caracteres habituales durante la generación de slugs:

Ejemplos de código

Generación de slugs en lenguajes y frameworks populares. Cada ejemplo gestiona la normalización Unicode, la eliminación de diacríticos y la inserción de separadores.

function slugify(text, separator = '-') {
  return text
    .normalize('NFD')                   // decompose accented chars
    .replace(/[\u0300-\u036f]/g, '')    // strip diacritics
    .toLowerCase()
    .replace(/[^\w\s-]/g, ' ')          // drop special chars
    .trim()
    .replace(/[\s_-]+/g, separator)     // collapse whitespace → separator

  // slugify('Café au Lait')      → "cafe-au-lait"
  // slugify('Hello World', '_')  → "hello_world"
}

// Node.js alternative using the `slugify` npm package:
// npm install slugify
// const slugify = require('slugify')
// slugify('Hello World', { lower: true, strict: true }) → "hello-world"

import re
import unicodedata

def slugify(text: str, separator: str = '-') -> str:
    """Convert text to a URL-safe slug."""
    text = unicodedata.normalize('NFD', text)
    text = text.encode('ascii', 'ignore').decode('ascii')  # strip non-ASCII
    text = text.lower()
    text = re.sub(r'[^\w\s-]', ' ', text)
    text = text.strip()
    text = re.sub(r'[\s_-]+', separator, text)
    return text

# slugify('Café au Lait')      → "cafe-au-lait"
# slugify('Hello World', '_')  → "hello_world"

# Alternative: python-slugify (pip install python-slugify)
# from slugify import slugify
# slugify('Café au Lait')  → "cafe-au-lait"

package main

import (
	"regexp"
	"strings"
	"unicode"

	"golang.org/x/text/unicode/norm"
	"golang.org/x/text/transform"
	"golang.org/x/text/runes"
)

func slugify(text string) string {
	// NFD normalize and strip diacritics
	t := transform.Chain(norm.NFD, runes.Remove(runes.In(unicode.Mn)), norm.NFC)
	result, _, _ := transform.String(t, text)

	result = strings.ToLower(result)
	re := regexp.MustCompile(`[^\w\s-]+`)
	result = re.ReplaceAllString(result, " ")
	result = strings.TrimSpace(result)
	re = regexp.MustCompile(`[\s_-]+`)
	result = re.ReplaceAllString(result, "-")
	return result
}

// slugify("Café au Lait") → "cafe-au-lait"
// slugify("Hello World")  → "hello-world"

function slugify(string $text, string $separator = '-'): string {
    // Transliterate non-ASCII characters
    $text = transliterator_transliterate(
        'Any-Latin; Latin-ASCII; Lower()', $text
    );
    // Remove anything that is not a word char, space, or hyphen
    $text = preg_replace('/[^\w\s-]/', ' ', $text);
    $text = trim($text);
    $text = preg_replace('/[\s_-]+/', $separator, $text);
    return $text;
}

// slugify('Café au Lait')      → "cafe-au-lait"
// slugify('Hello World', '_')  → "hello_world"

Preguntas frecuentes