Sprechende URLs: Slug-basierte Navigation
Foto: Unsplash
Es gibt Dinge in der Webentwicklung, die man macht, weil sie "einfach richtig" sind, auch wenn sie mehr Aufwand bedeuten. Slug-basierte URLs gehören dazu. /stories/die-letzte-bibliothek ist besser als /stories/4291 — für Nutzer, für Suchmaschinen, für jeden, der den Link teilt. Der Aufwand, das richtig umzusetzen, ist aber größer als man denkt.
Diese Woche erkläre ich, wie das Slug-System in OutaStory gebaut ist.
Was ein Slug ist und warum er wichtig ist
Ein Slug ist der menschenlesbare Teil einer URL. Statt einer Datenbank-ID — die nichts über den Inhalt aussagt — steht dort ein beschreibendes Wort oder eine Wortfolge in Kleinbuchstaben, getrennt durch Bindestriche.
Für Geschichten bedeutet das: /stories/die-letzte-bibliothek statt /stories/4291.
Für Autoren: /authors/leila-sarkari statt /authors/77.
Der Unterschied ist nicht nur ästhetisch. Slug-URLs sind:
- Teilbar — man versteht beim Lesen des Links, was ihn erwartet
- SEO-freundlich — Suchmaschinen nutzen URL-Bestandteile als inhaltliche Signale
- Stabil — eine ID kann sich durch Datenbankoperationen ändern, ein Slug nicht
- Linkbar — Autorinnen können ihren eigenen Profil-Link in einer E-Mail-Signatur unterbringen, ohne eine Zahlenkette einzufügen
Die Grammatik des Slugs
Nicht jede Zeichenkette ist ein gültiger Slug. Wir haben eine explizite Grammatik definiert:
- Nur Kleinbuchstaben
a–z - Ziffern
0–9 - Einzelne Bindestriche als Trennzeichen — keine Doppelbindestriche, kein führender oder abschließender Bindestrich
- Minimale Länge: 2 Zeichen
- Maximale Länge: 80 Zeichen
- Keine Sonderzeichen, keine Umlaute, keine Leerzeichen
Das bedeutet, dass Umlaute beim automatischen Slug-Vorschlag umgewandelt werden: "ü" → "ue", "ö" → "oe", "ä" → "ae", "ß" → "ss". Beim manuellen Eingeben lehnt das Formular ungültige Zeichen sofort ab.
Reserved Words
Einige Slugs sind reserviert — sie dürfen nicht von Autorinnen gewählt werden, weil sie mit Systemrouten kollidieren würden. Beispiele:
new,edit,delete,createadmin,api,auth,login,logoutabout,contact,terms,privacy
Die Liste wird bei der Validierung serverseitig geprüft. Ein Slug, der auf der Reserved-Words-Liste steht, schlägt mit einer klaren Fehlermeldung fehl — kein rätselhafter HTTP-409, sondern "Dieser Slug ist reserviert und kann nicht verwendet werden."
Der Draft-Platzhalter: `draft-
Hier ist das Detail, das am meisten nachgefragt wurde: Was passiert, bevor eine Autorin ihren Slug gewählt hat?
Wenn eine Autorin eine neue Geschichte anlegt und den ersten Entwurf speichert, bekommt die Geschichte automatisch einen temporären Slug: draft- gefolgt von einer gekürzten GUID. Zum Beispiel: draft-a3f9b2e1.
Dieser Draft-Slug ist für externe Nutzer nicht zugänglich — Geschichten mit Draft-Status sind grundsätzlich nicht öffentlich. Aber er erlaubt, dass das System intern immer mit Slugs arbeitet, nie mit IDs. Alle internen Links, alle Service-Bus-Nachrichten, alle Asset-Pfade referenzieren den Slug.
Sobald die Autorin im Publish-Wizard Schritt 1 einen Slug eingibt und die Geschichte publiziert, wird draft-a3f9b2e1 durch den gewählten Slug ersetzt. Alle internen Referenzen werden kaskadend aktualisiert.
Foto: Unsplash
Eindeutigkeit und Kollisions-Handling
Slugs müssen eindeutig sein — auf Ebene der Geschichten und auf Ebene der Autoren, jeweils getrennt. Zwei Geschichten können nicht denselben Slug haben, auch wenn sie von verschiedenen Autorinnen stammen.
Das wirft die Frage auf: Was passiert bei einer Kollision? Wenn die Autorin "die-letzte-bibliothek" eingibt und dieser Slug bereits vergeben ist, gibt das System eine Fehlermeldung und schlägt Alternativen vor — zum Beispiel die-letzte-bibliothek-2 oder die-letzte-bibliothek-von-leila.
Die Alternativ-Vorschläge sind nicht willkürlich. Sie folgen einem einfachen Muster: erst numerisches Suffix, dann Autorenname als Suffix. So bleibt die URL so lesbar wie möglich.
Routing in Blazor
Die Blazor-Implementierung nutzt optionale Route-Parameter. Die Geschichtsseite akzeptiert /stories/{slug}, die Autorenseite /authors/{slug}. Beide Pages prüfen beim Laden, ob der Slug in der Datenbank existiert. Wenn nicht, gibt es eine 404-Seite — keine Server-Exception, keine leere Seite.
Für den Kategorienbaum haben wir dasselbe Prinzip angewendet: /category/{L0?}/{L1?}/{L2?} — ein geschachteter optionaler Routing-Parameter. Das funktioniert in Blazor mit etwas mehr Konfiguration als ein einzelner Parameter, aber es läuft stabil.
SEO-Implikationen
Slug-URLs haben einen direkten SEO-Effekt, besonders für Autorinnen, die ihre Geschichten über Social Media teilen. Wenn jemand einen Link postet und der Slug den Titel der Geschichte enthält, wird der Text des Links zu einem schwachen, aber relevanten Signal für Suchmaschinen.
Außerdem: Canonical-URLs sind mit Slugs einfacher zu setzen. Wir können sichergehen, dass /stories/die-letzte-bibliothek immer die kanonische URL ist, egal wie die Leserin dort hingelangt ist.
Was kommt als Nächstes?
Nächste Woche: Wie das Monetarisierungsmodell aufgebaut ist — und warum Autorinnen die Wahl haben, ihre Geschichte komplett ohne Werbung zu veröffentlichen.