URL encoding: cosa significa %20 e come codificare un link

Copi l’indirizzo di una pagina dalla barra del browser e lo incolli in una chat. Invece di esempio.it/caffè latte compare esempio.it/caff%C3%A8%20latte. Sembra un errore, ma è esattamente come deve essere.

Quei codici con il simbolo di percentuale sono l’URL encoding: il modo in cui gli indirizzi web scrivono i caratteri che non possono contenere, come gli spazi e le lettere accentate. Se costruisci link, moduli o pagine, prima o poi ti servirà.

In questa guida ti spiego cosa significano %20 e %C3%A8, quali caratteri vanno codificati e come farlo bene, con una tabella di conversione e un codificatore da provare subito.

Cos’è l’URL encoding

Un indirizzo web può contenere solo un piccolo insieme di caratteri: lettere inglesi, cifre e pochi simboli. Tutto il resto va scritto in un altro modo: il simbolo % seguito da due cifre esadecimali, che rappresentano un byte.

Lo spazio, per esempio, è il byte 20 in esadecimale, quindi diventa %20. Per questo l’URL encoding si chiama anche percent-encoding, codifica percentuale.

Perché alcuni caratteri vanno codificati

Alcuni simboli negli indirizzi hanno un compito preciso. Il ? apre i parametri, la & li separa, l’= divide il nome dal valore, il # indica un punto della pagina e la / separa le cartelle del percorso.

Immagina di cercare “caffè & cornetto” in un sito. Se l’indirizzo fosse /cerca?q=caffè & cornetto, il server leggerebbe la & come l’inizio di un nuovo parametro e cercherebbe solo “caffè”. Codificata come %26, invece, la & torna a essere un semplice carattere del testo.

Le regole le fissa lo standard RFC 3986, e dividono i caratteri in tre gruppi:

• Mai da codificare: le lettere da A a Z, maiuscole e minuscole, le cifre da 0 a 9 e i quattro simboli - . _ ~.
• Riservati: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Si codificano quando li usi come testo, per esempio dentro il valore di un parametro.
• Tutti gli altri, compresi lo spazio, le virgolette e le lettere accentate: si codificano sempre.

Cosa significa %C3%A8: le lettere accentate

Lo spazio occupa un solo byte, quindi un solo codice. Le lettere accentate no: prima vengono trasformate nei loro byte UTF-8, e poi ogni byte diventa un codice con la percentuale.

La “è” in UTF-8 è fatta di due byte, C3 e A8, come hai visto nella guida su ASCII, Unicode e UTF-8. Nell’indirizzo diventa quindi %C3%A8, e “caffè” diventa caff%C3%A8.

Il browser fa il percorso al contrario per comodità: nella barra degli indirizzi spesso ti mostra “caffè”, ma quando copi il link, o quando lo invia al server, usa la versione codificata.

Tabella di conversione

Ecco i caratteri che codificherai più spesso. La lettera maiuscola o minuscola delle cifre esadecimali non cambia niente, ma lo standard consiglia le maiuscole.

%20 o +: come si scrive lo spazio

Ti capiterà di vedere lo spazio scritto in due modi. Non è un errore: sono due regole diverse.

• %20 è la codifica standard degli indirizzi, e vale ovunque, anche nel percorso.
• + si usa solo nei parametri inviati da un modulo, come la casella di ricerca di un sito. È una convenzione dei moduli HTML.

Come codificare un link correttamente

Non serve codificare a mano: ogni linguaggio ha le sue funzioni. L’importante è scegliere quella giusta, e codificare i singoli valori, non l’indirizzo intero già costruito.

In JavaScript

const valore = "caffè & cornetto";

// per un singolo valore: codifica anche & = ? / #
console.log(encodeURIComponent(valore));
// caff%C3%A8%20%26%20cornetto

// il modo più comodo: lascia fare all'oggetto URL
const indirizzo = new URL("https://www.esempio.it/cerca");
indirizzo.searchParams.set("q", valore);
console.log(indirizzo.href);
// https://www.esempio.it/cerca?q=caff%C3%A8+%26+cornetto

