Creador de URL

Anatomía de una URL, componente por componente

La gramática que define cada URL en la web vive en la RFC 3986 «Uniform Resource Identifier (URI): Generic Syntax» (Berners-Lee, Fielding, Masinter, enero de 2005). Los navegadores en realidad usan una variante ligeramente más tolerante definida en el WHATWG URL Living Standard. Ambos concuerdan en los componentes:

• Esquema: https, http, ftp, mailto, data, tel, sms, magnet, más esquemas de aplicaciones personalizadas (myapp://). RFC 3986 requiere minúsculas; WHATWG canoniza. El registro de esquemas URI de IANA tiene la lista oficial de esquemas registrados.
• Autoridad: userinfo@host:port. La forma de credenciales incrustadas user:password@ está obsoleta por seguridad: Chrome 64 (enero de 2018) bloquea las cargas de subrecursos con credenciales en la URL porque permitían trucos de phishing.
• Host: un nombre de dominio o literal IP. Los nombres de dominio internacionalizados como президент.рф se convierten a ASCII vía Punycode (RFC 3492, marzo de 2003): ese ejemplo se convierte en xn--d1abbgf6aiiy.xn--p1ai. Los navegadores hacen la conversión de forma transparente para la visualización.
• Puerto: solo incluido cuando no es el predeterminado para el esquema. Predeterminados: 80 (http), 443 (https), 21 (ftp), 22 (ssh), 25 (smtp), 5432 (postgres), 3306 (mysql), 6379 (redis).
• Ruta: segmentos separados por barras. Cada segmento codifica con porcentaje todo lo que esté fuera del conjunto pchar definido en RFC 3986 §3.3. Los segmentos-punto . y .. tienen semántica de eliminación (§5.2.4).
• Consulta: por convención pares clave-valor separados por &, pero RFC 3986 solo dice «cadena opaca después de ?». La convención se formaliza en el algoritmo application/x-www-form-urlencoded del WHATWG.
• Fragmento: todo después de #. Nunca enviado al servidor. Usado por enrutadores de aplicaciones de página única, anclas de enlace y tokens de flujo implícito OAuth.

Codificación porcentual: la trampa + versus %20

RFC 3986 §2.3 define los caracteres no reservados que nunca necesitan codificación: A-Z a-z 0-9 - . _ ~. Todo lo demás, cuando aparece como datos dentro de un componente de URL, se convierte en %XX donde XX es el valor hexadecimal del byte. Los caracteres UTF-8 multi-byte se expanden a múltiples tripletes de porcentaje: é (U+00E9, UTF-8 C3 A9) se codifica como %C3%A9. El truco clásico es el carácter espacio: en una ruta o fragmento de URL regular, el espacio se codifica como %20; en cadenas de consulta codificadas en formulario (el algoritmo application/x-www-form-urlencoded compartido por formularios HTML y el serializador de cadenas de consulta WHATWG), el espacio se codifica como +. Un servidor que decodifica datos de formulario convierte + de vuelta a espacio; un servidor que trata la consulta como un URI genérico no lo hace. Mezclar las dos convenciones corrompe silenciosamente los datos. El patrón seguro en JavaScript: use new URLSearchParams para consultas y encodeURIComponent para valores individuales; la conformidad con la especificación está cubierta por usted.

Donde realmente necesita un constructor de URL

• Enlaces de marketing etiquetados con UTM para Google Analytics (Urchin Tracking Module, en GA desde 2005): los cinco parámetros canónicos son utm_source, utm_medium, utm_campaign, utm_content, utm_term, todos en minúsculas según las propias directrices de Google.
• Solicitudes de autorización OAuth 2.0 (RFC 6749, octubre de 2012): la especificación obliga a response_type, client_id, redirect_uri, scope, state como parámetros de consulta en el endpoint de autorización.
• Enlaces profundos móviles: un esquema app:// que el SO enruta a su aplicación instalada en lugar del navegador, o un Android App Link / iOS Universal Link servido desde su dominio.
• Prueba de clientes API: https://api.example.com/v2/users?expand=projects&since=2024-01-01. Escribir estos a mano falla consistentemente en el paso «espacio dentro de un valor».
• Buster de caché CDN: ?v=2026-05-12-1 añadido a URLs de activos estáticos para que un despliegue invalide la versión en caché. La cadena de consulta es parte de la clave de caché.
• Servicios de transformación de imágenes (Cloudinary, imgix, Cloudflare Images): la transformación se codifica como parámetros de consulta o segmentos de ruta. Una llamada típica se parece a ?w=800&q=85&fm=webp.
• Plantillas de email donde la página de destino lee parámetros vía JS, combinando a menudo etiquetas UTM con un token o uid único para seguimiento por destinatario.

Errores comunes

• Olvidar codificar & dentro de un valor. Un valor «gatos & perros» soltado ingenuamente en ?especies=gatos & perros se convierte en una clave especies con valor gatos más una clave vacía perdida. Siempre pase a través de encodeURIComponent.
• Doble codificación. Llamar a encodeURIComponent en una cadena ya codificada convierte %20 en %2520. Fácil cuando un valor pasa por dos sistemas que cada uno «codifica defensivamente».
• Desajuste de barra final. RFC 3986 dice que https://example.com/api y https://example.com/api/ son recursos diferentes. La mayoría de las APIs REST los tratan de forma idéntica, pero algunas devuelven redirecciones 308; elija una forma canónica y documéntela.
• Mezclar + y %20. Las cadenas de consulta codificadas en formulario usan + para espacio; la codificación porcentual genérica usa %20. Una ruta con + literal sobrevive al copia-pega pero falla cuando un decodificador de formulario la lee.
• Credenciales incrustadas. https://user:pass@example.com está obsoleto y bloqueado para cargas de subrecursos en Chrome 64+. Use el header Authorization.
• Suplantación IDN. El cirílico «а» (U+0430) es visualmente idéntico al latín «a». Los navegadores muestran Punycode cuando un dominio mezcla scripts, pero una URL construida manualmente que apunta a аpple.com (а cirílica) abre un sitio diferente que apple.com. Use Punycode (xn--...) por seguridad, o quédese con ASCII.
• Añadir // después de esquemas que no lo usan. mailto:, tel:, sms:, magnet: todos saltan el // y van directamente a la ruta. mailto:user@example.com es correcto; mailto://... no lo es.

Más preguntas frecuentes

¿Cuál es la longitud máxima de una URL?

RFC 3986 no establece límite. En la práctica: los navegadores limitan a unos 2 000 caracteres para la barra de direcciones (Internet Explorer 11 era 2 083; Chrome y Firefox toleran más pero truncan la visualización); la mayoría de CDNs y proxies limitan a 4 096 u 8 192; servidores como Apache y Nginx por defecto a 8 192 bytes para la línea de solicitud. Si necesita más de 2 000 caracteres, cambie al cuerpo POST.

¿Puedo incluir el mismo parámetro de consulta varias veces?

Sí. ?tag=red&tag=blue&tag=green es válido. Cómo lo interpreta el servidor depende del framework: Express / Node.js parsea a req.query.tag = ['red', 'blue', 'green']; PHP necesita la convención de corchetes ?tag[]=red&tag[]=blue; Rails parsea a un array si usa los corchetes tag[]. El método URLSearchParams.getAll('tag') siempre devuelve todos los valores como un array independientemente del estilo de corchetes.

¿Los parámetros de consulta afectan el SEO?

Los parámetros de seguimiento (UTM, fbclid, gclid) generalmente no afectan los rankings de búsqueda orgánica. El riesgo es la indexación de contenido duplicado: una URL etiquetada y su versión limpia parecen dos páginas diferentes para un crawler. La solución es una etiqueta <link rel="canonical" href="clean-url"> apuntando cada variante etiquetada a la misma URL canónica.

¿Qué es una plantilla URI, y debería usar una?

RFC 6570 (marzo de 2012) define las plantillas URI: una sintaxis para URLs parametrizadas con marcadores de posición. Se usan en specs OpenAPI / Swagger, JSON Hyper-Schema, y algunas APIs HATEOAS. Para la construcción de URL del día a día, la concatenación simple de cadenas a través de este constructor es más sencilla; las plantillas URI brillan al documentar una superficie de API y generar SDKs cliente.

¿Se envía algo a un servidor?

No. Cada componente que escribe, la codificación y la URL final se construyen en el JavaScript de su navegador. No se hace llamada de red para ensamblar la URL. Abra la pestaña Red en DevTools y pruebe la herramienta: verá cero solicitudes salientes durante la construcción.