Codificar y decodificar URL online

Los dos modos, y por qué elegir mal rompe el enlace

Es la duda que trae aquí a más gente, y tiene una explicación de una línea: la diferencia está en si se codifican los caracteres que dan estructura a la dirección —los dos puntos, las barras, el interrogante, la almohadilla, el ampersand y el igual—.

Con la misma frase de partida, https://ejemplo.com/mi página?q=café:

• Como valor suelto sale https%3A%2F%2Fejemplo.com%2Fmi%20p%C3%A1gina%3Fq%3Dcaf%C3%A9. Ya no es una dirección: es un texto. Y eso es exactamente lo que hace falta para meterlo dentro del parámetro de otra dirección, que es de donde salen esos url=https%3A%2F%2F… que se ven por todas partes.
• Como dirección entera sale https://ejemplo.com/mi%20p%C3%A1gina?q=caf%C3%A9. Sigue siendo una dirección, con sus barras y su interrogante intactos, pero con el espacio y el acento arreglados. Es lo que hace falta para reparar una dirección que ya lo es.

Equivocarse falla en las dos direcciones. Codificar una dirección entera como si fuera un valor la convierte en un texto que no lleva a ninguna parte. Y codificar un valor como si fuera una dirección deja sin tocar las barras y los ampersands que lleve dentro, así que la dirección se parte por sitios donde no debía partirse y el destino recibe medio parámetro.

Por qué aparecen los %20

Porque una dirección solo puede llevar un puñado de caracteres, y el espacio no está entre ellos. Cuando hace falta uno que no está permitido se sustituye por un signo de porcentaje seguido de su número en hexadecimal. El espacio es el carácter número 32, que en hexadecimal es 20; de ahí %20, y de ahí el nombre del sistema: codificación por porcentaje.

Con los acentos hay un paso más. La eñe no tiene un número por debajo de 256, así que primero se convierte a bytes UTF-8 —la eñe son dos: C3 y B1— y luego cada byte se escribe con su porcentaje: %C3%B1. El euro son tres bytes y un emoji son cuatro, que es por lo que un emoji ocupa doce caracteres codificado. Aquí eso se hace bien; es donde fallan bastantes herramientas, que se quedan en los 256 primeros caracteres y devuelven basura en cuanto aparece una tilde.

Ver %20 en una dirección no es un error: es la forma correcta de escribirla, y el navegador la deshace al mostrarla. Solo se ve cuando alguien la copia y la pega en un sitio donde nadie la traduce de vuelta.

El signo + y el malentendido que arrastra

En la cadena de consulta —lo que va después del interrogante— un signo más significa espacio. Viene del formato con el que los formularios web mandan sus datos, y sigue vivo en la mitad de internet. En el resto de la dirección, un más es un más.

El problema es que la función que usan casi todas las herramientas para decodificar no sabe nada de eso: devuelve el más tal cual. Por eso pegas Juan+P%C3%A9rez y te sale Juan+Pérez en lugar de Juan Pérez. Aquí es una casilla, encendida por defecto porque es lo que quieres casi siempre. Y al revés funciona igual de bien: un más que de verdad es un más se codifica como %2B, así que C++ vuelve intacto aunque la casilla esté encendida.

Codificar dos veces: de dónde sale el %2520

El signo de porcentaje también es especial, así que él mismo tiene que codificarse: su código es %25. Si coges un %20 —que ya es un espacio codificado— y lo vuelves a codificar, el porcentaje se convierte en %25 y te queda %2520.

Al abrirlo, el navegador deshace una sola capa: donde tenía que ver un espacio ve el texto literal «%20», busca un archivo que no existe y devuelve un error. Pasa cuando un enlace atraviesa dos sistemas y cada uno codifica por su cuenta sin comprobar si ya venía codificado. La herramienta lo detecta y lo dice, con la secuencia concreta y lo que era antes. La solución es decodificar hasta que dejen de aparecer secuencias, o codificar el original una sola vez.

Enlaces de campaña, y el detalle que parte los informes

Los cinco campos UTM son la forma estándar de decirle a la analítica de dónde viene cada visita, y los entiende cualquier herramienta sin configurar nada. Tres importan casi siempre —fuente, medio y campaña— y dos son opcionales.

El fallo que más informes estropea no es escribirlos mal: es escribirlos de dos maneras distintas. La analítica distingue mayúsculas, así que «Facebook» y «facebook» son dos fuentes diferentes y la misma campaña sale partida en dos filas que hay que sumar a mano. Lo mismo con los espacios, que aparecen en el informe como %20 o como signos de más. Aquí se avisa de las dos cosas antes de que ocurra, y hay una casilla para normalizarlo todo automáticamente.

Un detalle más: si la dirección de destino ya llevaba campos de campaña, se sustituyen en su sitio en vez de añadirse otra vez. Pegar dos veces el mismo enlace es la forma habitual de acabar con dos campañas para un mismo clic.

El enlace final sale con su código QR descargable, para un cartel o un folleto. Si necesitas algo más elaborado —con logotipo, colores, o de otro tipo de contenido— el sitio tiene un generador de códigos QR completo.

Los nombres de dominio disfrazados

Un dominio puede escribirse con letras de cualquier alfabeto, pero por debajo viaja convertido a una forma que empieza por xn--. Es lo que permite que exista españa.com, y también lo que permite escribir un dominio que parece el de una marca conocida usando una letra de otro alfabeto que se ve idéntica.

Cuando el analizador ve una dirección así, la traduce de vuelta y te enseña qué pone en realidad. Es un dato que casi ninguna herramienta da y que se agradece justo cuando toca decidir si pulsar un enlace o no.

Todas las equivalencias de esta tabla salen del mismo motor que usa la herramienta de arriba, así que no pueden contradecirla. Un guion en la columna significa que ese carácter no se toca en ese modo.