Codificador y Decodificador de URL Online: Encode y Decode con encodeURIComponent o encodeURI, Constructor de URL con Query Params Correctamente Codificados (RFC 3986) y Analizador de Componentes para Desarrolladores Web en América Latina
Codifica texto o URLs completas con encodeURIComponent, encodeURI o formato query string (+para espacios). Decodifica URLs con secuencias %XX del español (%C3%A1=á, %C3%B1=ñ). Construye URLs con parámetros UTM y query params correctamente codificados. Analiza cualquier URL en protocolo, host, ruta, parámetros y fragment. 100% en navegador, sin servidor.
Pega cualquier URL para separar protocolo, host, ruta, parámetros query y fragment. Decodifica automáticamente los valores codificados.
Ingresa texto o una URL y usa Codificar o Decodificar
URL encoding en el desarrollo web para América Latina: por qué el español con tildes y ñ rompe las URLs sin codificar correctamente y cómo encodeURIComponent soluciona los problemas más comunes en proyectos de México, Colombia y Argentina
El URL encoding es uno de esos conceptos que los desarrolladores web de América Latina encuentran inevitablemente cuando trabajan con contenido en español. Una URL como https://tienda.com/colección/muñecas/ puede funcionar perfectamente en Chrome moderno, pero fallar en requests HTTP directos, en emails, en APIs que no toleran caracteres no ASCII, o en herramientas antiguas. La versión correctamente codificada es https://tienda.com/colecci%C3%B3n/mu%C3%B1ecas/. El RFC 3986, disponible en la IETF, define el estándar completo de sintaxis de URIs. Para el caso del español, el principio es simple: cada carácter que no esté en el rango ASCII seguro (letras sin tildes, números, y los símbolos – _ . ~) debe convertirse a su representación UTF-8 hexadecimal precedida por %. La á es 0xC3 0xA1 en UTF-8, por eso se convierte en %C3%A1. Esta herramienta maneja esta conversión instantáneamente para cualquier texto en español.
encodeURIComponent vs encodeURI en JavaScript: el error más común de desarrolladores en México y LatAm al construir URLs dinámicas en React, Vue y JavaScript vanilla para aplicaciones con contenido en castellano
El error típico: usar encodeURI() en lugar de encodeURIComponent() para codificar un valor de parámetro que contiene caracteres reservados de URL como &, =, ?, o /. Ejemplo: si el usuario busca “café & pan”, y haces encodeURI('café & pan'), obtienes caf%C3%A9%20&%20pan. El & NO se codifica porque encodeURI lo considera parte de la sintaxis de URL. Pero cuando lo pones en una query string (?q=caf%C3%A9%20&%20pan), el servidor interpreta el & sin codificar como separador de parámetros, rompiendo la query. La solución: encodeURIComponent('café & pan') da caf%C3%A9%20%26%20pan, donde el & sí se codifica como %26. Regla práctica: usa encodeURIComponent() para valores de parámetros individuales, y encodeURI() solo si necesitas codificar una URL completa que ya tiene su estructura de query string.
El Constructor de URL para equipos de marketing digital en CDMX, Bogotá y Buenos Aires: cómo generar URLs con parámetros UTM correctamente codificados para campañas de Google Ads y Meta Ads con nombres en español que incluyen caracteres especiales
Los equipos de marketing digital de América Latina frecuentemente crean URLs de campaña con parámetros UTM que contienen nombres de campaña en español: “Promo Navidad & Año Nuevo 2026”, “Temporada Otoño-Invierno”, “Oferta Especial México 10% descuento”. Cuando estos valores se ponen en UTM sin codificar, pueden causar que Google Analytics reciba datos incorrectos porque los servidores interpretan el & sin codificar como separador de parámetros. El resultado: en lugar de ver una sola campana con nombre “Oferta & Descuento”, GA4 reporta dos parámetros separados. El Constructor de URL de esta herramienta codifica automáticamente todos los valores de parámetros con encodeURIComponent, asegurando que nombres en español con tildes, ñ, & y porcentajes se transmitan correctamente a Google Analytics.
¿Cómo funciona este codificador y decodificador de URL?
Tres módulos para el flujo completo de trabajo con URLs en proyectos web de América Latina.
Modo 1: Codificador / Decodificador
Pega cualquier texto o URL. Selecciona el tipo de codificación: encodeURIComponent (para valores de parámetros, codifica también & = ? /), encodeURI (para URLs completas, no codifica : / ? # &), o Query String (+ para espacios, estilo de formularios web). Al hacer clic en “Codificar URL”, muestra el resultado con las secuencias %XX resaltadas en color teal para identificar fácilmente qué caracteres se codificaron. “Decodificar URL” revierte el proceso, convirtiendo %C3%A1 de vuelta a á y %20 a espacio. El gráfico donut muestra la proporción de caracteres seguros vs. caracteres codificados.
Modo 2: Constructor de URL
Ingresa los componentes de la URL por separado: protocolo (https/http/ftp), dominio, ruta, parámetros query en formato key=value (sin codificar, la herramienta lo hace automáticamente), y fragment. Genera la URL completa con cada parte codificada según las reglas RFC 3986: el path usa encoding de segmento, los valores de query params usan encodeURIComponent. Incluye UTM params predefinidos para facilitar la creación de URLs de campaña.
Modo 3: Analizador de URL
Pega cualquier URL completa. La herramienta usa el constructor URL() nativo del navegador para separar todos los componentes: protocolo, host, hostname, port, pathname, search, hash. Lista cada parámetro query por separado con su valor decodificado. Muestra los segmentos del path individualmente, decodificados. El gráfico donut muestra qué porcentaje de la URL ocupa cada componente.
3 Ejemplos Reales de URL Encoding en Proyectos Web de México, Colombia y Argentina
Cómo desarrolladores, equipos de marketing y agencias digitales de América Latina resuelven problemas reales de codificación de URLs con caracteres del español, parámetros UTM y APIs REST
Desarrollador de e-commerce en Guadalajara cuyo motor de búsqueda de productos rompe cuando los usuarios buscan términos con tildes o ñ: cómo diagnosticar el problema y usar urlencode() en PHP para solucionarlo
Rodrigo tiene una tienda en línea construida con PHP en Guadalajara. Cuando un usuario busca “muñecas mexicanas” el URL generado es /busqueda.php?q=muñecas mexicanas. PHP recibe la q con caracteres no codificados, lo que causa que algunos servidores Apache devuelvan error 400. Rodrigo pega la frase en el Codificador (modo encodeURIComponent) y obtiene mu%C3%B1ecas%20mexicanas. La URL correcta es /busqueda.php?q=mu%C3%B1ecas%20mexicanas. En PHP, el fix es simple: $url = '/busqueda.php?q=' . rawurlencode($_POST['busqueda']);. También verifica con el Analizador que la URL generada tiene el parámetro q = muñecas mexicanas (decodificado correctamente). El Codificador le confirma que %C3%B1 = ñ y %C3%B1 + ecas = muñecas.
Equipo de marketing digital en Bogotá que configura URLs de campaña de Google Ads con parámetros UTM en español para su cliente de retail: cómo el Constructor genera URLs correctas que Google Analytics interpreta sin separar los parámetros
El equipo de Valeria en Bogotá configura una campaña de Google Ads para Black Friday Colombia. El nombre de campaña es “Promo 50% Descuento & Envío Gratis”. Cuando ponen este nombre sin codificar en el utm_campaign, Google Analytics recibe dos parámetros separados porque el & se interpreta como separador. Usan el Constructor: Protocolo: https, Host: tienda.com.co, Ruta: /productos/ropa/, Parámetros: utm_source=google, utm_medium=cpc, utm_campaign=Promo 50% Descuento & Envío Gratis, utm_content=banner-principal. El Constructor genera: https://tienda.com.co/productos/ropa/?utm_source=google&utm_medium=cpc&utm_campaign=Promo%2050%25%20Descuento%20%26%20Env%C3%ADo%20Gratis&utm_content=banner-principal. El & del nombre de campaña se codifica como %26 y el % se codifica como %25. GA4 ahora recibe el nombre de campaña completo correctamente.
Desarrolladora React en Buenos Aires que depura por qué su app obtiene parámetros incorrectos de una URL compartida por WhatsApp: el Analizador revela que un parámetro contiene una URL codificada dentro de otra URL y requiere doble decodificación
Natalia desarrolla una app React en Buenos Aires. Los usuarios comparten links por WhatsApp con un parámetro redirect que contiene la URL a la que volver después del login. La URL compartida es: https://app.com/login?redirect=https%3A%2F%2Fapp.com%2Fperfil%3Fid%3D123%26tab%3Dconfig. Natalia pega esta URL en el Analizador. La herramienta muestra: parámetro redirect = https://app.com/perfil?id=123&tab=config (ya decodificado una vez). Ahora entiende que el valor de redirect es en sí mismo una URL con sus propios parámetros. Para procesar este valor en React, necesita decodeURIComponent(params.get('redirect')) y luego parsear esa URL con new URL(decodedRedirect). El Analizador también confirma que el % que codifica el https del redirect es %3A (para 🙂 y %2F (para /), correctamente usando encodeURIComponent para anidar una URL dentro de otra.
Agencia SEO en Santiago que necesita verificar si las URLs de blog de su cliente con títulos en español contienen encoding correcto o si WordPress está generando dos versiones diferentes de la misma URL, creando contenido duplicado
Sebastián en Santiago audita el blog de un cliente. Encuentra que algunas páginas tienen dos URLs accesibles: /opinión-sobre-pensiones/ (con ó literal) y /opini%C3%B3n-sobre-pensiones/ (con ó codificada). Pega ambas en el Analizador para ver cómo las interpreta el navegador. Resultado: el URL() constructor normaliza ambas a la misma URL interna. El navegador las trata igual, pero Google puede indexarlas como URLs diferentes, creando contenido duplicado. Diagnóstico: WordPress genera los slugs con caracteres unicode si la configuración es “UTF-8 slugs” pero los CDN o el servidor normaliza de una forma u otra. Solución: configurar en WordPress una sola convención (preferiblemente sin caracteres especiales: /opinion-sobre-pensiones/) y agregar una redirección 301 de la versión con caracteres especiales a la versión limpia.
Backend developer en Lima que construye una API REST con endpoints en español y necesita verificar cómo Postman codifica automáticamente los path params con caracteres del español antes de que lleguen al servidor Node.js
Miguel en Lima tiene una API Node.js con endpoints como /api/categorias/:nombre. Cuando el nombre de categoría es “muñecos y peluches”, Postman codifica automáticamente el path: /api/categorias/mu%C3%B1ecos%20y%20peluches. Miguel usa el Codificador para verificar el encoding correcto: encodeURIComponent('muñecos y peluches') = mu%C3%B1ecos%20y%20peluches. Confirma que Node.js necesita hacer decodeURIComponent(req.params.nombre) para obtener el string en español original. También descubre que en Express.js, req.params.nombre ya viene decodificado automáticamente (Express llama a decodeURIComponent internamente), pero req.url todavía contiene la versión codificada. El Codificador le confirmó que ambas representaciones son equivalentes.
Startup SaaS en Monterrey con sistema de emails transaccionales donde los links de confirmación rompen en ciertos clientes de correo porque los tokens contienen el carácter + que Outlook y Gmail manejan diferente en URLs dentro de emails
El equipo de Carlos en Monterrey tiene un sistema de emails donde el link de confirmación es: https://app.com/confirmar?token=abc+def+ghi=. En el navegador al hacer clic desde Gmail funciona. Pero cuando Outlook renderiza el email, el + se convierte en espacio en la URL, rompiendo el token. Carlos usa el Codificador (modo encodeURIComponent) para codificar el token: abc+def+ghi= se convierte en abc%2Bdef%2Bghi%3D. Los caracteres + y = ya no pueden ser malinterpretados porque están codificados como %2B y %3D. El Analizador confirmó que la URL con el token codificado se parsea correctamente: parámetro token = abc+def+ghi= (decodificado correctamente por URLSearchParams). La regla de oro: los tokens de autenticación siempre deben codificarse con encodeURIComponent antes de ponerlos en URLs de email.
3 Consejos de Expertos para Desarrolladores que Trabajan con URLs en Proyectos de América Latina
Lo que los desarrolladores web senior de México, Colombia y Argentina aplican en sus proyectos para evitar los errores más comunes de codificación de URLs con contenido en español, parámetros de APIs y sistemas de autenticación
Nunca construyas query strings con concatenación de strings: usa URLSearchParams en JavaScript, http_build_query() en PHP, o urllib.parse.urlencode() en Python, porque estas funciones manejan el encoding correcto automáticamente incluyendo todos los caracteres especiales del español
El error más común y peligroso en proyectos web de LatAm: construir query strings concatenando strings directamente: var url = '/buscar?q=' + userInput + '&tipo=' + tipo;. Si userInput contiene un & (usuario busca “sal & pimienta”), la URL se rompe. Si contiene una ñ, algunos servidores devuelven error. La forma correcta en JavaScript: var params = new URLSearchParams(); params.set('q', userInput); params.set('tipo', tipo); var url = '/buscar?' + params.toString();. URLSearchParams codifica automáticamente todos los valores. En PHP: $url = '/buscar?' . http_build_query(['q' => $userInput, 'tipo' => $tipo]);. Esta regla es especialmente importante en búsquedas, formularios de contacto y cualquier input del usuario que puede contener nombres en español, precios con % o símbolos de moneda.
Para slugs de WordPress y CMS en español, usa slugs sin caracteres especiales en lugar de dependencia del encoding: /opinion-sobre-economia/ es mejor que /opini%C3%B3n-sobre-econom%C3%ADa/ para SEO, compatibilidad entre sistemas y evitar el problema de doble versión de URL
El debate de URLs con tildes en proyectos de blogs en México, Colombia y Argentina: ¿usar /opinión/ o /opinion/? Ventajas de sin tildes: compatibilidad universal entre todos los sistemas, bases de datos, APIs y herramientas de analytics. Sin problemas de doble indexación (/opinión/ y /opini%C3%B3n/ pueden aparecer como URLs diferentes para Google). Más fácil de escribir manualmente y compartir. Menos probable que cause problemas al copiar y pegar en emails o WhatsApp. La recomendación de la mayoría de agencias SEO de CDMX y Buenos Aires: slugs sin caracteres especiales (/opinion-financiera-mexico/) y texto con tildes en el H1 y contenido para SEO. Activa la configuración de WordPress que convierte automáticamente los slugs a ASCII sin acentos.
Valida siempre las URLs con el constructor URL() de JavaScript antes de usarlas: this constructor lanza un TypeError si la URL es inválida, lo que es mucho más confiable que las expresiones regulares de validación de URLs que fallan con URLs complejas o internacionales
La validación de URLs con regex es un problema clásico en desarrollo web: ninguna expresión regular cubre todos los casos correctamente, especialmente con URLs internacionales (IDN), URLs con fragmentos complejos o parámetros codificados. La solución moderna y robósta en JavaScript: function isValidUrl(url) { try { new URL(url); return true; } catch(e) { return false; } }. El constructor URL() usa el mismo parser que el navegador, validando la URL contra el WHATWG URL Standard. En Node.js 10+: usa const { URL } = require('url'); new URL(urlString);. Para el Analizador de esta herramienta usamos exactamente esta técnica: si URL() no lanza error, la URL es válida. Este método funciona correctamente con URLs que contienen caracteres del español, IDN, y parámetros query complejos, que son comunes en proyectos para el mercado latinoamericano.
16 Preguntas Frecuentes sobre Codificación de URLs
URL encoding, decode, encodeURIComponent, RFC 3986 y manejo de caracteres del español en proyectos web de México, Colombia, Argentina, Chile y toda América Latina
¿Qué es el URL encoding?
Proceso de convertir caracteres especiales en URLs a formato seguro HTTP: cada carácter inseguro se reemplaza por % seguido de su código hexadecimal UTF-8. Ejemplo: espacio=%20, á=%C3%A1, ñ=%C3%B1. Estándar: RFC 3986.
¿Diferencia entre encodeURI y encodeURIComponent?
encodeURI: para URLs completas, no codifica : / ? # [ ] @ & = y otros reserved chars. encodeURIComponent: para valores de parámetros, codifica todo incluyendo & = ? /. Regla: usa encodeURIComponent para valores individuales, encodeURI para URLs completas ya formadas.
¿Cómo se codifica la ñ y las vocales con tilde?
á=%C3%A1, é=%C3%A9, í=%C3%AD, ó=%C3%B3, ú=%C3%BA, ñ=%C3%B1. Son 2 bytes en UTF-8. ¿=%C2%BF, ¡=%C2%A1. El Codificador de esta herramienta los convierte instantáneamente.
¿%20 o + para espacios?
%20 es el estándar RFC 3986 y funciona en cualquier parte de la URL. + como espacio solo es válido dentro de query strings (formato application/x-www-form-urlencoded). En el path de la URL, + es un carácter literal, no espacio.
¿Qué es el RFC 3986?
Estándar de la IETF que define la sintaxis de URIs. Define qué caracteres son seguros (A-Z a-z 0-9 – _ . ~), qué tienen significado especial en la sintaxis URL (: / ? # [ ] @ & = + $ , ; ! ‘ ( ) * ~), y cómo codificar el resto con %HH.
¿Equivalente de encodeURIComponent en PHP?
rawurlencode() codifica espacios como %20 (igual que encodeURIComponent). urlencode() codifica espacios como + (para query strings). rawurldecode() y urldecode() para decodificar. Para APIs REST: usa rawurlencode() para máxima compatibilidad.
¿Por qué una URL con ñ puede funcionar en el navegador pero fallar en APIs?
Los navegadores modernos auto-codifican caracteres no ASCII en URLs. Pero cuando construyes URLs en código (JavaScript, PHP, Python) y las concatenas directamente, los caracteres van sin codificar. Los servidores Apache/Nginx y muchas APIs estrictas devuelven error 400 con caracteres no ASCII sin codificar.
¿Qué es el constructor URL() en JavaScript?
Clase nativa que parsea una URL en sus componentes (protocol, host, pathname, search, hash) según el WHATWG URL Standard. Más confiable que regex para validar y parsear URLs, incluyendo las que tienen caracteres del español o IDN. Disponible en todos los navegadores modernos y Node.js 10+.
¿Cómo construir query strings seguros en JavaScript?
Usa URLSearchParams: var p = new URLSearchParams(); p.set('q', userInput); p.set('tipo', tipo); var qs = p.toString();. Codifica automáticamente todos los valores. Nunca concatenes strings con caracteres no codificados del usuario.
¿Slugs de WordPress con o sin tildes?
Sin tildes es la recomendación de la mayoría de SEOs de LatAm: /opinion-economica/ en lugar de /opini%C3%B3n-econ%C3%B3mica/. Evita el problema de doble versión indexada, es más compatible con todos los sistemas y fácil de compartir.
¿Qué es URLSearchParams?
API nativa del navegador (y Node.js) para trabajar con query strings. Codifica y decodifica automáticamente. El Analizador de esta herramienta usa URLSearchParams para listar todos los parámetros de la URL con sus valores decodificados.
¿Cómo afecta el URL encoding al SEO?
/opinion/ y /opini%C3%B3n/ pueden ser indexadas por Google como URLs duplicadas. Usa canonical tags o redireccionamientos 301 para consolidar. Para nuevos proyectos: usa una sola convención (preferiblemente sin caracteres especiales) desde el inicio.
¿Los tokens de autenticación en URLs deben codificarse?
Sí. Los tokens JWT, tokens de verificación de email y tokens de reset de contraseña contienen Base64 con caracteres + y = que deben codificarse (%2B y %3D). Sin codificar, estos caracteres pueden malinterpretarse como separadores en query strings.
¿Longitud máxima de una URL?
No hay límite en RFC 3986 pero: Chrome soporta hasta 2MB. Apache: 8KB por defecto. Nginx: 4KB. Google recomienda URLs menores a 2,000 chars para SEO. Los caracteres codificados (%XX) expanden la longitud 3x respecto al original.
¿Cómo decodificar una URL doblemente codificada?
Si una URL está doblemente codificada (%2525 en lugar de %25), aplica decodeURIComponent() dos veces. Primera decodificación: %2525 → %25. Segunda: %25 → %. El Decodificador de esta herramienta aplica una decodificación. Para doble encoding, usa dos veces.
¿Esta herramienta envía las URLs a algún servidor?
No. Todo el procesamiento ocurre 100% en el navegador con JavaScript nativo (encodeURIComponent, decodeURIComponent, URL()). Las URLs, tokens y textos que introduces nunca salen de tu dispositivo. Seguro para URLs con credenciales de API, tokens de autenticación y URLs de sistemas internos.
Herramientas Relacionadas de Desarrollo Web
Aviso Legal y Transparencia Editorial
Esta herramienta usa las funciones nativas de JavaScript encodeURIComponent(), decodeURIComponent(), encodeURI(), y el constructor URL() del navegador según el WHATWG URL Standard y el RFC 3986. El texto, las URLs y los tokens que introduces nunca salen de tu navegador. Los resultados deben verificarse en el contexto específico de cada servidor web y framework, ya que diferentes implementaciones pueden interpretar ciertos caracteres de formas distintas. Última actualización: julio 2026.
