Sonderzeichen in URL-Slugs behandeln: Ein Entwicklerleitfaden

Die meisten Slug-Generatoren funktionieren mit reinem englischem Text problemlos. Doch die reale Welt hat Akzentbuchstaben, nicht-lateinische Schriften, Emojis und Symbole. Dieser Leitfaden zeigt, wie Sie all das beim Erzeugen von URL-Slugs behandeln.

Das Problem: URLs haben einen begrenzten Zeichensatz

URLs dürfen sicher nur ASCII-Zeichen enthalten: Buchstaben (a-z), Ziffern (0-9) und einige Symbole wie Binde- und Unterstriche. Alles andere muss entweder umgewandelt oder prozentkodiert werden (etwa %C3%A9 für é). Prozentkodierte URLs sind hässlich, schwer lesbar und schlecht für SEO. Die Lösung ist Transliteration.

Transliteration: Die zentrale Technik

Transliteration wandelt Zeichen einer Schrift in ihr nächstliegendes ASCII-Äquivalent um. Einige gängige Beispiele:

Eingabe	Transliteriert	Sprache
é, è, ê, ë	e	Französisch, Portugiesisch
ü, ö, ä	ue, oe, ae	Deutsch
ñ	n	Spanisch
ß	ss	Deutsch
ç	c	Französisch, Portugiesisch

Unser Slug-Generator führt die Transliteration automatisch durch, wenn die Option „Transliterieren“ aktiviert ist.

Unicode-Normalisierung

Vor der Transliteration müssen Sie Unicode-Text normalisieren. Das Zeichen é kann in Unicode auf zwei Arten gespeichert werden:

• Zusammengesetzt (NFC): ein einzelner Codepunkt (U+00E9)
• Zerlegt (NFD): der Buchstabe „e“ gefolgt von einem kombinierenden Akzentzeichen (U+0065 + U+0301)

Beide sehen auf dem Bildschirm identisch aus, sind aber unterschiedliche Bytes. Die Normalisierung auf NFKD (Kompatibilitätszerlegung) trennt den Grundbuchstaben vom Akzentzeichen, sodass sich die Akzente leicht entfernen lassen:

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

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

CJK-Zeichen (Chinesisch, Japanisch, Koreanisch)

CJK-Zeichen lassen sich nicht sinnvoll ins Lateinische transliterieren. Es gibt zwei gängige Ansätze:

1. Romanisierung verwenden (Pinyin für Chinesisch, Romaji für Japanisch). Bibliotheken wie pinyin (npm) oder kuroshiro können das, aber die Ergebnisse entsprechen womöglich nicht den Erwartungen der Nutzer.
2. Die Zeichen unverändert lassen. Moderne Browser und Suchmaschinen verarbeiten Unicode-URLs gut. Google kann URLs mit CJK-Zeichen indexieren. Die URL wird in der Adressleiste prozentkodiert, in den Suchergebnissen aber korrekt angezeigt.

Für die meisten Fälle ist Option 2 sicherer—romanisierter CJK-Text kann für Muttersprachler unleserlich sein.

Emojis in URLs

Technisch möglich (Emojis werden prozentkodiert), aber Emojis in Slugs sind eine schlechte Idee:

• Sie werden zu extrem langen prozentkodierten Zeichenketten
• Sie brechen in vielen Systemen und APIs
• Suchmaschinen indexieren sie womöglich nicht korrekt
• Sie lassen sich nicht manuell eintippen

Entfernen Sie Emojis bei der Slug-Erzeugung immer. Ein einfaches Regex-Muster kann sie entfernen:

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

Häufige Sonderzeichen

So behandelt ein guter Slug-Generator häufige Sonderzeichen:

Zeichen	Aktion	Grund
&	Durch „and“ ersetzen oder entfernen	Hat in URLs eine besondere Bedeutung
@, #, ?, =	Entfernen	Reservierte URL-Zeichen
“ ” ‘ ’	Entfernen	Satzzeichen, kein semantischer Wert im Slug
— –	Durch Bindestrich ersetzen	Ähnlicher Zweck, auf Trennzeichen normalisieren
/ \	Durch Bindestrich ersetzen	Schrägstriche erzeugen Pfadsegmente

Ihren Slug-Generator testen

Testen Sie mit diesen kniffligen Eingaben, ob Ihr Slug-Generator Grenzfälle bewältigt:

• "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
• Leerer String → sollte leer oder einen Fallback zurückgeben

Probieren Sie diese Beispiele direkt in unserem Tool Slugify Online aus und sehen Sie, wie es jeden Fall behandelt.

Bibliotheksunterstützung

Für einen tieferen Vergleich von Slug-Bibliotheken über Sprachen hinweg lesen Sie unseren Leitfaden dazu, wie man Text in JavaScript, Python und PHP slugifiziert. Jede Bibliothek behandelt Sonderzeichen anders—wählen Sie also eine, die zu Ihrem Anwendungsfall passt.