Qu'est-ce qu'un slug et pourquoi faut-il l'utiliser dans vos urls ?

Vous savez, j'en suis sûr, ce qu'est un identifiant, qu'il soit incrémental (1, 2, 3, 4...), que ce soit un UUID (123e4567-e89b-12d3-a456-426614174000) ou encore sous une autre forme.

Toutes ces alternatives ont leurs avantages, mais aussi un défaut qu'elle partagent toutes : Le manque de sémantique.

Si je vous donne une url sous la forme suivante : https://cadeau.com/15643, il vous sera impossible de deviner ce qui se cache dans cette page (à part éventuellement un cadeau).

Maintenant, si je vous donne cette url : https://cadeau.com/peluche-licorne-rose, vous savez normalement à quoi vous attendre, parce qu'à la place d'un simple identifiant, j'ai utilisé un SLUG.

Un slug est une représentation textuelle simplifiée d'une ressource (ou de son titre) et dont le format lui permet d'être passé en paramètre d'une url tout comme un identifiant.

Le format n'est pas normalisé, mais il respecte au minimum ces quelques règles :

• Uniquement des caractères minuscules
• Aucun espace ni aucun caractère spécial à part "-" ou "_"
• Pas de caractère accentué

Bonnes pratiques

Passer un slug à la place d'un identifiant dans vos sites web va avoir deux effets positifs : Améliorer le référencement naturel de la page (car les robots indexes aussi le contenu de l'url) et donner confiance aux utilisateurs afin qu'ils cliquent plus facilement sur vos liens

Mais pour celà, il faut suivre quelques bonnes pratiques parmi les suivantes :

• Les mots-clés de la ressource doivent absolument apparaitre dans le slug
• Ce dernier doit rester lisible et ne pas contenir trop de mots d'une ou deux lettres
• Il doit refléter réllement le contenu de la ressource et ne pas tromper l'utilisateur
• Il doit être unique

Attention, il faut utiliser les slugs avec discernement, ils seront par exemple très utiles pour des articles de blogs, des catégories, ou encore des produits e-commerce. Par contre, ils ne seront pas pertinents pour de multiples ressources qui peuvent avoir le même nom comme des personnes par exemple, il existe trop d'homonymes.

Astuce : Si vous voulez quand même utiliser les slugs pour des ressources ayant le même nom, vous pouvez rajouter un identifiants à la fin du slug, exemple : pierre-dupont-1654 et pierre-dupont-1752.

Une librairie Javascript

Générer un slug en passant par des expressions régulières peut parfois devenir vite complexe, c'est pour ça qu'il existe une librairie en Javascript appelée "Slugify" qui facilite beaucoup le travail.

Avec slugify, il vous suffit d'appeler slugify('some string') pour convertir une chaine de caractère en un magnifique slug.

En plus, la librairie vous permet de configurer la manière dont les slugs sont générés, et permet même de transformer certains caractères spéciaux (comme les émojis) en mots porteurs de sémantique, exemple : "♥" devient "love".

Vous avez même la possibilité d'étendre cette fonctionnalité en rajoutant de la sémantique sur d'autres caractères spéciaux ! Bref, je recommande.

Fun Fact

En anglais, le terme "slug" signifie littéralement "limace", et était autre fois utilisé pour décrire les longues lignes de plombs formant une suite de caractères dans le monde de l'impression papier.

Le mot à traversé les époques en étant utilisé par les journalistes pour "identifier" un article qui passait de main en main du pigiste jusqu'au rédacteur en chef, jusqu'à être aujourd'hui beaucoup utilisé dans le web, notamment sur les blogs et les sites e-commerce.