%20 in der URL? So codierst und decodierst du Links richtig

Ein Link mit Leerzeichen, Umlauten oder einem Sonderzeichen bricht in manchen Anwendungen einfach ab — und aus „Café Zürich” wird ein kryptisches „Caf%C3%A9%20Z%C3%BCrich”. Dieser Ratgeber erklärt, was hinter der Prozentcodierung steckt, wie du sie sauber anwendest und wie du einen Query-String fehlerfrei aufbaust.

Was ist URL-Codierung, und warum braucht man sie?

KurzantwortURL-Codierung (auch Prozentcodierung genannt) wandelt Zeichen, die in einer URL Probleme verursachen würden — Leerzeichen, Umlaute, Emojis, & und # — in ein %XX-Format um, das jeder Browser und Server sicher interpretieren kann.

Eine URL darf laut Standard nur eine begrenzte Menge an Zeichen roh enthalten: Buchstaben, Ziffern und einige wenige Sonderzeichen. Alles andere — ein Leerzeichen, ein „ü”, ein Emoji oder ein „&”, das eigentlich zum Text gehört und nicht als Trennzeichen gemeint ist — muss zuerst in seine UTF-8-Bytes zerlegt und dann Byte für Byte als %XX geschrieben werden. Ein Leerzeichen wird so zu %20, ein „é” (zwei UTF-8-Bytes) wird zu %C3%A9.

Prozentcodierung (Percent-Encoding)Der offizielle Name für dieses Verfahren nach RFC 3986. In JavaScript übernehmen die eingebauten Funktionen encodeURIComponent() und encodeURI() diese Umwandlung automatisch, ohne dass du die Byte-Werte selbst berechnen musst.

Praktisch begegnet dir das ständig: Ein Nutzer sucht auf einer Shop-Website nach „Laufschuhe Größe 42” und die Adressleiste zeigt danach ?suche=Laufschuhe%20Gr%C3%B6%C3%9Fe%2042. Das ist keine Fehlfunktion, sondern die korrekte, sichere Übertragung der Sucheingabe als Teil der URL.

encodeURIComponent vs. encodeURI — welchen Modus wann?

KurzantwortNimm encodeURIComponent für einen einzelnen Parameterwert (z. B. einen Suchbegriff) und encodeURI für eine komplette Adresse, bei der Struktur-Zeichen wie :, / und ? erhalten bleiben müssen.

Der häufigste Fehler beim manuellen Aufbau von Links: eine gesamte URL mit encodeURIComponent zu codieren. Dabei wird auch das :// und die / im Pfad in %XX umgewandelt, wodurch die Adresse als Ganzes unbrauchbar wird. encodeURI hingegen lässt genau die Zeichen unangetastet, die eine URL zum Funktionieren braucht, und codiert nur das, was wirklich problematisch ist — Leerzeichen, Umlaute, Emojis.

Funktion	Codiert auch &, =, ?, /	Typischer Einsatz
encodeURIComponent	Ja	Einzelner Query-Wert, Parameter
encodeURI	Nein	Vollständige Adresse mit Pfad und Query

Merkregel: Willst du nur EIN Wort oder EINEN Wert codieren, das später hinter einem „=” landet — Component. Willst du eine ganze, fertige Adresse als Link verschicken — die volle URI-Variante.

Einen Query-String korrekt aufbauen

KurzantwortEin Query-String besteht aus Schlüssel=Wert-Paaren nach dem „?”, getrennt durch „&” (z. B. ?farbe=rot&groesse=42). Jeder einzelne Wert muss dabei separat mit encodeURIComponent codiert werden, bevor er in den String eingefügt wird.

Angenommen, ein Nutzer möchte nach der Stadt „Köln” und dem Namen „Max Müller” filtern (Beispielwerte). Fügt man diese Werte roh in den Query-String ein, entsteht ?stadt=Köln&name=Max Müller — ein String mit Leerzeichen und einem Umlaut, den manche Systeme falsch zerlegen. Codiert man dagegen jeden Wert einzeln, ergibt sich das robuste ?stadt=K%C3%B6ln&name=Max%20M%C3%BCller, das in jedem Browser und jeder Programmiersprache zuverlässig als dieselben zwei Parameter ankommt.

Beim Parsen läuft derselbe Vorgang rückwärts ab: Eine vollständige URL wird am „?” in Pfad und Query-Teil getrennt, der Query-Teil wird am „&” in einzelne Paare zerlegt, und jeder Wert wird anschließend decodiert, damit wieder lesbarer Text erscheint. Genau das übernimmt ein URL-Parser-Werkzeug automatisch, inklusive einer aufgeschlüsselten Ergebnistabelle je Parameter.

