≡En resumen
- URL encoding sustituye cada byte problemático por % y su valor hexadecimal: el espacio es %20 y la ñ es %C3%B1.
- Solo letras ASCII, dígitos y los signos - . _ ~ pueden ir siempre sin codificar; los caracteres reservados se codifican cuando no cumplen su función.
- Los caracteres no ASCII se pasan primero a bytes UTF-8 y después cada byte se codifica.
- En formularios (application/x-www-form-urlencoded) el espacio se escribe como +, no como %20.
- Codificar dos veces es un error típico: %20 se convierte en %2520 y el enlace deja de funcionar.
01 ¿Qué es URL encoding?
Las URL solo pueden contener un conjunto limitado de caracteres ASCII, y algunos de ellos (? & = / #) sirven para separar las partes de la dirección. Si un dato contiene esos mismos signos, o tildes, eñes y espacios, hay que «escaparlo» para que el navegador y el servidor no lo confundan con la estructura. Eso es exactamente lo que hace URL encoding.
El mecanismo está definido en el RFC 3986, publicado en enero de 2005 por Tim Berners-Lee, Roy Fielding y Larry Masinter, que es la especificación vigente de la sintaxis de los URI.
02 ¿Qué significa encoding?
Encoding es la palabra inglesa para codificación: la regla que convierte información en otro formato para almacenarla o transmitirla. En informática se usa sobre todo en tres sentidos que conviene no mezclar.
Codificación de caracteres
Traduce letras a bytes: ASCII, ISO-8859-1 o UTF-8. Si falla, ves símbolos raros como ñ en lugar de ñ.
Codificación de URL
El percent-encoding de esta página: adapta datos para que viajen dentro de una dirección web.
Codificación de contenido
Base64, gzip o la codificación de vídeo y audio. Cambian el formato, no el significado.
No es cifrado
Codificar no protege nada: cualquiera puede decodificar %C3%B1. Para ocultar datos se usa cifrado, como el de HTTPS.
03 Cómo funciona la codificación por porcentaje
El RFC 3986 divide los caracteres en dos grupos. Los no reservados (letras A-Z y a-z, dígitos 0-9 y los signos - . _ ~) pueden ir siempre tal cual. Los reservados tienen función de delimitador y se codifican cuando forman parte de un dato y no de la estructura. Todo lo demás, incluidos los caracteres no ASCII, se codifica siempre.
-
1
Toma el carácter
Por ejemplo, la ñ de «España».
-
2
Pásalo a bytes UTF-8
La ñ se representa con dos bytes: C3 y B1 en hexadecimal.
-
3
Antepón % a cada byte
Resultado: %C3%B1. «España» queda como Espa%C3%B1a.
-
4
Decodifica en el servidor
El servidor o el framework revierte el proceso y recupera el texto original.
| Carácter | Codificado | Por qué se codifica |
|---|---|---|
| espacio | %20 (o + en formularios) | No está permitido en una URL |
| & | %26 | Separa parámetros de la query string |
| = | %3D | Separa nombre y valor de un parámetro |
| ? | %3F | Marca el inicio de los parámetros |
| # | %23 | Marca el inicio del fragmento |
| / | %2F | Separa segmentos de la ruta |
| + | %2B | En formularios significa espacio |
| % | %25 | Es el propio carácter de escape |
| á / é / ñ | %C3%A1 / %C3%A9 / %C3%B1 | No son ASCII: se codifican sus bytes UTF-8 |
| € | %E2%82%AC | Tres bytes en UTF-8 |
04 URL encoded en formularios: application/x-www-form-urlencoded
Cuando se habla de datos «url encoded» casi siempre se refiere al tipo de contenido application/x-www-form-urlencoded, el formato por defecto con el que un formulario HTML envía sus campos. Los datos se escriben como en una query string: pares nombre=valor unidos por &, con los valores codificados.
Campos: nombre = «Ana Núñez», email = «ana+web@ejemplo.com».
nombre=Ana+N%C3%BA%C3%B1ez&email=ana%2Bweb%40ejemplo.com
Fíjate en dos detalles: el espacio se ha convertido en +, y el + real del email se ha codificado como %2B para que el servidor no lo lea como un espacio. En una petición HTTP GET esta cadena va en la URL; en un POST viaja en el cuerpo.
05 Cuándo se usa URL encoding: casos reales
No hace falta ser programador para toparse con la codificación de URL. Aparece cada vez que un dato variable acaba dentro de un enlace, y es fácil reconocerla por la cantidad de signos % que genera.
Parámetros de campaña
Un utm_campaign con espacios o tildes («rebajas de verano») llega a la analítica como rebajas%20de%20verano o rebajas+de+verano.
Enlaces para compartir
Los botones de compartir en WhatsApp, X o por email codifican el texto y la URL que se comparten dentro de otra URL.
Buscadores internos
Lo que escribe el usuario en la caja de búsqueda viaja como parámetro q= codificado.
URL dentro de URL
Redirecciones de login (?next=%2Fmi-cuenta%2F) o enlaces de seguimiento que llevan la URL de destino como parámetro.
Llamadas a APIs
Filtros, fechas con dos puntos o nombres con espacios se codifican al construir la petición.
| Codificación | Ejemplo con «ñ &» | Dónde se usa |
|---|---|---|
| URL encoding | %C3%B1%20%26 | URL, parámetros y formularios |
| Entidades HTML | ñ & | Texto dentro de una página HTML |
| Base64 | w7EgJg== | Adjuntos, imágenes incrustadas, tokens |
| Unicode escapado | \u00f1 & | Cadenas en JSON y JavaScript |
06 Cómo codificar y decodificar una URL en JavaScript, PHP y Python
| Lenguaje | Función | Espacio | Cuándo usarla |
|---|---|---|---|
| JavaScript | encodeURIComponent() | %20 | Para el valor de un parámetro; codifica también ? & = / : |
| JavaScript | encodeURI() | %20 | Para una URL completa; respeta los delimitadores |
| JavaScript | URLSearchParams | + | Para construir query strings de formularios |
| PHP | rawurlencode() | %20 | Codificación según RFC 3986 (rutas y parámetros) |
| PHP | urlencode() | + | Formato de formularios |
| Python | urllib.parse.quote() / quote_plus() | %20 / + | Ruta o parámetro / formulario |
encodeURIComponent("precio=10&iva") devuelve precio%3D10%26iva, listo para usarse como valor.
encodeURI("https://ejemplo.com/búsqueda?q=café") devuelve https://ejemplo.com/b%C3%BAsqueda?q=caf%C3%A9: codifica las tildes pero mantiene : / ? y =.
Según MDN, encodeURIComponent deja sin codificar solo A-Z a-z 0-9 - _ . ! ~ * ' ( ).
Si trabajas con un framework moderno, deja que su enrutador y su cliente HTTP codifiquen por ti y evita concatenar cadenas a mano. Es una de las revisiones que hacemos en cualquier proyecto de desarrollo web a medida, porque los errores de codificación suelen aparecer solo con datos reales (apellidos con tilde, direcciones con barras).
07 URL encoding y SEO: tildes, eñes y URL amigables
Google indica en su guía de estructura de URL que los caracteres reservados deben codificarse y que, al enlazar, los caracteres fuera del rango ASCII también deben ir codificados con porcentaje. Técnicamente, una URL como /diseño/ funciona: el navegador la muestra con la ñ, pero viaja como /dise%C3%B1o/.
En la práctica, para sitios en español lo más cómodo es crear URL amigables sin tildes ni eñes, en minúsculas y con guiones: se comparten sin convertirse en cadenas ilegibles y evitan duplicados entre la versión codificada y la sin codificar.
- ✓Usa guiones (-) para separar palabras; Google los prefiere a los guiones bajos.
- ✓Elimina tildes, eñes y espacios de los slugs al crearlos.
- ✓Si ya tienes URL con caracteres especiales indexadas, no las cambies sin redirecciones 301.
- ✓Enlaza siempre la misma forma de cada URL para no generar duplicados.
- ✓Revisa en los logs y en Search Console si aparecen URL con %25 (doble codificación).
Preguntas frecuentes sobre URL encoding
Es la codificación por porcentaje (percent-encoding) que sustituye los caracteres no permitidos en una URL por % y dos dígitos hexadecimales. Por ejemplo, el espacio se escribe %20.
Que un texto ya está codificado para poder ir dentro de una URL o de un formulario. También designa el formato application/x-www-form-urlencoded con el que los formularios HTML envían sus datos.
Es un espacio codificado. 20 es el valor hexadecimal del espacio en ASCII (32 en decimal).
En las rutas y según el RFC 3986 el espacio es %20. En los datos de formularios (application/x-www-form-urlencoded) la convención histórica es +.
Como %C3%B1, que son los dos bytes de la ñ en UTF-8. La Ñ mayúscula es %C3%91.
No. Codificar solo cambia la representación y cualquiera puede revertirlo. Para proteger datos en tránsito se usa cifrado, como HTTPS.
Codificar un texto que ya estaba codificado: el % se convierte en %25 y %20 pasa a %2520. El resultado es un enlace roto o un parámetro con un valor erróneo.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