Skip to main content

Text to Slug

Generate URL-friendly slugs from any text.

Geprüft von · Zuletzt geprüft

So wird der Text-zu-Slug-Generator verwendet

  1. Füge eine Phrase ein oder tippe sie - einen Blog-Titel, Produktnamen, eine Kategorie oder einen beliebigen Text, den du in ein URL-Segment umwandeln möchtest.
  2. Wähle ein Trennzeichen: Bindestrich (-) für Web-URLs gemäß SEO-Konvention oder Unterstrich (_) für Systeme, die es bevorzugen (Django-URL-Muster, einige interne Namespaces).
  3. Setze eine maximale Länge, wenn das nachgelagerte Feld ein Limit hat. Bei 0 lassen für unbegrenzt. Das Tool kürzt an der letzten vollständigen Wort statt in der Wortmitte.
  4. Transliteration von Akzenten umschalten, wenn du möchtest, dass akzentbehaftete Zeichen wie café, naïve oder Zurich zu cafe, naive, zurich werden. Ausschalten, um Unicode im Slug zu erhalten (einige moderne CMS unterstützen das).
  5. Lies die Slug-Ausgabe, die sich bei jedem Tastendruck aktualisiert, und klicke auf Kopieren, um sie in dein CMS, deinen Router oder Dateinamen einzufügen.

Wie die Slugifizierung funktioniert

Die Transformation läuft in vier Durchgängen. Erstens schreibt String.prototype.toLowerCase() die gesamte Eingabe mit den Unicode-Case-Folding-Regeln des Browsers klein. Zweitens wird, wenn Transliteration aktiviert ist, die Zeichenkette mit str.normalize("NFD") normalisiert, um akzentbehaftete Zeichen in Basisbuchstaben plus kombinierende Markierungen zu zerlegen, dann werden die kombinierenden Markierungen (Unicode-Kategorie Mn) mit dem Regex /[̀-ͯ]/g entfernt. Drittens ersetzt ein Regex Läufe von nicht-alphanumerischen Zeichen durch das gewählte Trennzeichen: /[^a-z0-9]+/g wenn Transliteration aktiviert ist, oder eine lockerere Unicode-bewusste Variante /[^\p{L}\p{N}]+/gu wenn sie ausgeschaltet ist. Viertens werden führende und nachgestellte Trennzeichen abgeschnitten. Längenabschneidung erfolgt zuletzt und schneidet wenn möglich an einer vollständigen Wortgrenze. Alles läuft lokal im Browser-Tab ohne fetch-Aufruf.

Wann du einen Slug generieren würdest

  • Eine Blog-Beitrags-URL erstellen: "Wie ich Astro-Sites zu Cloudflare Pages deploye" wird zu wie-ich-astro-sites-zu-cloudflare-pages-deploye.
  • Einen GitHub-Issue-Branch aus dem Titel benennen: issue/123-fix-jwt-expiry-check.
  • Einen Dateinamen für einen benutzerhochgeladenen Bericht generieren: q1-2026-umsatzanalyse.pdf aus "Q1 2026 Umsatzanalyse".
  • Kubernetes-Ressourcennamen erstellen, bei denen DNS-1123-Compliance nur Kleinbuchstaben-Alphanumerik und Bindestriche erfordert.
  • Eine Kategorie- oder Tag-Kennung für dein CMS erstellen, bei dem die UI einen freundlichen Namen anzeigt, aber die URL eine maschinensichere Form benötigt.
  • Anker-IDs für Markdown-Überschriften erzeugen - viele statische Site-Generatoren wenden im Wesentlichen dieselbe Transformation an, um #abschnitt-id-Sprunglinks zu erstellen.

Häufige Fallstricke und Randfälle

  • Mehrdeutige Transliteration. Deutsches ü kann je nach Konvention zu u oder ue werden. Dieses Tool wählt die ASCII-nächste Form (ü wird zu u). Wenn dein Publikum erwartet, dass ü zu ue wird (eine häufige deutsche Transliteration), die Ausgabe manuell anpassen.
  • Nicht-lateinische Schriften. Kyrillisch, Arabisch, Hebräisch, Chinesisch, Japanisch und Koreanisch zerlegen sich nicht über NFD zu Latein. Mit ausgeschalteter Transliteration bewahrt das Tool sie wie-sie-sind (erfordert ein modernes CMS); mit aktivierter Transliteration werden sie entfernt und hinterlassen einen leeren Slug. Für ordnungsgemäße Transliteration über Schriften hinweg eine dedizierte Bibliothek wie slugify oder iuliia (für Kyrillisch) verwenden.
  • Zahlen. Ziffern werden erhalten. Ein Titel wie "2026 Ausblick" wird zu 2026-ausblick. Das ist normalerweise das, was man für datierte Inhalte möchte.
  • Apostrophe. "Bobs Burger" wird zu bobs-burger (Apostroph entfernt, kein Trennzeichen hinzugefügt). Gerade und geschwungene Apostrophe (U+2019) werden beide behandelt.
  • Reservierte URL-Zeichen. Zeichen wie ?, #, &, % werden immer entfernt, weil sie in URLs strukturelle Bedeutung haben und das Routing brechen würden.
  • Doppelte Trennzeichen. Läufe von nicht-alphanumerischen Zeichen kollabieren zu einem einzigen Trennzeichen, sodass "Hallo - Welt" zu hallo-welt wird, nicht zu hallo---welt.