Tracking-Parameter aus einem Link entfernen

KurzantwortParameter wie utm_source, utm_medium, gclid oder fbclid dienen ausschließlich der Kampagnen-Nachverfolgung von Marketing-Tools und lassen sich gefahrlos aus einem Link entfernen, ohne dass die Zielseite anders reagiert.

Wird ein Link über soziale Netzwerke oder Newsletter geteilt, hängen Marketing-Systeme oft automatisch Tracking-Parameter an — etwa ?utm_source=instagram&utm_medium=cpc&fbclid=IwAR123abc hinter der eigentlichen Adresse. Diese Parameter verändern nicht, welche Seite geladen wird, sondern nur, wie der Klick in Analyse-Tools zugeordnet wird. Wer einen Link privat weiterleitet, möchte diese Zusatzdaten meist nicht mitschicken.

Ein URL-Bereiniger erkennt bekannte Tracking-Präfixe (utm_*, gclid, fbclid, msclkid und ähnliche), entfernt genau diese Schlüssel aus dem Query-String und baut die restliche URL unverändert wieder zusammen — Basis-Domain, Pfad und die eigentlich relevanten Parameter wie farbe=rot bleiben dabei vollständig erhalten.

Text codieren/decodieren, Query-Strings parsen oder erstellen, URLs zerlegen und Tracking-Parameter entfernen — kostenlos, komplett im Browser.

URL Encoder / Decoder öffnen →

Häufige Fragen

Warum wird aus einem Leerzeichen in der URL %20?

URLs dürfen laut Standard keine rohen Leerzeichen enthalten, weil ein Leerzeichen das Ende einer Adresse markieren könnte. Deshalb wird jedes Leerzeichen in seine Prozentcodierung %20 (den Hex-Wert des Zeichens) umgewandelt, bevor die URL an einen Server geschickt wird. In Formularen (application/x-www-form-urlencoded) wird stattdessen oft ein „+” verwendet — beide Varianten meinen dasselbe Leerzeichen.

Was ist der Unterschied zwischen encodeURIComponent und encodeURI?

encodeURIComponent() codiert ein EINZELNES Teilstück einer URL, etwa einen Query-Wert, und codiert dabei auch strukturelle Zeichen wie &, =, ? und /. encodeURI() codiert eine GESAMTE Adresse und lässt genau die Zeichen unverändert, die eine URL zum Funktionieren braucht — etwa :, /, ?, # und &. Für einen einzelnen Parameterwert nimmst du encodeURIComponent, für eine vollständige Adresse encodeURI.

Wie baue ich einen Query-String mit mehreren Parametern korrekt auf?

Ein Query-String besteht aus Schlüssel=Wert-Paaren nach dem '?', getrennt durch '&' (z. B. ?farbe=rot&groesse=42). Jeder Wert muss dabei einzeln mit encodeURIComponent codiert werden, besonders wenn er Leerzeichen, Umlaute, & oder = enthält — sonst wird der Query-String an der falschen Stelle aufgeteilt und Parameter gehen verloren oder werden falsch gelesen.

Was bedeutet ein doppelt codierter Wert wie %2520?

%2520 entsteht, wenn ein bereits codiertes %20 (ein Leerzeichen) ein zweites Mal codiert wird, weil dabei das Zeichen '%' selbst zu %25 wird. Das passiert oft, wenn ein Link durch mehrere Systeme läuft, die jeweils unabhängig codieren. Ein mehrstufiges (rekursives) Decodieren löst jede verschachtelte Ebene in einem Durchgang bis zum Originaltext auf.

Wie entferne ich Tracking-Parameter wie utm_source oder fbclid aus einem Link?

Parse die URL, identifiziere Parameter mit bekannten Tracking-Präfixen (utm_*, gclid, fbclid, msclkid u. ä.) und baue den Query-String ohne diese Schlüssel neu zusammen. Ein URL-Parser-Tool markiert solche Parameter automatisch und erzeugt eine bereinigte Version des Links zum Teilen, ohne dass Kampagnendaten mitgeschickt werden.

Methodik-Hinweis: Alle Beispielwerte in diesem Artikel (Hash-Codes, Parameterwerte, Kampagnennamen) dienen ausschließlich der Veranschaulichung und sind frei erfunden. Dieser Ratgeber ist allgemein informativ und ersetzt keine fachliche Entwicklungs- oder Datenschutzberatung.