Noopener e noreferrer: cosa significano e come usarli

Se hai trovato gli attributi noopener e noreferrer nell’HTML di WordPress e non capisci come ci siano arrivati, non preoccuparti: non sono errori e non metteranno a rischio la SEO. Però è importante sapere perché sono comparsi in automatico e quando è meglio eliminarli.

Se invece vuoi scoprire cosa significano noopener e noreferrer perché hai intuito che possono risolverti un problema, sei comunque nel posto giusto: tra poco vedremo come funzionano, come usarli e alcune situazioni in cui sono indispensabili. Per esempio sapevi che attraverso un semplice link esterno un altro sito potrebbe riuscire a controllare alcuni aspetti della pagina in cui l’hai inserito?

Se sai come usare noopener noreferrer puoi evitare questo e altri rischi, e allo stesso tempo assicurarti di avere questi attributi nel codice del tuo sito solo quando sono davvero utili.

Cosa significa rel=”noopener noreferrer”

Quando inserisci un link esterno in un contenuto del tuo sito, puoi assegnargli degli attributi HTML che determinano come si comporterà quando un utente ci cliccherà sopra.

In particolare l’attributo rel definisce il tipo di relazione tra la pagina in cui si trova il link (origine) e quella a cui il link punta (destinazione). Rel può assumere diversi valori e tra questi ci sono noopener e noreferrer.

Nel caso di rel=”noopener noreferrer” abbiamo un’istruzione che contiene due attributi con significati diversi.

Noopener significa senza opener e il suo scopo è interrompere la connessione tra la pagina di destinazione e quella di origine.

Noreferrer significa senza referrer, cioè senza l’indicazione dell’URL di provenienza. Serve a nascondere al sito di destinazione il sito da cui arriva l’utente che ha cliccato sul link esterno.

Cosa sono noopener e noreferrer

Noopener e noreferrer vengono spesso chiamati tag. In realtà sono attributi, o per la precisione: 

• <a> è il tag
• rel è l’attributo del tag
• noopener e noreferrer sono i valori dell’attributo rel.

Per aiutarti a capire meglio come funziona abbiamo creato una guida pratica e gratuita all’HTML.

Come funziona rel=”noopener noreferrer”

Noopener e noreferrer sono due attributi diversi e indipendenti ma spesso vengono usati insieme perché sono complementari. Di solito vengono inseriti, manualmente o in automatico, quando l’URL contenuto nel link si apre in una nuova scheda del browser.

Vediamo come funzionano.

Come funziona noopener

Quando aggiungiamo a un link esterno l’attributo target blank, il collegamento si apre in una nuova scheda del browser. Su WordPress possiamo inserirlo sia dal codice che semplicemente selezionando la casella Apri in una nuova scheda nelle impostazioni avanzate del link.

Nell’HTML vedremo una stringa come questa:

<a href=”https://supporthost.com/” target=”_blank”>Home page di SupportHost</a>

Quando un utente fa clic su un link che contiene target=”_blank”, una proprietà JavaScript chiamata window.opener crea una connessione tra la scheda del browser che contiene il link e la nuova scheda aperta. 

Attraverso window.opener una pagina malevola potrebbe compiere delle azioni su quella di origine come:

• reindirizzarla verso siti dannosi, per esempio dediti al phishing o a diffondere malware;
• inserire contenuto indesiderato all’interno della pagina, che può comprendere pubblicità ed esche per truffe;
• mettere in atto il tabnabbing, cioè sostituire silenziosamente la scheda lasciata aperta con una pagina falsa che contiene un finto login, per rubare le credenziali dell’utente.

L’attributo noopener impedisce alla pagina di destinazione del link di connettersi a quella di provenienza e previene attacchi informatici di questi tipi.

Quando la nuova pagina si apre, il browser azzera il valore di window.opener, cioè lo imposta su null, di conseguenza la nuova pagina viene eseguita in un processo separato e non ha alcun modo di collegarsi a quella di origine.

Come funziona noreferrer

Di solito quando un utente arriva su un sito attraverso un link, il server può vedere l’URL della pagina da cui proviene l’utente nell’header HTTP Referer, un campo della richiesta HTTP inviata dal browser.

La funzione dell’attributo noreferrer è dire al browser di non inviare l’header HTTP Referer al server del sito di destinazione quando l’utente clicca sul collegamento esterno. 

Di solito quando un utente arriva su un sito attraverso un link, l’origine della visita viene registrata nei dati di traffico del sito di destinazione, quelli che si vedono, per esempio, nella sezione Referral di Google Analytics. Invece quando al link è associato noreferrer, la fonte del traffico viene nascosta e conteggiata come Direct, cioè traffico diretto. 

Nei browser moderni la presenza di rel=”noreferrer” implica anche l’esecuzione di noopener, perché l’assenza del referrer impedisce alla pagina aperta di rintracciare l’origine e quindi anche di controllarla tramite window.opener.

Differenza tra noopener e nofollow