Esiste anche encodeURI, che codifica un indirizzo intero ma lascia stare i simboli come & e ?. Proprio per questo non va usata sui singoli valori: una & nel testo resterebbe una &, e romperebbe i parametri.

In Python

from urllib.parse import quote, urlencode

print(quote("caffè latte"))
# caff%C3%A8%20latte

print(urlencode({"q": "caffè & cornetto", "pagina": 2}))
# q=caff%C3%A8+%26+cornetto&pagina=2

In PHP

<?php
echo rawurlencode('caffè & cornetto');  // caff%C3%A8%20%26%20cornetto
echo urlencode('caffè & cornetto');     // caff%C3%A8+%26+cornetto

In PHP rawurlencode segue lo standard degli indirizzi e scrive lo spazio come %20, mentre urlencode usa la regola dei moduli e lo scrive come +.

Prova il codificatore di URL

Scrivi un valore per vedere come diventa in un link, oppure incolla un indirizzo pieno di codici con la percentuale per leggerlo in chiaro. Puoi scegliere anche la regola dei moduli, con il + al posto degli spazi.

Gli errori più comuni

• Codificare due volte. Se codifichi un testo già codificato, il % diventa %25: uno spazio passa da %20 a %2520. Se vedi %25 in un link, quasi sempre è questo il motivo.
• Usare encodeURI sui valori. Lascia intatti &, = e ?, quindi un valore che li contiene spezza l’indirizzo. Per i valori usa encodeURIComponent.
• Dimenticare di codificare la &. “Rock & Roll” in un parametro, senza codifica, diventa due parametri.
• Decodificare con la regola sbagliata. Se un valore arriva da un modulo, il + è uno spazio; se arriva dal percorso, è un più. Usa la funzione che corrisponde a come è stato codificato.

Domande frequenti

Cosa significa %20 in un link?

È lo spazio. Gli indirizzi web non possono contenere spazi, quindi ogni spazio viene scritto come %20, il suo codice in esadecimale preceduto dalla percentuale.

Cosa significa %C3%A8?

È la lettera “è”. In UTF-8 la “è” occupa due byte, C3 e A8, e negli indirizzi ogni byte viene scritto con la percentuale davanti.

Perché nel browser vedo le lettere accentate, ma quando copio il link no?

Per comodità molti browser mostrano l’indirizzo decodificato, più facile da leggere. Ma il vero indirizzo, quello che viene inviato e copiato, è sempre quello codificato.

Un indirizzo può contenere lettere accentate?

Nel percorso e nei parametri sì, purché vengano codificate. Anche i domini possono avere lettere accentate, ma usano un sistema diverso, chiamato Punycode, che li trasforma in nomi che iniziano con xn--.

Che differenza c’è tra encodeURI ed encodeURIComponent?

encodeURI serve per un indirizzo intero e lascia stare i simboli che ne formano la struttura. encodeURIComponent serve per un singolo valore e codifica anche &, =, ?, / e #.

Cosa vuol dire %2520?

È uno spazio codificato due volte. Il primo passaggio ha trasformato lo spazio in %20, il secondo ha codificato anche il %, che è diventato %25. Va codificato una volta sola.

Fonti e approfondimenti

• RFC 3986: caratteri riservati e non riservati
• WHATWG: lo standard URL
• MDN Web Docs: encodeURIComponent
• MDN Web Docs: URLSearchParams
• Documentazione di Python: urllib.parse
• Manuale di PHP: rawurlencode

Con questo articolo si chiude la serie “Simboli e caratteri sul web”. Sei partito da un file SVG e sei arrivato ai byte di un indirizzo: icone, entità HTML, sequenze di escape, Unicode e codifica degli URL sono tutti modi diversi di risolvere lo stesso problema, cioè dire al computer quale carattere vuoi davvero. Se ti va di ripassare dall’inizio, la serie riparte dalla guida ai file SVG.