URL-Kodierung erklärt: Percent-Encoding kodieren und dekodieren
URL-Kodierung Schritt für Schritt: jeder %-Code mit Farbe und Erklärung, Doppel-Kodierungs-Alarm, Kodieren und Dekodieren im Browser.
Wenn eine URL plötzlich aussieht wie https%3A%2F%2Fexample.com%2Fsuche%3Fq%3DCaf%C3%A9, ist sie nicht kaputt - sie ist kodiert. Jedes %XX ersetzt ein Zeichen, das an dieser Stelle strukturelle Bedeutung hat oder außerhalb des ASCII-Zeichensatzes liegt. Der URL-Encoder unten zeigt jede dieser Ersetzungen als farbigen Chip, Eingabe neben Ausgabe, und meldet Doppel-Kodierung automatisch.
https%3A%2F%2Fexample.com%2Fsuche%3Fq%3DCaf%C3%A9%20M%C3%BCnchen%26page%3D1
Das Ergebnis erklärt
Läuft im Browser. Kein Netzwerk-Call. Kein Account.
Was ist URL-Kodierung und warum sieht das so aus?
URL-Kodierung, auch Prozent-Kodierung genannt, ist eine Übersetzungsschicht zwischen Browser und Server. URLs haben eine feste Grammatik: : trennt das Schema, / die Pfad-Segmente, ? startet die Suchparameter (Query), # die Sprungmarke. Zeichen, die diese Grammatik verletzen würden (Leerzeichen, Umlaute, ein / mitten im Wert), werden als %XX maskiert, wobei XX der hexadezimale Byte-Wert ist.
Ohne diese Schicht würde ein Pfadsegment rechnung/2026.pdf als Unterpfad gelesen, & in einem Query-Wert die Parameter-Struktur zerreißen. Die Ergebnisansicht oben zerlegt deine Eingabe in diese Kategorien: normale Zeichen grau, URL-Trennzeichen grün, Parameter-Trenner violett, Non-ASCII-Bytes orange, Leerzeichen blau. Jedem Chip links steht ein Chip rechts gegenüber.
Wann begegnet dir eine kodierte URL?
Kodierte URLs tauchen überall auf, wo Text mit Sonderzeichen oder Non-ASCII über URL-Strukturen läuft. Nicht nur Entwickler lesen das. SEOs, Marketer, Content-Leute, Übersetzer und Studierende stolpern genauso über %20 oder %C3%BC, meist ohne zu wissen, dass es eine technische Übersetzung ist und kein Kauderwelsch.
- SEOs prüfen Canonicals mit
%20für Leerzeichen - rohe Leerzeichen sind ungültig, nur die kodierte Form ist es. - Marketer bauen Tracking-Links wie
https://shop.de/?utm_source=newsletter&utm_campaign=frühling 2026- das Leerzeichen bricht den Link; den Umlaut kodieren moderne Browser meist selbst per UTF-8. → UTM-Beispiel laden - E-Mail-Adressen wie
mein+name@beispiel.demachen Probleme in Query-Strings, weil+als Leerzeichen gelesen wird; korrekt istmein%2Bname. → E-Mail-Beispiel laden - CMS-Exporte liefern URLs, die bereits kodiert wurden; ohne Decode-Schritt entsteht Doppel-Kodierung.
- Übersetzer sehen
Caf%C3%A9im Export stattCafé.
URI-Komponente oder Ganze URI - welcher Modus passt?
Der Modus-Schalter oben entscheidet, ob du einen einzelnen Wert kodierst oder eine komplette URL glättest. Faustregel: URI-Komponente für alles, was innerhalb einer URL steht (Query-Wert, Pfad-Segment, Fragment-Inhalt). Ganze URI, wenn du eine fertige URL hast, in der : / ? # an ihren Plätzen bleiben sollen.
| Szenario | Richtig | Was sonst schiefgeht |
|---|---|---|
| Query-Wert aus User-Input | URI-Komponente | & und = bleiben stehen, Parameter verschmelzen |
| Pfad-Segment mit Slashes | URI-Komponente | / bleibt stehen, Segment zerfällt |
| Fertige URL säubern | Ganze URI | URL-Struktur wird zerlegt |
| Fragment-Inhalt | URI-Komponente | # wird als Delimiter gelesen |
Im Zweifel URI-Komponente. Ganze URI ist der Sonderfall.
Was bedeutet %20, %3A und %C3%A9?
Jede %XX-Sequenz ist ein Byte, hexadezimal geschrieben. %20 = 0x20 = ASCII-Leerzeichen, %3A = :, %2F = /. Alles außerhalb der sicheren ASCII-Teilmenge wird nach diesem Muster maskiert. Non-ASCII-Zeichen werden vorher in UTF-8-Bytes zerlegt und dann Byte für Byte kodiert; deswegen hat é zwei %-Sequenzen (%C3%A9) statt einer.
Die Kategorien in der Ergebnisansicht decken jede Eingabe ab. Normale Zeichen (Buchstaben, Ziffern, - . _ ~) bleiben stehen und erscheinen grau. URL-Trennzeichen : / ? # [ ] @ haben strukturelle Bedeutung und wandern im Modus URI-Komponente zu %3A, %2F, %3F, %23. Parameter-Trenner ! $ & ' ( ) * + , ; = sind die Sub-Delimiter aus RFC 3986, in der Ergebnisansicht violett. Leerzeichen werden zu %20, außer in application/x-www-form-urlencoded-Query-Strings, wo + das Leerzeichen ist. Zwei weitere Kategorien fangen Legacy-Steuerzeichen und bereits kodierte Runs ab.
Doppel-Kodierung: wenn %3A zu %253A wird
Doppel-Kodierung passiert, wenn ein bereits kodierter String nochmal durch einen Encoder läuft. Dabei wird das %-Zeichen selbst kodiert: aus %3A wird %253A, aus %20 wird %2520. Die Ergebnisansicht oben erkennt das Muster, zeigt einen Alarm über dem Ergebnis und bietet einen One-Click-Fix in den Decode-Modus an.
- Signatur prüfen. Viele
%25-Sequenzen im String?%25ist die Kodierung von%selbst - ein Signal, dass der String schon einmal kodiert wurde. - Probeweise dekodieren. Ergibt ein Decode-Durchlauf lesbaren Text, war er einfach kodiert. Bleiben weitere
%XXstehen, war er doppelt. - Quelle finden. Meist eine Tool-Chain ohne Decode-Schritt oder ein CMS-Export mit doppelter Escape-Logik.
Zum Ausprobieren: füge https%3A%2F%2Fexample.com%2Fsuche%3Fq%3DCaf%C3%A9%20M%C3%BCnchen%26page%3D1 in den URL-Encoder ein oder → Doppel-Kodierungs-Beispiel laden. Der Alarm erscheint automatisch.
Umlaute, Emojis und asiatische Zeichen
Alles jenseits von ASCII wird über UTF-8 kodiert. UTF-8 zerlegt ein Zeichen in ein bis vier Bytes, jedes Byte wird einzeln prozent-kodiert. Deswegen sind Umlaut-URLs länger als sie aussehen und Emoji-URLs richtig lang: ü belegt zwei Bytes (%C3%BC), 🚀 vier (%F0%9F%9A%80).
Nimm https://example.jp/suche?q=東京タワー (→ Japanisches Beispiel laden). Jedes der fünf Zeichen belegt drei UTF-8-Bytes - nach der Kodierung hängen fünfzehn %XX-Sequenzen hintereinander. Bei https://site.com/post?title=Hallo 🚀 Welt (→ Emoji-Beispiel laden) siehst du den Sprung, den die vier Bytes des Raketen-Emojis verursachen. In Legacy-Systemen kann dieselbe Umlaut-URL als %C3%BC (UTF-8) oder %FC (Latin-1) ankommen.
Häufige Fragen
Was bedeutet %20 in einer URL?
%20 ist ein kodiertes Leerzeichen. Die zwei Ziffern hinter dem Prozent-Zeichen sind der hexadezimale Byte-Wert - 0x20 entspricht dem ASCII-Leerzeichen. In Query-Strings nach application/x-www-form-urlencoded wird stattdessen + benutzt.
Wie erkenne und repariere ich doppelt kodierte URLs?
Auffällig viele %25-Sequenzen sind das Signal - %25 ist die Kodierung von % selbst. Ein einzelner Decode-Durchlauf gibt meist den Originalstring zurück. Die Ergebnisansicht oben erkennt das Muster automatisch und bietet den Wechsel in den Decode-Modus an.
Verändert die Kodierung die Funktion einer URL?
Nein, sofern korrekt kodiert und dekodiert wird, zeigt die URL nach dem Dekodieren auf dieselbe Ressource wie die Eingabe. Teilweise rohe oder kaputte Formen können anders parsen oder abgelehnt werden. Probleme entstehen meist bei doppelter Kodierung oder fehlendem Decode-Schritt.
Wie lang darf eine kodierte URL sein?
Der Standard (RFC 3986) setzt keine harte Obergrenze, Browser und Server schon. Faustregel: unter ~2000 Zeichen läuft eine URL durch fast jede Pipeline; darüber wird das Verhalten uneinheitlich (Internet Explorer hat historisch bei rund 2083 Zeichen abgeschnitten). Moderne Browser tolerieren weit längere URLs; die praktische Obergrenze ergibt sich meist aus Server-, Proxy- oder CDN-Konfiguration. Der Byte-Zähler hilft beim Debuggen, besonders wenn Emojis oder asiatische Zeichen die Länge treiben.
Warum werden : und / in URLs unterschiedlich kodiert?
Sie haben strukturelle Bedeutung: : trennt Schema und Rest, / trennt Pfad-Segmente. Im Modus Ganze URI bleiben beide stehen, damit die URL lesbar bleibt. Im Modus URI-Komponente werden sie maskiert, damit dein Wert nicht als neuer Pfad oder neue Query gelesen wird.