The Complete Guide to URL Encoding: When, Why, and How

If you've spent any time looking at URLs, you've probably noticed weird strings like %20, %3F, or %E4%B8%AD showing up. That's URL encoding (sometimes called percent-encoding or URI encoding). It's how URLs handle characters that would otherwise break things.

This guide covers what URL encoding actually does, when you need it, how to do it correctly in code, and the mistakes that tend to silently break web apps and APIs.

What is URL encoding?

URLs only support the ASCII character set (basic English letters, numbers, and a handful of symbols). Anything outside that range, like spaces, international characters, or special symbols, has to be encoded first.

URL encoding swaps out unsafe characters for a percent sign (%) followed by two hexadecimal digits that correspond to the character's ASCII or UTF-8 code.

Examples:

Original:  How to optimize SEO?
Encoded:   How%20to%20optimize%20SEO%3F

Original:  user@example.com
Encoded:   user%40example.com

Original:  price: $50 (50% off!)
Encoded:   price%3A%20%2450%20%2850%25%20off!%29

Original:  café résumé
Encoded:   caf%C3%A9%20r%C3%A9sum%C3%A9

Why URL encoding matters

URL encoding exists to solve three specific problems:

1. Special characters already mean something in URLs

Some characters have built-in roles in URL syntax:

• ? - Starts the query string
• & - Separates query parameters
• = - Separates key from value
• # - Starts the fragment/anchor
• / - Separates path segments

If you want to use these characters literally (not as syntax), you have to encode them:

Wrong:  /search?q=what is SEO?&lang=en
        (Browser thinks ? ends the query parameter value)

Right:  /search?q=what%20is%20SEO%3F&lang=en
        (Now %3F is treated as literal question mark)

2. URLs can't contain spaces or unsafe characters

Spaces, quotes, angle brackets, and many symbols are flat-out not allowed in URLs. Encoding makes them safe:

Space:          " " → %20
Double quote:   "   → %22
Less than:      <   → %3C
Greater than:   >   → %3E
Curly brace:    {   → %7B
Pipe:           |   → %7C

3. Non-ASCII characters need UTF-8 encoding

International characters (é, ñ, 中文, emoji 🚀) get encoded as their UTF-8 byte sequences:

café     → caf%C3%A9
北京      → %E5%8C%97%E4%BA%AC
🚀       → %F0%9F%9A%80
ñoño     → %C3%B1o%C3%B1o

Which characters need encoding? (Complete reference)

Common URL encoding scenarios

Scenario 1: Search query with spaces and special characters

User searches: "best hotels in Paris"

Wrong URL:
https://example.com/search?q="best hotels in Paris"

Correct URL:
https://example.com/search?q=%22best%20hotels%20in%20Paris%22

Breaking it down:
"   → %22 (double quote)
    → %20 (space)
" → %22 (closing quote)

Scenario 2: Email address in a query parameter

User email: john.doe+test@example.com

Wrong URL:
https://example.com/verify?email=john.doe+test@example.com
(+ would be interpreted as space in query string!)

Correct URL:
https://example.com/verify?email=john.doe%2Btest%40example.com

Breaking it down:
+  → %2B (plus sign)
@  → %40 (at symbol)

Scenario 3: URL as a parameter (double encoding required)

Redirecting to: https://example.com/page?id=123

OAuth callback URL:
https://auth.example.com/callback?redirect=https%3A%2F%2Fexample.com%2Fpage%3Fid%3D123

Breaking it down:
:  → %3A
/  → %2F
?  → %3F
=  → %3D

How to URL encode in different programming languages

JavaScript / TypeScript

// encodeURIComponent() - Use for query parameters and values
const query = "best SEO tips?";
const encoded = encodeURIComponent(query);
// Result: "best%20SEO%20tips%3F"

// encodeURI() - Use for entire URLs (preserves :, /, ?, #)
const url = "https://example.com/search?q=SEO tips";
const encoded = encodeURI(url);
// Result: "https://example.com/search?q=SEO%20tips"

// BEST PRACTICE: Build URLs like this:
const baseUrl = "https://example.com/search";
const params = new URLSearchParams({ q: "best SEO tips?" });
const fullUrl = `${baseUrl}?${params.toString()}`;
// Result: "https://example.com/search?q=best+SEO+tips%3F"

Python

from urllib.parse import quote, quote_plus, urlencode

# quote() - Standard URL encoding
text = "best SEO tips?"
encoded = quote(text)
# Result: 'best%20SEO%20tips%3F'

# quote_plus() - Encodes spaces as +
encoded = quote_plus(text)
# Result: 'best+SEO+tips%3F'

# urlencode() - Best for query parameters (dict)
params = {'q': 'best SEO tips?', 'lang': 'en'}
query_string = urlencode(params)
# Result: 'q=best+SEO+tips%3F&lang=en'

PHP

// urlencode() - Encodes spaces as +
$text = "best SEO tips?";
$encoded = urlencode($text);
// Result: "best+SEO+tips%3F"

// rawurlencode() - Encodes spaces as %20 (RFC 3986)
$encoded = rawurlencode($text);
// Result: "best%20SEO%20tips%3F"

// http_build_query() - Best for query parameters
$params = ['q' => 'best SEO tips?', 'lang' => 'en'];
$query_string = http_build_query($params);
// Result: "q=best+SEO+tips%3F&lang=en"

Java

import java.net.URLEncoder;
import java.nio.charset.StandardCharsets;

String text = "best SEO tips?";
String encoded = URLEncoder.encode(text, StandardCharsets.UTF_8);
// Result: "best+SEO+tips%3F"

Common URL encoding mistakes (and how to fix them)

Mistake #1: Encoding the entire URL, including the protocol and domain

Wrong (JavaScript):
const url = "https://example.com/search?q=test";
const encoded = encodeURIComponent(url);
// Result: "https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dtest"
// This is now BROKEN - protocol and slashes are encoded!

Right:
const params = new URLSearchParams({ q: "test" });
const url = `https://example.com/search?${params}`;
// Result: "https://example.com/search?q=test"

Mistake #2: Double-encoding parameters

User enters: "test & example"
First encoding: "test%20%26%20example" ✓
Second encoding: "test%2520%2526%2520example" ✗ (broken!)

Symptom: Query parameter shows "test%20%26%20example" instead of "test & example"

Fix: Only encode ONCE when building the URL

Mistake #3: Not encoding reserved characters in values

User enters: "price=$50&discount=10%"

Wrong:
/search?q=price=$50&discount=10%
(Parser thinks & starts a new parameter!)

Right:
/search?q=price%3D%2450%26discount%3D10%25

Using JavaScript URLSearchParams (automatic):
const params = new URLSearchParams({ q: "price=$50&discount=10%" });
// Automatically encodes to: q=price%3D%2450%26discount%3D10%25

Mistake #4: Using + for spaces in paths (only valid in query strings)

Wrong: /blog/my+blog+post (+ treated as literal + in path)
Right: /blog/my-blog-post (use hyphens)
Also Right: /blog/my%20blog%20post (but ugly for SEO)

In query strings, both work:
?q=my+query    ✓
?q=my%20query  ✓ (preferred for consistency)

URL encoding and SEO

Google can decode URLs just fine, but readable URLs get more clicks and backlinks:

Debugging URL encoding issues

When URLs break for no obvious reason, encoding is usually the problem. Here's how to track it down:

1. Check the Network tab in browser DevTools

Look at the actual request URL the browser sent and compare it to what you expected. The usual suspects:

• Missing encoding: & appears literally instead of %26
• Double encoding: %2520 instead of %20
• Wrong encoding: + in path instead of %20

2. Use an online URL encoder/decoder

Paste the broken URL into a decoder to see what the server actually receives. Our free tools can help:

3. Test with console commands

// In browser console:
decodeURIComponent("best%20SEO%20tips%3F")
// Result: "best SEO tips?"

encodeURIComponent("best SEO tips?")
// Result: "best%20SEO%20tips%3F"

// Check for double encoding:
decodeURIComponent(decodeURIComponent("test%2520example"))
// If this produces "test example", you have double encoding!

Advanced: how UTF-8 encoding works under the hood

Non-ASCII characters use multiple UTF-8 bytes, and each byte gets its own percent-encoded sequence:

Character: é (e with acute accent)
UTF-8 bytes: C3 A9
URL encoded: %C3%A9

Character: 中 (Chinese character)
UTF-8 bytes: E4 B8 AD
URL encoded: %E4%B8%AD

Character: 🚀 (rocket emoji)
UTF-8 bytes: F0 9F 9A 80
URL encoded: %F0%9F%9A%80

The thing to remember: each %XX is one byte. Multi-byte characters produce multiple percent-encoded sequences.

Quick reference: encoding cheat sheet

Space         %20
!             %21
"             %22
#             %23
$             %24
%             %25
&             %26
'             %27
(             %28
)             %29
*             %2A
+             %2B
,             %2C
/             %2F
:             %3A
;             %3B
=             %3D
?             %3F
@             %40
[             %5B
]             %5D
{             %7B
}             %7D
|             %7C

Wrapping up

URL encoding is one of those things that seems trivial until it quietly breaks your app. Once you know which characters need encoding, when to encode and when to leave things alone, and how to spot encoding bugs, you'll save yourself a lot of frustrating debugging sessions.

The short version:

1. Don't encode the protocol or domain (https://example.com)
2. Always encode query parameter values (use encodeURIComponent() or URLSearchParams)
3. Use hyphens instead of %20 in URL slugs
4. Encode once. Double encoding will ruin your day.
5. Test with international characters and symbols, not just ASCII

Want to encode or decode a URL right now? Our free URL Encoder and URL Decoder tools handle it for you. Paste your text in, get the result back.