Warum Slugs existieren

Der URL-Pfad wurde in RFC 3986 (2005) mit strengen Regeln darüber standardisiert, welche Zeichen uncodiert erlaubt sind. Leerzeichen müssen prozent-kodiert werden (%20), reservierte Zeichen (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) haben strukturelle Bedeutung, und Unicode-Zeichen sind über die IRI-Spezifikation (RFC 3987) erlaubt, aber nicht universell von Legacy-Tools unterstützt. Slugs entstanden als pragmatische Konvention: Nur [a-z0-9-] verwenden und du vermeidest jede Prozent-Kodierungsfrage völlig. Der Begriff "Slug" kommt aus dem Zeitungswesen, wo der Slug der Kurzname auf einer Geschichte war, der während des Layouts vor der Finalisierung der Überschrift verwendet wurde. WordPress popularisierte den Begriff für Web-URLs in den 2000er Jahren. Kubernetes-Ressourcennamen folgen DNS-1123-Label-Regeln (Kleinbuchstaben, Alphanumerik, Bindestriche, max. 63 Zeichen, muss mit Alphanumerik beginnen und enden), was im Wesentlichen dieselbe Menge ist.

Vergleich mit Alternativen

npm hat mehrere beliebte Slugify-Bibliotheken: slugify (unterstützt lokale Transliteration), url-slug und @sindresorhus/slugify. Python hat python-slugify und Djangos eingebautes slugify-Filter. Ruby on Rails hat parameterize. PostgreSQL hat kein eingebautes, aber die unaccent-Erweiterung wird häufig mit regexp_replace verkettet, um denselben Effekt in SQL zu erzielen. Für die Generierung zur Build-Zeit verwende Astro, Next.js und Gatsby alle Plugins, die automatisch Dateinamen oder Frontmatter-Titel slugifizieren. Dieses Web-Tool verwenden, wenn du jetzt einen Slug benötigst und keine Einzeiler schreiben möchtest - besonders praktisch beim Einfügen aus einem Rich-Text-Editor, der möglicherweise typografische Anführungszeichen oder unsichtbare Zeichen eingeführt hat, die man in einem CLI-Skript übersehen würde.

Häufig gestellte Fragen

Welche Zeichen sind in einem Slug erlaubt?

Mit aktivierter Transliteration verwendet die Ausgabe nur Kleinbuchstaben a-z, Ziffern 0-9 und das gewählte Trennzeichen. Mit ausgeschalteter Transliteration überleben alle Unicode-Buchstaben (\p{L}) oder Zahlen (\p{N}), was Unicode-Slugs erzeugt, die moderne Browser, Frameworks und Suchmaschinen akzeptieren. Reservierte URL-Zeichen aus RFC 3986 werden immer entfernt, unabhängig von der Transliterations-Einstellung, weil sie andernfalls das URL-Pfad-Parsing korrumpieren würden.

Sollte ich Bindestriche oder Unterstriche bevorzugen?

Googles Webmaster-Richtlinien empfehlen ausdrücklich Bindestriche, weil sie als Worttrennzeichen interpretiert werden, während Unterstriche als Teil eines einzigen Wortes behandelt werden. Für SEO ist das normalerweise wichtig. Python-Module, CLI-Tools und einige CMS-interne Bezeichner bevorzugen jedoch Unterstriche als Konvention. Für öffentliche URLs Bindestriche wählen; für interne Schlüssel das Framework-Standard verwenden. Kubernetes-Ressourcennamen erfordern beispielsweise Bindestriche und lehnen Unterstriche völlig ab.

Wird mein Text an einen Server gesendet?

Nein. Die Transformation ist eine reine JavaScript-Funktion, die in deinem Browser-Tab läuft. <code>String.prototype.normalize</code>, <code>String.prototype.toLowerCase</code>, <code>String.prototype.replace</code> und der Regex-Konstruktor sind alle native Browser-APIs ohne Netzwerkabhängigkeiten. Es gibt keinen fetch-Aufruf, keine Analytics-Erfassung und keinen Service-Worker, der die Eingabe cacht. Das Schließen des Tabs gibt den Text aus dem Speicher frei.

