URL Encoding: Why Your Links Break and How to Fix Them Forever

A colleague came to me one afternoon with a support ticket that had stumped them for two days. A user was sharing a link to a search results page on their website. The link worked perfectly when opened in Chrome. It broke in every email client the user tried. The URL looked correct in the browser. The page definitely existed. But the email kept turning the link into something unreadable by the time the recipient clicked it.

The problem was a space character in the search query parameter. The fix was URL encoding. Understanding why fixed both this ticket and every similar problem that came after it.

The Allowed Characters in a URL

URLs have a defined alphabet. Letters (A-Z, a-z), digits (0-9), and a small set of special characters like hyphens, underscores, dots, and tildes are considered "unreserved" and can appear in a URL as-is. Everything else, including spaces, ampersands, equals signs, colons, and slashes when used as data rather than URL structure, must be encoded.

When you need to include an unsafe character in a URL, you replace it with a percent sign followed by the character's two-digit hexadecimal code. A space becomes %20. An at sign becomes %40. A forward slash used as data rather than a path separator becomes %2F. An ampersand, which normally separates query parameters, becomes %26 when it appears inside a parameter value.

Where Encoding Goes Wrong

URL encoding errors cluster around a few situations that come up constantly in real development. Search queries that contain spaces or special characters. Redirect parameters that include another URL as their value. Form submissions with user-entered text. Webhook URLs that carry JSON payloads in query string parameters.

The most common mistake is encoding at the wrong granularity. If you encode the entire URL including its slashes and colons, you destroy the URL structure: the protocol separator and path slashes become percent-encoded and the URL stops working. You need to encode only the data portions: the values of query parameters, not the parameter names or the URL structure itself.

The URL Encode/Decode tool handles this cleanly. Paste in a value that needs encoding and it returns the percent-encoded form ready to embed in a URL. Paste in an encoded value to decode it back to readable text for inspection or debugging.

Encoding in Code

In most modern programming languages, the standard library handles URL encoding automatically when you use the right methods. In JavaScript, encodeURIComponent() encodes a single value for use as a query parameter value. encodeURI() encodes an entire URL while leaving its structural characters intact. The difference between them is exactly which characters they leave unencoded.

The confusion often happens when developers construct URLs using string concatenation with user-provided data. If you build a URL by hand and any component comes from user input or external data, encode each piece individually before concatenating it. Unencoded user data in URLs is also a vector for open redirect attacks and URL injection, so encoding is a security concern as well as a correctness concern.

Parsing URLs Into Their Parts

A URL is not just a string. It has a defined structure: scheme, authority (host plus optional port), path, query string, and fragment. When you need to extract or modify one component of a URL, the right approach is to parse it into its parts rather than manipulate the raw string with pattern matching.

The URL Parser tool breaks any URL into its components and displays each part clearly. This is useful when debugging API integrations, working with redirect chains, or trying to understand why a particular URL behaves differently than expected in different contexts.

The Double Encoding Trap

Double encoding is a subtle bug that is easy to create and frustrating to debug. It happens when an already-encoded value gets encoded again. The percent sign in %20 itself gets encoded to %25, so the space becomes %2520. When the URL is eventually decoded, you get %20 as a literal string rather than a space.

If you are using the URL Encode/Decode tool and the output does not match what you expect, check whether your input was already encoded. Decode first, then re-encode to get a consistent single-encoded result.

The colleague's email link problem was fixed in five minutes once we identified the cause. The space in the search query needed to be encoded before the URL was inserted into the email template. URL encoding is one of those fundamentals that rarely gets the attention it deserves until something breaks. Having the right tools for encoding and parsing keeps those moments short.