Générateur de Slugs

Qu'est-ce qu'un slug URL ?

Un slug URL est la partie d'une adresse web qui identifie une page spécifique sous une forme lisible par un humain. Dans l'URL https://example.com/blog/mon-premier-article, le slug est mon-premier-article. Un générateur de slugs transforme un titre de page ou une description en une chaîne ne contenant que des lettres minuscules, des chiffres et des tirets (ou un autre séparateur choisi). Ce processus supprime les espaces, retire les accents et les diacritiques, élimine les caractères spéciaux et normalise les espaces en séparateurs uniques.

La génération de slugs est une étape standard dans les systèmes de gestion de contenu, les générateurs de sites statiques, les plateformes de blog et toute application qui dérive des URL depuis une saisie utilisateur. WordPress, Ghost, Hugo, Next.js et Django intègrent tous une logique de génération de slugs, car des URL lisibles améliorent à la fois la facilité d'utilisation et l'optimisation pour les moteurs de recherche. Un slug bien formé indique à l'utilisateur le contenu d'une page avant même de cliquer sur le lien.

Le terme « slug » vient de l'édition de presse, où il désignait une courte étiquette servant à identifier un article pendant la production. En développement web, le slug remplit la même fonction : c'est un identifiant compact, unique et sûr pour les URL, dérivé d'un titre ou d'un nom plus long. Comme les slugs sont générés de manière programmatique, un générateur fiable garantit la cohérence sur toutes les pages et tous les paramètres régionaux.

Pourquoi utiliser ce générateur de slugs ?

Créer des slugs URL manuellement est source d'erreurs. Oublier de supprimer un accent, laisser un double tiret ou manquer un cas particulier avec une saisie Unicode peut produire des URL cassées ou disgracieuses. Cet outil gère ces problèmes automatiquement.

Cas d'usage du générateur de slugs

Règles de génération de slugs et gestion des caractères

La génération de slugs suit une séquence prévisible de transformations. Comprendre chaque étape vous aide à déboguer un résultat inattendu ou à construire votre propre fonction slugify.

1. 1. Normalisation Unicode (NFD)

   Décompose les caractères combinés en caractère de base + marque de combinaison. Par exemple, é (U+00E9) devient e + accent aigu combinant (U+0301). Cela rend les diacritiques supprimables à l'étape suivante.
2. 2. Suppression des diacritiques

   Supprime tous les caractères du bloc Unicode Combining Diacritical Marks (U+0300–U+036F). Après cette étape, café devient cafe et Ñ devient N.
3. 3. Suppression des caractères spéciaux

   Remplace tout caractère qui n'est pas une lettre, un chiffre, un espace ou un tiret par un espace. Cela élimine la ponctuation, les symboles et les caractères sans équivalent ASCII.
4. 4. Suppression et réduction des espaces

   Supprime les espaces en début et fin de chaîne, puis réduit toutes les séquences d'espaces, d'underscores ou de tirets consécutifs en un seul séparateur choisi.
5. 5. Application de la casse et du séparateur

   Convertit en minuscules (optionnel) et joint les mots avec le séparateur choisi : tiret (-), underscore (_) ou point (.).

Référence des transformations de caractères

Le tableau ci-dessous montre comment les caractères courants sont traités lors de la génération de slugs :

Exemples de code

Génération de slugs dans les langages et frameworks populaires. Chaque exemple gère la normalisation Unicode, la suppression des diacritiques et l'insertion du séparateur.

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"

Questions fréquentes