Slugify URL: créer des slugs propres et SEO-friendly

Qu'est-ce qu'un slug d'URL ?

Un slug est la partie lisible d'une URL, dérivée d'un texte (titre, nom, catégorie), normalisée pour être sûre, courte et compatible avec les navigateurs et moteurs de recherche.

Les aspects essentiels d'une bonne slugification :

1 Composants ASCII sûrs

Minuscules, chiffres et séparateur standard (tiret).

a-z, 0-9, -

2 Normalisation et nettoyage

Étapes typiques: baisser la casse, retirer la ponctuation et les espaces spéciaux, compacter les séparateurs.

lower → translittération → remplacements → collapse "-" → trim "-"

3 Translittérations usuelles

Rendre les caractères non-ASCII en équivalents ASCII stables :

é → e, à → a, ç → c, œ → oe, æ → ae

ß → ss, ø → o, ñ → n

— – − → - (unifier les tirets)

Αθήνα → athina, Москва → moskva

4 Contraintes techniques

Prendre en compte contraintes de système et SEO :

Longueur max (ex. 100-150), trimming

Encodage URL vs ASCII-only

Mots réservés (admin, api) à éviter

Stratégies anti-collisions (suffixes, ID)

Problèmes classiques

Copier-coller de titres multilingues

Introduit des tirets typographiques (– —), NBSP ou caractères non translittérés dans le slug.

Tests unitaires qui échouent

Deux environnements slugifient différemment (Unicode, locale), les comparaisons ne correspondent pas.

Remplacements partiels

Un simple replace des espaces laisse underscores, accents, ou doublons de tirets.

Regex \s ou \w incomplètes

Selon le moteur, \w inclut l'underscore et des lettres accentuées, ce qui rompt la stratégie ASCII-only.

Exemple de problème courant :

# Deux slugs visuellement proches mais différents

slug1 = "cafe-concert"

slug2 = "cafe–concert" # Contient un tiret en (–) au lieu de "-"

assert slug1 == slug2 # ❌ 404 possible ou duplication

Symptômes qui doivent vous alerter

🚨 Signaux d'alarme

!

Des 404 apparaissent après publication sans changement apparent du titre

!

Un index unique "slug" en base rejette des insertions inattendues (collisions)

!

Un titre modifié ne redirige pas et casse les liens partagés

!

Diff git sur un contenu qui semble identique mais le slug change subtilement

!

Des prévisualisations sociales dupliquées à cause de slugs proches

Bien implémenter la slugification

✨ Solution recommandée : Clean ASCII

Clean ASCII propose une slugification fiable: translittération des accents, unification des tirets, suppression des caractères non-ASCII et génération d'un slug prêt pour la production.

✅ Slugification automatique

Minuscules, tirets, suppression de ponctuation, accents et NBSP

📊 Analyse complète

Visualisation des remplacements, longueur, collisions potentielles

🧹 Règles personnalisées

Mapping de translittération, stop-words, normalisation des tirets

💾 Export propre

Slug final prêt à intégrer dans vos routes ou votre base

🔍 Slugifier mon texte

Autres méthodes d'implémentation

Affichage dans l'éditeur

✓ Activez l'affichage des espaces et tirets pour repérer – et — vs "-"

✓ Installez un linter qui surligne les caractères non URL-safe

En ligne de commande (Unix)

# Slugifier rapidement (iconv + tr + sed)

echo "Café — prêt ?" | iconv -f UTF-8 -t ASCII//TRANSLIT | tr '[:upper:]' '[:lower:]' | sed -E 's/[^a-z0-9]+/-/g; s/^-+|-+$//g'

# Inspecter les octets problématiques

hexdump -C titre.txt

# Unifier les tirets typographiques en "-"

sed -e 's/[–—−]/-/g' fichier.txt

# Compacter les séparateurs

sed -E 's/-{2,}/-/g; s/^-+|-+$//g' slug.txt

En code

JavaScript

const slugify = (s) => s
  .normalize('NFKD')
  .replace(/[^\w\s-]/g, '')
  .replace(/[_]/g, ' ')
  .toLowerCase()
  .replace(/[–—−]/g, '-')
  .replace(/\s+/g, '-')
  .replace(/-+/g, '-')
  .replace(/^-+|-+$/g, '');
// slugify("Café — prêt ?") => "cafe-pret"

Python

import unicodedata, re
def slugify(s: str) -> str:
  s = unicodedata.normalize('NFKD', s)
  s = s.encode('ascii', 'ignore').decode('ascii')
  s = s.lower()
  s = re.sub(r'[–—−]', '-', s)
  s = re.sub(r'[^a-z0-9]+', '-', s)
  return s.strip('-')
# slugify("Straße & Café") -> "strasse-cafe"

Excel / Google Sheets

=LOWER(REGEXREPLACE(REGEXREPLACE(REGEXREPLACE(A1;"[^A-Za-z0-9]+";"-");"^-+|-+$";"");"-{2,}";"-"))

Nettoyer et prévenir

🚀 Génération rapide avec Clean ASCII

Avant d'écrire vos propres regex, utilisez Clean ASCII pour produire un slug immédiat et cohérent :

✓ Translittération des accents

✓ Unification des tirets

✓ Export du slug final

Générer un slug maintenant

Méthodes techniques avancées

🔧 Normaliser

✓ Utilisez Unicode NFKD puis ASCII-only pour des équivalents stables

✓ Unifiez tous les tirets typographiques en "-"

✓ Imposez minuscules, longueur max et trimming des tirets

🧹 Filtrer

✓ Restreignez l'alphabet à [a-z0-9-] en dernière étape

✓ Remplacez NBSP et autres espaces par un espace puis "-"

✓ Supprimez ponctuation et symboles (emoji, devises, guillemets)

⚙️ Automatiser

✓ Générez le slug côté serveur, pas côté client uniquement

✓ Ajoutez un index unique et une stratégie de désambiguïsation

✓ Mettre en place des redirections 301 si le titre change

Checklist rapide

Slug ASCII-only: a-z, 0-9, tiret

Translittération NFKD + trimming des tirets

Unification des tirets typographiques en "-"

Index unique sur le champ slug + gestion des collisions

Redirections 301 quand le titre (donc le slug) change

Tests de cohérence entre environnements (dev, CI, prod)

Conclusion

Un bon slug rend vos URLs fiables, compréhensibles et durables. Une mauvaise normalisation crée des 404, des duplications et un SEO fragile.

Standardisez votre pipeline: translittération, unification des tirets, filtrage et anti-collisions. Vous gagnerez en stabilité et en référencement.