¿Qué es la Codificación de URL? Guía Completa para Desarrolladores

Cada vez que ejecutas una búsqueda, haces clic en un enlace con caracteres especiales o construyes una petición API, la codificación de URL está trabajando silenciosamente en segundo plano. A pesar de esto, muchos desarrolladores —incluso con experiencia— tienen dudas sobre qué es exactamente, por qué existe y cuándo deben implementarla manualmente. Esta guía explica todo lo que necesitas saber.

El Problema: Los URLs tienen un conjunto de caracteres limitado

Un URL (Uniform Resource Locator) está definido por el estándar RFC 3986, que especifica la sintaxis de los URIs. Esta normativa permite únicamente un rango restringido de caracteres en un URL:

• Caracteres no reservados — seguros de usar en cualquier parte: A–Z a–z 0–9 - _ . ~
• Caracteres reservados — tienen un significado estructural: : / ? # [ ] @ ! $ & ' ( ) * + , ; =
• Cualquier otro — incluyendo espacios, letras acentuadas, emojis y la mayoría de caracteres Unicode — no está permitido en un URL sin formato.

Entonces, ¿qué sucede cuando necesitas incluir un espacio en un URL? ¿O un símbolo "&" que forma parte de un valor y no como un separador de parámetros? ¿O un carácter en otro idioma? Aquí es donde entra la codificación de URL.

¿Qué es la Codificación de URL (Percent-Encoding)?

La codificación de URL, formalmente llamada percent-encoding, es el mecanismo mediante el cual los caracteres inseguros o reservados se convierten en una representación segura que puede transmitirse en un URL sin ambigüedades.

El proceso es sencillo: cada carácter no permitido se reemplaza por un signo de porcentaje (%) seguido de los dos dígitos hexadecimales que representan su valor en la tabla ASCII o UTF-8.

Espacio →  %20  (o + en cadenas de consulta)
!       →  %21
"       →  %22
#       →  %23
$       →  %24
%       →  %25
&       →  %26
'       →  %27
(       →  %28
)       →  %29
+       →  %2B
/       →  %2F
:       →  %3A
=       →  %3D
?       →  %3F
@       →  %40

Para caracteres UTF-8 multi-byte (como letras latinas con tildes, caracteres asiáticos o emojis), cada byte se codifica de forma individual. Por ejemplo, la palabra café — donde é se codifica mediante los dos bytes 0xC3 0xA9 en UTF-8 — se transforma en caf%C3%A9.

Codificación de URL vs. Codificación de Componentes URI

Existen dos variantes sutilmente diferentes que suelen confundir a los desarrolladores:

• Codificación de formulario (application/x-www-form-urlencoded) — Utilizada en envíos GET de formularios HTML y muchas APIs. Aquí, los espacios se codifican como + en lugar de %20. En PHP, esto se logra con urlencode(); en JavaScript, se genera mediante new URLSearchParams().
• Codificación de componente URI — Es más estricta. Los espacios se convierten siempre en %20 y ningún carácter reservado se deja sin procesar. En PHP, se utiliza rawurlencode(); en JavaScript, es encodeURIComponent().

Al construir cadenas de consulta para APIs REST, se recomienda la codificación de componente URI (encodeURIComponent / rawurlencode) para evitar errores. Cuando envías formularios HTML vía GET, el navegador maneja la codificación automáticamente.

¿Cuándo debes codificar manualmente?

Los navegadores y las librerías HTTP gestionan la codificación automáticamente en casos comunes, por lo que no siempre es necesario intervenir. Sin embargo, debes codificar manualmente en estas situaciones:

1. Construcción de URLs en código: Cuando concatenas datos dinámicos o entrada de usuario en un URL, codifica cada componente por separado. Nunca codifiques el URL completo de una vez, ya que esto alteraría también las barras (slashes) y dos puntos que estructuran el URL.
2. Peticiones de API: Al pasar parámetros personalizados de usuarios a una API REST, aplica siempre la codificación por componente.
3. URLs de redirección: Si pasas un URL de destino como parámetro (ej. ?redirect=https://ejemplo.com/path), el URL de redirección debe estar codificado.
4. Plantillas del lado del servidor: Al renderizar URLs mediante PHP, Python, Ruby o cualquier lenguaje backend, procesa los valores dinámicos con la función adecuada.

Codificación de URL en distintos lenguajes

// Codificación estilo formulario (espacio → +)
$encoded = urlencode("hola mundo & café");
// → hola+mundo+%26+caf%C3%A9

// Codificación estricta (espacio → %20)
$encoded = rawurlencode("hola mundo");
// → hola%20mundo

// Codificar un parámetro individual
encodeURIComponent("hola mundo & café");
// → "hola%20mundo%20%26%20caf%C3%A9"

// Codificar un URL completo (preserva :, /, ?)
encodeURI("https://ejemplo.com/café");
// → "https://ejemplo.com/caf%C3%A9"

Errores comunes que debes evitar

• Doble codificación: Codificar una cadena que ya está codificada generará resultados corruptos como %2520 (al codificar el signo %). Asegúrate de decodificar antes de re-codificar si el estado de los datos es incierto.
• Codificar el URL completo: Solo debes codificar los valores de los parámetros, no la estructura del URL (esquema, host o separadores de ruta).
• Usar encodeURI para valores de parámetros: encodeURI no codifica caracteres como &, = o +, lo que romperá tu URL si estos caracteres forman parte de tus datos. Usa siempre encodeURIComponent para los valores.

Decodificación de cadenas

La decodificación revierte el proceso: %20 vuelve a ser un espacio, %C3%A9 se convierte en é, etc. Los servidores decodifican las peticiones automáticamente, pero en tu código puedes usar urldecode() (PHP) o decodeURIComponent() (JavaScript).

Si necesitas decodificar o codificar rápidamente sin escribir código, utiliza nuestra herramienta gratuita de Decodificador de URL o nuestro Codificador de URL.