Slug Generator

Was ist ein URL-Slug?

Ein URL-Slug ist der Teil einer Webadresse, der eine bestimmte Seite in menschenlesbarer Form identifiziert. In der URL https://example.com/blog/mein-erster-beitrag ist der Slug mein-erster-beitrag. Ein Slug Generator wandelt einen Seitentitel oder eine Beschreibung in eine Zeichenkette um, die nur Kleinbuchstaben, Ziffern und Bindestriche (oder ein anderes gewähltes Trennzeichen) enthält. Dabei werden Leerzeichen entfernt, Akzente und Diakritika bereinigt, Sonderzeichen gelöscht und Leerzeichen durch einzelne Trennzeichen ersetzt.

Die Slug-Generierung ist ein Standardschritt in Content-Management-Systemen, statischen Website-Generatoren, Blog-Plattformen und jeder Anwendung, die URLs aus Benutzereingaben ableitet. WordPress, Ghost, Hugo, Next.js und Django enthalten alle eine Slug-Logik, weil lesbare URLs sowohl die Benutzerfreundlichkeit als auch die Suchmaschinenoptimierung verbessern. Ein korrekt geformter Slug teilt dem Nutzer mit, was eine Seite enthält, bevor er den Link anklickt.

Der Begriff „Slug“ stammt aus dem Zeitungsdruck, wo er ein kurzes Kürzel zur Identifizierung eines Artikels während der Produktion bezeichnete. In der Webentwicklung erfüllt der Slug dieselbe Funktion: Er ist ein kompakter, eindeutiger, URL-sicherer Bezeichner, der aus einem längeren Titel oder Namen abgeleitet wird. Da Slugs programmgesteuert erzeugt werden, sorgt ein zuverlässiger Slug Generator für Konsistenz auf jeder Seite und in jeder Sprache.

Warum diesen Slug Generator verwenden?

Das manuelle Erstellen von URL-Slugs ist fehleranfällig. Ein vergessener Akzent, ein doppelter Bindestrich oder ein Sonderfall bei Unicode-Eingaben können zu fehlerhaften oder unschönen URLs führen. Dieses Tool behandelt diese Probleme automatisch.

Anwendungsfälle des Slug Generators

Slug-Generierungsregeln und Zeichenbehandlung

Die Slug-Generierung folgt einer vorhersehbaren Abfolge von Umwandlungen. Das Verständnis jedes Schritts hilft dabei, unerwartete Ausgaben zu debuggen oder eine eigene slugify-Funktion zu bauen.

1. 1. Unicode-Normalisierung (NFD)

   Zusammengesetzte Zeichen in Basiszeichen + kombinierendes Zeichen zerlegen. Zum Beispiel wird é (U+00E9) zu e + kombinierendem Akut (U+0301). Dies macht Diakritika im nächsten Schritt entfernbar.
2. 2. Diakritika entfernen

   Alle Zeichen im Unicode-Block Combining Diacritical Marks (U+0300–U+036F) entfernen. Nach diesem Schritt wird café zu cafe und Ñ zu N.
3. 3. Sonderzeichen entfernen

   Jedes Zeichen, das kein Buchstabe, keine Ziffer, kein Leerzeichen und kein Bindestrich ist, durch ein Leerzeichen ersetzen. Dabei werden Satzzeichen, Symbole und Zeichen ohne ASCII-Äquivalent gelöscht.
4. 4. Leerzeichen kürzen und zusammenfassen

   Führende und nachfolgende Leerzeichen entfernen, dann alle aufeinanderfolgenden Leerzeichen, Unterstriche oder Bindestriche in ein einzelnes gewähltes Trennzeichen zusammenfassen.
5. 5. Schreibweise und Trennzeichen anwenden

   In Kleinbuchstaben umwandeln (optional) und Wörter mit dem gewählten Trennzeichen verbinden: Bindestrich (-), Unterstrich (_) oder Punkt (.).

Zeichenumwandlungs-Referenz

Die folgende Tabelle zeigt, wie häufige Zeichen bei der Slug-Generierung behandelt werden:

Code-Beispiele

Slug-Generierung in gängigen Sprachen und Frameworks. Jedes Beispiel behandelt Unicode-Normalisierung, Diakritika-Entfernung und Trennzeichen-Einfügung.

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"

Häufig gestellte Fragen