URL Encoding Explained: What It Is, Why It Matters, and When to Use It

URLs can only contain a specific set of characters. Everything else must be converted into a safe format before it can be sent as part of a URL. This process is called URL encoding or percent-encoding. Understanding it matters for developers building APIs, marketers constructing campaign URLs, and anyone debugging why a link is not working.

What is URL encoding?

URL encoding converts characters that are not allowed in URLs (or that have special meaning) into a percent sign followed by two hexadecimal digits representing the character's ASCII code.

A space becomes %20. An ampersand becomes %26. A hash becomes %23. You have seen this if you have ever copied a URL from an address bar and pasted it somewhere else:

The %20 values represent spaces — "red shoes size 10" as a URL-safe query string.

Which characters need encoding?

The URL specification defines a set of "reserved" characters that have structural meaning in a URL, and "unreserved" characters that are always safe. Everything else requires encoding.

Always safe (unreserved): A–Z, a–z, 0–9, hyphen -, underscore _, period ., tilde ~

Reserved (structural meaning in URLs): : / ? # [ ] @ ! $ & ' ( ) * + , ; = — these should be encoded when used as data values but not when used structurally

Always encode: spaces, most punctuation beyond the above, all non-ASCII characters (accented letters, emoji, Chinese characters, Arabic, etc.)

encodeURI vs encodeURIComponent

JavaScript provides two built-in functions for URL encoding:

encodeURI() encodes a full URL. It leaves structural characters (:/?#[]@!$&'()*+,;=) intact because they are needed for the URL structure. Use this when encoding a complete URL.

encodeURIComponent() encodes everything including structural characters. Use this when encoding a value that will be placed inside a query string parameter — because an unencoded & or = inside a parameter value would break the URL structure.

The most common mistake is using encodeURI for parameter values — the & in the value gets treated as a parameter separator instead of part of the value.

When you actually need URL encoding

Building API request URLs. Query string values often contain user input — names, addresses, search terms. Always encodeURIComponent() each value before concatenating it into a query string.

UTM campaign parameters. A UTM source value like "Google Ads" contains a space. Without encoding, the URL breaks. Proper UTM builders handle this automatically, but if you are constructing URLs manually, encode all parameter values.

Sharing content with special characters. Sharing a URL in a tweet or email that contains characters like # or ? in the path (not as structural characters) requires encoding them so they are not interpreted as anchors or query string starts.

Internationalized URLs. Non-ASCII characters in URLs — Arabic, Chinese, Japanese, emoji — must be encoded. Modern browsers do this automatically in the address bar (what you see is the decoded version), but the actual HTTP request uses the encoded form.

Decoding URL-encoded strings

Decoding reverses the process — %20 back to a space, %26 back to &. In JavaScript: decodeURI() and decodeURIComponent(). The browser tool linked below handles both directions instantly.

Double encoding — the common mistake

Double encoding happens when an already-encoded string is encoded again: %20 becomes %2520 (the % gets encoded to %25). This breaks the URL at the receiving end. Always decode before re-encoding if you are unsure of the current state of a string.

Frequently asked questions

Why do some URLs have + instead of %20 for spaces?

The application/x-www-form-urlencoded format (used in HTML form submissions) encodes spaces as + rather than %20. Both represent a space, but the two encoding schemes are not interchangeable. %20 is correct for path segments and most modern contexts. + for spaces is specific to form data encoding.

Does URL encoding affect SEO?

Google handles URL-encoded URLs well and decodes them for indexing. However, clean, human-readable URLs without unnecessary encoding are preferred both for SEO and user experience. Use hyphens instead of %20 for spaces in permanent URLs.

What is the difference between URL encoding and Base64 encoding?

URL encoding makes specific characters safe for use within URLs. Base64 encoding converts arbitrary binary data into a set of ASCII characters safe for text contexts like HTML attributes, JSON values, and email. They solve different problems and are not interchangeable.