Wie behandelt das Tool kyrillischen oder chinesischen Text?

Unicode Normalization Form D (NFD) zerlegt akzentbehaftete lateinische Zeichen, transliteriert aber keine nicht-lateinischen Schriften. Mit aktivierter Transliteration endet ein kyrillischer oder chinesischer Titel ohne alle Buchstaben und erzeugt einen leeren Slug. Mit ausgeschalteter Transliteration werden die Unicode-Buchstaben durchgelassen und du erhältst einen Slug wie "&#1087;&#1088;&#1080;&#1074;&#1077;&#1090;-&#1084;&#1080;&#1088;". Für ordnungsgemäße Skriptkonvertierung (Russisch zu Latein, japanischer Romaji, chinesisches Pinyin) eine sprachbewusste Bibliothek wie iuliia, kuroshiro oder pypinyin verwenden - diese Logik ist nicht in diesem Tool.

Was sollte die maximale Länge sein?

Wenn du keine Einschränkung hast, ist null (unbegrenzt) in Ordnung. Häufige Ziele: 63 Zeichen für Kubernetes-DNS-1123-Labels, 100 Zeichen für die meisten CMS mit vernünftigen Standardwerten, 255 Zeichen wenn du eine Standard-VARCHAR-Spalte füllst. Für SEO-Lesbarkeit unter 60 Zeichen anstreben, weil Suchmaschinen lange URLs in der SERP-Anzeige kürzen. Das wählen, was das nachgelagerte Ziel erfordert, und das Tool an einer vollständigen Wortgrenze kürzen lassen.

Müssen Slugs global eindeutig sein?

Nur so eindeutig wie dein Routing erfordert. Für einen Blog müssen Slugs innerhalb derselben Sammlung eindeutig sein; zwei verschiedene Jahre können denselben Slug wiederverwenden, wenn die URL das Jahr enthält. Viele CMS fügen Duplikaten automatisch einen Zähler-Suffix an (mein-beitrag, mein-beitrag-2). Wenn du sowohl Eindeutigkeit als auch Lesbarkeit benötigst, ist Slug + kurzer Zufallssuffix ein häufiges Muster: mein-beitrag-a3b9. Dieses Tool fügt keine Eindeutigkeits-Suffixe hinzu - diese in deinem Anwendungscode hinzufügen.

Kann der Slug mit dem Trennzeichen beginnen oder enden?

Nein. Der Trim-Schritt entfernt führende und nachgestellte Trennzeichen bedingungslos, weil URLs mit führenden Schrägstrichen diese Rolle bereits erfüllen und nachgestellte Trennzeichen weithin als hässlich gelten. Wenn dein Titel "---Sonderangebot---" ist, ist der Slug sonderangebot ohne führende oder nachgestellte Bindestriche.

Was passiert mit reiner Emoji-Eingabe?

Mit aktivierter Transliteration werden Emoji entfernt (sie sind nicht a-z oder 0-9) und du erhältst einen leeren Slug. Mit ausgeschalteter Transliteration und dem Unicode-Regex-Pfad stimmen Emoji immer noch nicht mit \p{L} oder \p{N} überein und werden auch entfernt. Für emoji-schwere Titel entweder den emoji-freien Slug akzeptieren oder mit einer Emoji-zu-Name-Bibliothek wie node-emoji vorverarbeiten, die &#128512; zuerst in :smile: umwandelt, was dann zu smile slugifiziert.

Wie unterscheidet sich das von der Anker-ID-Generierung in statischen Site-Generatoren?

Astro, Next.js, Gatsby und Hugo generieren alle Anker-IDs für Überschriften mit einem Algorithmus, der diesem Tool sehr ähnlich ist. Der Unterschied ist, dass Überschriften-IDs oft standardmäßig etwas mehr Unicode bewahren (sie sind keine URL-Pfade, sie sind Fragment-Identifikatoren, die permissiver sind) und einige Generatoren für doppelte Überschriften einen numerischen Suffix einschließen. Für SSG-autogenerierte IDs das Framework damit umgehen lassen; für einmalige URL-Slugs ist dieses Tool die richtige Wahl.

Warum ist mein Slug kürzer als erwartet?

Drei häufige Ursachen. Erstens kollabieren Satzzeichen und Leerzeichen zu einem einzigen Trennzeichen und reduzieren so die Länge. Zweitens löscht die Transliteration Zeichen, die nicht auf Latein abgebildet werden - Arabisch und Chinesisch hinterlassen insbesondere sehr kurze Reste. Drittens, wenn die maximale Länge gesetzt ist, schneidet das Abschneiden an der letzten vollständigen Wort vor dem Limit, was möglicherweise mehr Zeichen entfernt als erwartet. Die maximale Länge erhöhen oder die Transliteration deaktivieren, je nach Ziel.

Mehr Text Tools