Molti utenti tendono a confondere noopener e nofollow, che hanno in realtà funzioni completamente slegate. Si tratta infatti di due diversi valori dell’attributo rel, quello che definisce il tipo di relazione che intercorre tra la pagina corrente e la risorsa che stai linkando. 

Come abbiamo visto, noopener impedisce alla pagina di destinazione di collegarsi a quella di origine. 

Nofollow invece indica ai motori di ricerca di non considerare il link come un apprezzamento della pagina di destinazione, o in altre parole, di non trasferirle valore SEO. Fa parte delle buone pratiche della SEO usarlo nei collegamenti esterni che portano a siti non autorevoli o di cui non ci fidiamo al 100%. I casi tipici sono i link sponsorizzati o di affiliazione, o i link a contenuti generati dagli utenti (UGC) – su forum, social network, ecc. – o a informazioni utili su siti poco noti o poco curati.

Quando usare rel=”noopener noreferrer”

Gli attributi noopener noreferrer possono essere usati principalmente per:

• aumentare la sicurezza del sito
• proteggere la privacy degli utenti
• nascondere la provenienza dei link verso siti specifici.

Quando si inseriscono link esterni che aprono un’altra scheda del browser, gli attributi noopener e noreferrer andrebbero usati nella maggior parte dei casi, non solo per proteggere il sito da attacchi informatici ma anche per evitare di esporre informazioni non necessarie legate al sito di provenienza dell’utente, secondo il principio di minimizzazione dei dati sancito dal GDPR. 

In particolare nascondere il sito di origine dell’utente con noreferrer è imprescindibile se questo si occupa di aspetti della vita delle persone considerati intimi oppure di opinioni o caratteristiche psicofisiche che possono dar luogo a discriminazioni o permettere di identificare il visitatore; in altre parole se la visita a quel sito può essere considerata un dato sensibile. 

C’è un terzo motivo meno comune che può giustificare l’uso di rel=”noopener noreferrer”, cioè la volontà di nascondere il proprio sito dai report di traffico degli altri, tipicamente concorrenti. Può capitare di inserire link a siti competitor – per rafforzare l’autorevolezza del proprio contenuto o indicare agli utenti un approfondimento valido – e di non volerlo rendere noto agli amministratori. Ricorda comunque che linkare i competitor può essere una scelta sensata solo se la tua pagina è informativa e il link esterno punta a un sito molto autorevole non in competizione diretta sulla stessa parola chiave. 

Un ulteriore vantaggio di noopener noreferrer è la sua capacità di risparmiare le risorse necessarie a mantenere attivo window.opener e di conseguenza migliorare le prestazioni del browser.

Quando noreferrer va evitato

Mentre ha sempre senso usare noopener per questioni di sicurezza, bisogna valutare caso per caso quando usare anche noreferrer.

Poiché impedisce al sito di destinazione di riconoscere l’origine del traffico nei report, noreferrer non dovrebbe essere usato quando i link vanno verso:

• siti autorevoli che citiamo per aggiungere credibilità al contenuto, in quanto il noreferrer comunica a Google esattamente il contrario;
• siti che citiamo per instaurare una relazione con altri professionisti o per ottenere a nostra volta un backlink o menzioni su siti o social;
• servizi web che utilizzano il referrer per verificare l’origine della richiesta o per applicare regole di accesso – per esempio piattaforme per l’hosting dei video o servizi SaaS o sistemi di pagamento online; 
• siti propri o altre pagine del sito d’origine, quindi mai nei link interni;
• siti partner, perché nasconderebbe dati che servono a valutare il successo della collaborazione;
• siti con cui si hanno accordi di affiliazione.

In quest’ultimo caso, noreferrer può essere da evitare assolutamente oppure no. Vediamo perché.

Noreferrer e link di affiliazione sono compatibili?

Si dice che l’attributo noreferrer sia incompatibile con i link di affiliazione perché impedirebbe al sito di destinazione di vedere da dove arriva l’utente e conteggiare le visite nel calcolo delle commissioni.

In realtà oggi la maggior parte delle piattaforme genera URL che contengono parametri identificativi del sito affiliato rendendo superfluo l’uso del referrer, del tipo “?tag=nomesito-numero”.

Per questo sui link di affiliazione ad Amazon, come su quelli della maggior parte dei network seri, il noreferrer non ha nessun effetto.

L’attributo noreferrer resta problematico in caso di programmi di affiliazione che usano ancora l’header HTTP Referer per identificare i siti affiliati di provenienza degli utenti e attribuire le commissioni. Tuttavia oggi è raro trovare sistemi che basano il calcolo delle commissioni esclusivamente su questo sistema. 

Noopener noreferrer e SEO: che rapporto c’è?

L’attributo noopener noreferrer non danneggia la SEO e non ha alcuna influenza diretta sul posizionamento sui motori di ricerca.

Per iniziare, noopener non ha alcun impatto sul ranking perché riguarda esclusivamente il comportamento del browser.

Quanto a noreferrer, non nasconde informazioni ai motori di ricerca ma solo alla pagina di destinazione del link. Non ha quindi conseguenze sulla SEO, e se lo si pensa è perché lo si confonde con rel=”nofollow”. 

