Gérer les caractères spéciaux dans les slugs d'URL : guide du développeur

La plupart des générateurs de slugs fonctionnent bien avec du texte anglais simple. Mais le monde réel comporte des caractères accentués, des écritures non latines, des emojis et des symboles. Ce guide explique comment les gérer tous lors de la génération de slugs d'URL.

Le problème : les URLs ont un jeu de caractères limité

Les URLs ne peuvent contenir en toute sécurité que des caractères ASCII : lettres (a-z), chiffres (0-9) et quelques symboles comme les traits d'union et les tirets bas. Tout le reste doit être converti ou encodé en pourcentage (comme %C3%A9 pour é). Les URLs encodées en pourcentage sont laides, difficiles à lire et mauvaises pour le SEO. La solution est la translittération.

Translittération : la technique centrale

La translittération convertit les caractères d'une écriture vers leur équivalent ASCII le plus proche. Quelques exemples courants :

Entrée	Translittéré	Langue
é, è, ê, ë	e	Français, portugais
ü, ö, ä	ue, oe, ae	Allemand
ñ	n	Espagnol
ß	ss	Allemand
ç	c	Français, portugais

Notre générateur de slugs effectue la translittération automatiquement lorsque l'option « Translittérer » est activée.

Normalisation Unicode

Avant la translittération, vous devez normaliser le texte Unicode. Le caractère é peut être stocké de deux façons en Unicode :

Composé (NFC) : un seul point de code (U+00E9)
Décomposé (NFD) : la lettre « e » suivie d'un signe diacritique combinant (U+0065 + U+0301)

Les deux semblent identiques à l'écran mais correspondent à des octets différents. Normaliser en NFKD (décomposition de compatibilité) sépare la lettre de base de son signe diacritique, ce qui facilite la suppression des accents :

// JavaScript
function removeAccents(text) {
  return text
    .normalize('NFKD')
    .replace(/[\u0300-\u036f]/g, '');
}

removeAccents('Café Résumé');
// Output: Cafe Resume

Caractères CJK (chinois, japonais, coréen)

Les caractères CJK ne se translittèrent pas en latin de façon pertinente. Il existe deux approches courantes :

Utiliser la romanisation (pinyin pour le chinois, romaji pour le japonais). Des bibliothèques comme pinyin (npm) ou kuroshiro peuvent le faire, mais les résultats peuvent ne pas correspondre aux attentes des utilisateurs.
Conserver les caractères tels quels. Les navigateurs et moteurs de recherche modernes gèrent bien les URLs Unicode. Google peut indexer les URLs comportant des caractères CJK. L'URL sera encodée en pourcentage dans la barre d'adresse mais s'affichera correctement dans les résultats de recherche.

Dans la plupart des cas, l'option 2 est plus sûre—un texte CJK romanisé peut être illisible pour les locuteurs natifs.

Les emojis dans les URLs

Bien que techniquement possible (les emojis sont encodés en pourcentage), mettre des emojis dans les slugs est une mauvaise idée :

Ils deviennent des chaînes encodées en pourcentage extrêmement longues
Ils cassent dans de nombreux systèmes et API
Les moteurs de recherche risquent de ne pas les indexer correctement
Ils ne peuvent pas être saisis manuellement

Supprimez toujours les emojis lors de la génération du slug. Un simple motif regex peut les retirer :

text.replace(/[\u{1F600}-\u{1F6FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/gu, '')

Caractères spéciaux courants

Voici comment un bon générateur de slugs gère les caractères spéciaux courants :

Caractère	Action	Raison
&	Remplacer par « and » ou supprimer	A une signification particulière dans les URLs
@, #, ?, =	Supprimer	Caractères réservés des URLs
“ ” ‘ ’	Supprimer	Ponctuation, sans valeur sémantique dans le slug
— –	Remplacer par un trait d'union	But similaire, normaliser vers le séparateur
/ \	Remplacer par un trait d'union	Les barres obliques créent des segments de chemin

Tester votre générateur de slugs

Testez avec ces entrées délicates pour vérifier que votre générateur gère les cas limites :

"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
Chaîne vide → doit renvoyer une valeur vide ou de repli

Essayez ces exemples directement dans notre outil Slugify Online et voyez comment il gère chaque cas.

Prise en charge par les bibliothèques

Pour une comparaison plus approfondie des bibliothèques de slugs selon les langages, consultez notre guide sur comment slugifier du texte en JavaScript, Python et PHP. Chaque bibliothèque gère les caractères spéciaux différemment—choisissez donc celle qui convient à votre cas d'usage.