Slug Generator

Wat is een URL-slug?

Een URL-slug is het gedeelte van een webadres dat een specifieke pagina op een voor mensen leesbare manier identificeert. In de URL https://example.com/blog/mijn-eerste-artikel is de slug mijn-eerste-artikel. Een slug generator zet een paginatitel of beschrijving om naar een reeks die alleen kleine letters, cijfers en koppeltekens (of een ander gekozen scheidingsteken) bevat. Dit proces verwijdert spaties, strips accenten en diakritische tekens, verwijdert speciale tekens en normaliseert witruimte naar enkelvoudige scheidingstekens.

Slug-generatie is een standaardstap in contentmanagementsystemen, statische sitegeneratoren, blogplatforms en elke toepassing die URL's afleidt van gebruikersinvoer. WordPress, Ghost, Hugo, Next.js en Django bevatten allemaal slug-generatielogica omdat leesbare URL's zowel de bruikbaarheid als de zoekmachineoptimalisatie verbeteren. Een goed gevormde slug laat de gebruiker zien wat een pagina bevat nog voordat ze op de link klikken.

De term "slug" is afkomstig uit de krantenwereld, waar hij verwees naar een kort label dat werd gebruikt om een artikel tijdens de productie te identificeren. In webontwikkeling vervult de slug dezelfde functie: het is een compacte, unieke, URL-veilige identificator die is afgeleid van een langere titel of naam. Omdat slugs programmatisch worden gegenereerd, zorgt een betrouwbare slug generator voor consistentie op elke pagina en in elk taalgebied.

Waarom deze Slug Generator gebruiken?

Handmatig URL-slugs aanmaken is foutgevoelig. Een accent vergeten te verwijderen, een dubbel koppelteken laten staan, of een randgeval met Unicode-invoer missen kan gebroken of lelijke URL's opleveren. Dit hulpmiddel verwerkt die problemen automatisch.

Toepassingen van de Slug Generator

Slug-generatieregels en tekenverwerking

Slug-generatie volgt een voorspelbare reeks transformaties. Inzicht in elke stap helpt u onverwachte uitvoer te debuggen of uw eigen slugify-functie te bouwen.

1. 1. Unicode-normalisatie (NFD)

   Ontbind gecombineerde tekens in basisteken + combinatiemerk. Zo wordt é (U+00E9) opgesplitst in e + combinerend accentteken (U+0301). Hierdoor kunnen diakritische tekens in de volgende stap worden verwijderd.
2. 2. Diakritische tekens verwijderen

   Verwijder alle tekens in het Unicode Combining Diacritical Marks-blok (U+0300–U+036F). Na deze stap wordt café cafe en Ñ wordt N.
3. 3. Speciale tekens verwijderen

   Vervang elk teken dat geen letter, cijfer, witruimte of koppelteken is door een spatie. Hiermee worden leestekens, symbolen en tekens zonder ASCII-equivalent verwijderd.
4. 4. Witruimte inkorten en samenvoegen

   Verwijder voorloopende en navolgende witruimte, en vouw vervolgens alle reeksen van opeenvolgende spaties, onderstrepingstekens of koppeltekens samen tot één gekozen scheidingsteken.
5. 5. Hoofd­letters en scheidingsteken toepassen

   Zet om naar kleine letters (optioneel) en verbind woorden met het gekozen scheidingsteken: koppelteken (-), onderstrepingsteken (_) of punt (.).

Referentie voor tekentransformaties

De onderstaande tabel laat zien hoe veelvoorkomende tekens worden verwerkt tijdens slug-generatie:

Codevoorbeelden

Slug-generatie in populaire talen en frameworks. Elk voorbeeld verwerkt Unicode-normalisatie, het verwijderen van diakritische tekens en het invoegen van scheidingstekens.

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"

Veelgestelde vragen