Qué significa %20 en una URL y cuándo codificar
Aprende qué reemplaza cada porcentaje, cuándo codificar un valor o la URL entera y cómo evitar el doble codificado que rompe enlaces.
El %20 de una URL es un espacio. La codificación porcentual reemplaza cada carácter que no puede ir tal cual en una URL por un % seguido de dos dígitos hexadecimales, y así el enlace llega intacto al servidor. Con el codificador de URL conviertes texto a su forma codificada y de vuelta en tu navegador, eligiendo entre codificar un componente o una URL completa, una diferencia que causa la mayoría de los errores.
¿Por qué hay que codificar una URL?
Una URL solo admite un conjunto limitado de caracteres ASCII, y algunos tienen un significado especial: ? empieza los parámetros, & separa uno de otro, = une nombre y valor, # marca un fragmento y / separa tramos de la ruta. Si un dato contiene alguno de ellos, hay que codificarlo para que no se confunda con la estructura. Las reglas están en el RFC 3986.
Un ejemplo: en precio=10&20 el navegador entiende dos parámetros, precio=10 y 20. Codificado como precio=10%2620, es un solo valor: 10&20.
¿Cómo se codifica cada carácter?
Los espacios, los acentos y los símbolos se convierten en los bytes de su codificación UTF-8, escritos en hexadecimal con un % delante. Estos son resultados reales de la herramienta:
| Carácter | Codificado | Nota |
|---|---|---|
| espacio | %20 | El más habitual |
& | %26 | Separa parámetros si va sin codificar |
= | %3D | Une nombre y valor |
? | %3F | Inicia los parámetros |
# | %23 | Inicia el fragmento |
/ | %2F | Separa la ruta |
+ | %2B | En formularios, un + sin codificar se lee como espacio |
ñ | %C3%B1 | Dos bytes en UTF-8 |
é | %C3%A9 | Dos bytes en UTF-8 |
% | %25 | El propio símbolo también se codifica |
Componente o URL completa: la diferencia que importa
La herramienta ofrece dos modos, que corresponden a dos funciones de JavaScript:
- Componente (
encodeURIComponent): codifica todos los caracteres especiales. Úsalo para un valor suelto, por ejemplo lo que el usuario escribió en un buscador. - URL completa (
encodeURI): conserva:,/,?,#,&y=, porque forman parte de la estructura. Úsalo para una URL ya armada que solo tiene espacios o acentos.
Por ejemplo, https://ex.com/a b?q=ñ&x=1#h se convierte en https://ex.com/a%20b?q=%C3%B1&x=1#h con el modo URL completa, y la estructura sigue intacta. Con el modo Componente, en cambio, los dos puntos y las barras también se codificarían (https%3A%2F%2F...) y el enlace dejaría de ser una URL.
Cómo usar la herramienta paso a paso
- Abre el codificador de URL y elige Codificar o Decodificar.
- Elige el alcance: Componente o URL completa.
- Escribe o pega el texto. El resultado aparece al momento.
- Copia el resultado o descárgalo como
.txt.
Leer una URL llena de porcentajes
Decodificar es igual de útil que codificar. Tomemos https://ejemplo.com/buscar?q=caf%C3%A9%20con%20leche&pagina=2. Al decodificarla en el modo URL completa se lee https://ejemplo.com/buscar?q=café con leche&pagina=2: el término buscado es "café con leche" y hay un segundo parámetro, pagina=2. Es una forma rápida de entender qué lleva un enlace de rastreo o de comprobar que un valor no se alteró por el camino. Si la URL trae %26 dentro de un valor, decodifícala solo después de separar los parámetros: al decodificar antes, ese & volvería a parecer un separador.
Los errores más comunes
- Doble codificado. Si codificas algo ya codificado, el
%20se convierte en%2520(el%pasa a%25). El enlace se rompe y se ve un2520raro. Decodifica una vez y revisa. - Usar el modo equivocado. Codificar una URL completa con el modo Componente la vuelve inservible.
- URI malformada. Al decodificar, si encuentras un
%que no va seguido de dos dígitos hexadecimales (por ejemplo100%a secas), la herramienta avisa de que la URI es malformada. Hay que codificar ese%como%25. +frente a%20. En el texto de un formulario web, el+significa espacio, pero en la ruta de una URL no. Al dudar,%20funciona en más sitios.
Hacerlo desde código
Los dos modos de la herramienta reflejan las funciones que trae todo entorno de JavaScript. encodeURIComponent("café con leche") devuelve caf%C3%A9%20con%20leche, y decodeURIComponent lo revierte. Otros lenguajes tienen equivalentes en su biblioteca estándar, así que si armas cadenas de consulta a mano concatenando texto, cambia a un constructor de URL o de parámetros y deja que él codifique. La herramienta sirve para comprobar qué debería producir tu código, no para sustituirlo.
Para qué sirve en la práctica
Para armar enlaces con parámetros que llevan texto libre, para leer una URL que viene llena de % y entender qué dice, y para depurar un error de enlace roto. Si el dato que codificas es un parámetro de campaña, mira parámetros UTM sin ensuciar tus URLs, y para entender otro tipo de codificación que se confunde con esta, qué es Base64.
Preguntas frecuentes
¿Qué significa %20 en una URL?
Es un espacio. La codificación porcentual escribe un carácter como % más su valor en hexadecimal, y el espacio tiene el valor 20.
¿Cuál es la diferencia entre encodeURI y encodeURIComponent?
encodeURI conserva los caracteres que estructuran una URL (: / ? # & =) y sirve para una URL completa. encodeURIComponent codifica todos los especiales y sirve para un valor suelto, como un parámetro.
¿Cómo se codifica la ñ en una URL?
Como %C3%B1, que son los dos bytes de la ñ en UTF-8. La é es %C3%A9.
¿Por qué aparece %2520 en mi enlace?
Porque se codificó dos veces: el % del %20 pasó a %25. Decodifica una vez y revisa el flujo que codifica de más.
¿Qué es una URI malformada?
Un texto con un % que no va seguido de dos dígitos hexadecimales válidos, por ejemplo un 100% sin codificar. Se arregla escribiendo ese símbolo como %25.
¿Se envía mi texto a algún servidor?
No. La conversión ocurre en tu navegador.
Codifica o decodifica una URL
Elige entre un componente o la URL completa y ve el resultado al instante. 100% local, gratis y sin registro.
Abrir Codificador de URL →Herramientas relacionadas
- Codificador de URL: codifica y decodifica, como componente o URL completa.
- Constructor de UTM: arma enlaces de campaña con parámetros bien codificados.
- Base64: otra codificación habitual, con otro propósito.
- Entidades HTML: escapa caracteres para usarlos dentro de HTML.
También te puede interesar: qué es un slug y cómo escribirlo bien para SEO, hreflang explicado con los errores más comunes, Entidades HTML: qué son y cómo evitan el XSS y Regex con ejemplos: correo, teléfono, RFC y CURP.