Come aggiungere rel=”noopener noreferrer”

Per aggiungere rel=”noopener noreferrer” ai tuoi link manualmente devi aprire l’HTML del sito e inserire l’attributo all’interno del tag <a> ogni volta che compare target=”_blank”, come in questo esempio:

<a href=”https://supporthost.com/it/” target=”_blank” rel=”noopener”>SupportHost

</a>

In realtà oggi, nella maggior parte dei casi, noopener e noreferrer vengono inseriti in automatico dal CMS o applicati in automatico dai browser.

Ma le cose sono un po’ diverse per i due attributi. In sintesi:

• WordPress aggiunge in automatico noopener 
• Gutenberg aggiunge in automatico sia noopener che noreferrer.

Ma vediamo più in dettaglio.

Aggiunta automatica di noopener noreferrer su WordPress

Nel 2017, con la versione 4.7.4, WordPress ha iniziato ad aggiungere automaticamente rel=”noopener noreferrer” ai link con attributo target blank. Ma da qualche anno l’aggiunta automatica di noreferrer è stata eliminata dal core di WordPress per lasciare agli utenti la possibilità di inserirlo manualmente solo quando è utile. In pratica oggi WordPress a ogni occorrenza di target blank inserisce solo rel=”noopener”. 

In realtà le cose sono più complicate perché Gutenberg, l’editor a blocchi del CMS, continua ad aggiungere sia noopener che noreferrer, che puoi comunque eliminare manualmente come vedremo.

Considera anche che le versioni aggiornate dei browser attuali, come Chrome, Edge, Firefox o Safari, applicano noopener per impostazione predefinita, anche quando non è presente nel codice. 

Inserire l’attributo nell’HTML – in modo automatico o manuale – resta comunque una pratica raccomandata poiché alcuni utenti potrebbero usare browser non aggiornati.

Come eliminare noreferrer da WordPress

Se usi WordPress, per eliminare dall’HTML i noreferrer inutili hai 3 possibilità:

• cancellare manualmente solo quelli che creano problemi;
• disabilitare l’inserimento automatico passando all’editor classico
• non selezionare Apri in un’altra scheda né aggiungere target blank a mano.

Se usi Gutenberg, dovrai cancellare manualmente gli attributi noreferrer dannosi aggiunti in automatico. Dall’editor degli articoli puoi accedere all’HTML facendo clic sui tre puntini nell’angolo superiore destro. Si aprirà un menù in cui puoi scegliere Editor del codice.

Poi li potrai cancellare come dei normali testi.

Se vuoi disabilitare l’aggiunta automatica dei noreferrer sui link con target blank potresti passare dall’editor a blocchi all’editor classico di WordPress, come abbiamo visto nella guida a Gutenberg. 

Infine un modo molto pratico per evitare che né noreferrer né noopener vengano inseriti in automatico è non usare target blank, cioè lasciare che i link si aprano nella stessa scheda in cui si trovano come da impostazione predefinita di WordPress. Questa è anche la modalità che offre una migliore esperienza utente perché è ciò che si aspetta la maggior parte degli utenti.

Come disabilitare rel=”noopener” su WordPress 

Non ci sono motivi validi per disabilitare l’inserimento automatico di rel=”noopener” su WordPress o su altri CMS perché l’attributo contribuisce a rendere il sito più sicuro e non ha effetti collaterali. Inoltre avrebbe poco senso visto che la maggior parte dei browser applica sempre noopener in presenza di target blank.

Tra l’altro eliminare noopener da WordPress non è un’operazione immediata: dovresti per prima cosa passare da Gutenberg all’editor classico e poi inserire nel file functions.php del tuo tema child un filtro che disabilita l’inserimento di rel=”noopener”. 

Come abbiamo già visto per noreferrer, il modo più pratico per evitare che noopener venga aggiunto in automatico su WordPress, o eseguito in automatico dal browser, è mantenere l’impostazione predefinita dei link in WordPress e farli aprire nella pagina in cui si trovano.

Se ti serve un modo per aggiungere in automatico l’attributo rel ai link di WordPress, puoi seguire la nostra guida dedicata.

Conclusioni

In questa guida a noopener e noreferrer abbiamo visto che si tratta di due attributi diversi e in qualche modo complementari, che puoi usare anche separatamente.

Noopener è indispensabile nei collegamenti esterni che si aprono in una nuova scheda del browser, ma se usi WordPress non hai bisogno di fare nulla perché il CMS lo aggiunge in automatico a ogni occorrenza di target blank. Per di più in questi casi i browser aggiornati lo applicano di default.

L’inserimento di noreferrer, invece, va valutato in base alla situazione e proprio per questo non è più una funzione automatica del core di WordPress. Gutenberg però continua a inserire in automatico rel=”noopener noreferrer” in ogni collegamento esterno che si apre in una nuova scheda. 

E tu come hai deciso di comportarti riguardo a questi attributi? Lasci che vengano inseriti in automatico oppure preferisci inserirli a mano solo dove servono? Se ti va, parliamone nei commenti.