29 marzo 2020
Noopener, Noreferrer e nofollow, cosa sono e perché li utilizziamo
Scritto daPatrizia Maimone
Nel momento stesso in cui andiamo ad effettuare una ricerca su Google ci troviamo dinnanzi una pagina contenente i risultati di ricerca. Si tratta della cosiddetta SERP che, per i novizi è semplicemente un elenco di risultati posizionati a caso ma che, invece, gli esperti SEO sanno essere il risultato di un'attenta valutazione dei motori di ricerca basato su vari parametri. Google, ad esempio, utilizza più di 200 fattori di ranking per stabilire il posizionamento delle pagine internet all'interno dei risultati di ricerca.
HTML, comunque, dispone di diversi strumenti attraverso i quali far capire ai browser e ai motori di ricerca ogni dato inerente le pagine web. Tra questi, uno è quello di ricorrere a nofollow, noreferrer e noopener all'interno dei tag link. Anche se per molti è un dettaglio sconosciuto, per gli esperti webmaster si tratta strumenti importanti per il posizionamento di un sito generico o di un ecommerce.
Attributo numero uno, il rel="noopener", cos'è e quando lo utilizziamo
Quando parliamo di rel="noopener" ci riferiamo ad una speciale categoria di attributi che vengono aggiunti ad ogni link che viene selezionato per essere aperto in nuove schede del browser. Ad accompagnarlo troviamo sempre un altro attributo denominato rel="noreferrer".
Si tratta di una nuova funzionalità la cui introduzione è abbastanza recente con lo scopo di limitare le vulnerabilità in termini di sicurezza che potrebbero essere utilizzati da siti malevoli.
Di cosa stiamo parlando, in particolare? Saprete di certo che esiste qualche funzionalità Javascript che consente alle nuove schede di poter controllare le proprie finestre di riferimento. Se si collegano a siti web esterni interessati da questi codici dannosi, questi siti internet possono usare la suddetta proprietà Javascript di Window.opener per effettuare una modifica dei siti originali e, quindi, dei vostri siti internet andando a sottrarre ogni tipo di informazione o dato sensibile e diffondendo, contemporaneamente, i codici dannosi.
Aggiungere il rel="noopener" significa riuscire ad impedire alle nuove schede lo sfruttamento di questa funzionalità. Contemporaneamente l'attributo denominato rel="noreferrer" serve per inibire la trasmissione di informazioni alle nuove schede.
Noi di DOWEB siamo sempre vicini agli utenti nella salvaguardia della sicurezza dei propri siti internet. In definitiva, aggiungendo un link e andando a selezionare la voce "Apri nella nuova scheda" gli attributi rel="noopener" e quello rel="noreferrer" vengono aggiunti in automatico in modo da garantire un'assoluta protezione.
Gli hacker, infatti, potrebbero decidere di usare queste funzioni per arrivare ai siti internet attualmente aperti dagli utenti con siti web falsi e, in questo modo, riuscire a sottrarre informazioni importanti come dettagli d'accesso o, peggio, dati inerenti sistemi di pagamento che si sono utilizzati. Al fine di evitare tutto ciò, utilizziamo rel="noopener", il tag che riesce, come abbiamo visto, a bloccare l'utilizzo dell'oggetto JavasCript denominato window.opener. Il suo utilizzo è limitato all'ambito della sicurezza nel momento in cui nei nostri link si trova il tag target="_blank". Questo, infatti, è un chiaro messaggio che indica l'apertura del link stesso all'interno di una nuova scheda. Questo ha delle conseguenze in termini di vulnerabilità con un processo che è noto come Tabnabbing inverso. Tale problematica si supera con l'aggiunta del nopeener mediante cui le pagine aperte all'interno delle nuove schede non riusciranno a controllare le pagine originali (le nostre). Utilizzando questo attributo, inoltre, si possono riuscire ad evitare alcuni problemi a livello di prestazione del sito internet in quanto se le pagine in collegamento hanno in esecuzione molti JavaScript possono andare ad influenzare molto pesantemente la prestazione della pagina a cui si riferiscono.
Contattaci per maggiori informazioni
Attributo numero due, il Rel= "noreferrer", cos'è e quando lo utilizziamo
Il cosiddetto rel="noreferrer" è tra le più recenti tipologie di link aggiunte in HTML5 che si utilizza per tenere nascoste le fonti del traffico che vanno da un sito internet ad un altro. Per definirlo in maniera più tecnica, possiamo affermare che se gli utenti seguono dei collegamenti ipertestuali, si impedirà ai browser l'invio di intestazioni di referrer HTTP.
Nel momento stesso in cui aggiungiamo il rel="noreferrer", ci assicureremo che non venga divulgata alcuna informazione sul referral dato che se non risultano informazioni non ci sarà nessuno che potrà procedere a rintracciarle. Gli effetti di questo attributo sono praticamente uguali a quelli del noopener con la differenza che utilizzandolo, come anticipato più volte, saremo in grado di impedire che le intestazioni referrer arrivino alle nuove pagine.
Quando i visitatori raggiungono il nostro sito internet utilizzando il rel="noreferrer" sui propri siti, i nostri dati di analisi non ci mostreranno chi si è, in effetti, riferito a quel determinato link. Ci verranno mostrati, invece, in corrispondenza del traffico diretto. Questo si è tradotto in un problema di portata importante per tutti coloro che possiedono un sito dal momento che ogni dato sul traffico in entrata viene del tutto incasinato e che risulta praticamente impossibile effettuare un monitoraggio delle modalità in cui un utente si sposta attraverso il nostro sito.
In pratica, questo attributo riesce a rimuovere ogni informazione sui referral interessando i browser. Ne consegue che alle risorse linkate da cui, quindi, provengono i link non verrà comunicata alcuna informazione sul referral. Solitamente questo attributo viene utilizzato per i link che si generano, in maniera del tutto automatica, quando un utente, ad esempio, commenta un post su un forum.
Il rel="noopener noreferrer", cos'è e quando viene utilizzato
Ci sono, poi, alcuni casi in cui i due attributi vengono utilizzati contemporaneamente. In questo caso ci troveremo dinnanzi al cosiddetto rel="noopener noreferrer". Questa combinazione significa che ai siti web non verrà passata alcuna informazione e che, allo stesso tempo, sarà impedito un controllo sulle pagine da cui proviene il traffico. Per capire meglio, prima il link era così
<a href="https://esempio.it" target="_blank">Ancora di testo</a>
Da quando è stata effettuata la modifica, invece, è così
<a href="https://esempio.it" target="_blank" rel="noopener noreferrer">Ancora di testo</a>
Attributo numero tre, il rel="nofollow": cos'è e quando lo utilizziamo
Vi sarà capitato di certo di sentir parlare del cosiddetto rel="nofollow". Di cosa si tratta? Si parla, in questo caso, di un tag da aggiungere nei codici sorgente delle pagine internet con lo scopo di chiedere ai motori di ricerca di non seguire un determinato link a cui si sta facendo riferimento. Il vantaggio principale che ci deriva dall'utilizzarlo risiede nel migliorato controllo delle attività di spam. Non sempre, infatti, ci troviamo nelle condizioni di poter controllare, uno per uno, i commenti che, ad esempio, vengono inseriti all'interno del nostro sito o blog. Questo mancato ed involontario controllo offre, però, un invito ai malintenzionati a poter spammare sul nostro portale. Invito che però, utilizzando il rel="nofollow" viene bloccato. Nessuna penalizzazione, dunque, potrà arrivarci da Google per questa motivazione.
Il motore di ricerca, infatti, con l'utilizzo di questo attributo capirà immediatamente che non approviamo affatto le pagine a cui ci stiamo collegando e che, se lo facciamo, abbiamo altre finalità (che potrebbero, ad esempio, essere quelle prettamente commerciali).
Se, quindi, noi siamo il sito A e puntiamo verso un sito B, utilizzando questo attributo impediremo che il page rank o il link juice del nostro sito si disperda verso l'altro sito che non riteniamo assolutamente valido a questo scopo.
Questa tipologia di attributo rel si può usare nelle sezioni tag <meta> con lo scopo di evitare che i collegamenti sulle pagine siano seguiti o, in alternativa, è possibile scegliere di inserirlo su ciascun tag <a> in maniera separata dagli altri. Nel primo caso l'attributo sarà
<meta name = "robots" content = "nofollow" />
mentre nel secondo avremo
<a href="signin.php" rel="nofollow"> accedi </a>.
Le influenze di noopener, noreferrer e nofollow in ottica SEO
A questo punto, una domanda è più che lecita: utilizzare il noopener, il noreferrer e il nofollow può avere delle conseguenze anche sull'ottimizzazione Seo del nostro sito internet? A questa domanda esiste una risposta che, però, non è univoca per i tre attributi. Partiamo, quindi, con il definire le conseguenze di noopener e noreferrer per passare, successivamente, al nofollow.
I primi due, infatti, non hanno impatti diretti in ottica Seo. Dal momento che i due attributi in questione non interessano i motori di ricerca ma vanno ad impattare solo sulla sicurezza dei collegamenti (e lo abbiamo visto abbondantemente finora), in maniera inevitabile la stessa cosa vale anche per il Seo. In particolare, il rel="noopener" indica ai browser che è indispensabile andare a stoppare immediatamente l'utilizzo di window.opener (completamente estraneo ai motori di ricerca). Il tag rel="noreferrer" serve ad impedire ai link di sapere da dove arriva. Il lavoro viene dunque fatto sui browser e non ha alcun impatto sui motori di ricerca. Utilizzare il noreferrer può semplicemente creare alcuni problemini per tracciare il traffico in entrata sui siti internet ma non avrà alcuna influenza sulle capacità dei motori di ricerca di scansionare, indicizzare e posizionare le pagine web.
Un po' diverso il discorso per quanto riguarda, invece, l'attributo rel="nofollow". In questo caso le conseguenze in ottica Seo possono avere anche una valenza importante dal momento che va ad influire sulle capacità di Big G di scansionare ed indicizzare i collegamenti. Dato l'impatto che, come abbiamo specificato, è considerevole in ambito Seo, il consiglio principale è quello di impiegare questo attributo per i collegamenti ad un contenuto che non riteniamo essere attendibile, per un eventuale collegamento a pagamento o per quello ad un'eventuale pagina a cui i crawler non hanno accesso. L'utilizzo, quindi, deve avvenire sempre in maniera molto giudiziosa.
Concludendo..
Speriamo che questo articolo vi sia stato utile per capire più a fondo le differenze e le funzioni di noopener, noreferrer e nofollow. In linea di massima nessuno dovrà occuparsi del noreferrer fino al momento in cui non si vorranno mantenere segrete alcune informazioni inerenti al proprio sito internet. D'altro canto, il nofollow potrà rivelarsi utile in svariate occasioni a tutti i proprietari di un sito web dal momento che riuscirà a limitare il trasferimento di PageRank su determinati link a pagamento.
Per maggiori informazioni non esitate a contattarci
HTML, comunque, dispone di diversi strumenti attraverso i quali far capire ai browser e ai motori di ricerca ogni dato inerente le pagine web. Tra questi, uno è quello di ricorrere a nofollow, noreferrer e noopener all'interno dei tag link. Anche se per molti è un dettaglio sconosciuto, per gli esperti webmaster si tratta strumenti importanti per il posizionamento di un sito generico o di un ecommerce.
Attributo numero uno, il rel="noopener", cos'è e quando lo utilizziamo
Quando parliamo di rel="noopener" ci riferiamo ad una speciale categoria di attributi che vengono aggiunti ad ogni link che viene selezionato per essere aperto in nuove schede del browser. Ad accompagnarlo troviamo sempre un altro attributo denominato rel="noreferrer".
Si tratta di una nuova funzionalità la cui introduzione è abbastanza recente con lo scopo di limitare le vulnerabilità in termini di sicurezza che potrebbero essere utilizzati da siti malevoli.
Di cosa stiamo parlando, in particolare? Saprete di certo che esiste qualche funzionalità Javascript che consente alle nuove schede di poter controllare le proprie finestre di riferimento. Se si collegano a siti web esterni interessati da questi codici dannosi, questi siti internet possono usare la suddetta proprietà Javascript di Window.opener per effettuare una modifica dei siti originali e, quindi, dei vostri siti internet andando a sottrarre ogni tipo di informazione o dato sensibile e diffondendo, contemporaneamente, i codici dannosi.
Aggiungere il rel="noopener" significa riuscire ad impedire alle nuove schede lo sfruttamento di questa funzionalità. Contemporaneamente l'attributo denominato rel="noreferrer" serve per inibire la trasmissione di informazioni alle nuove schede.
Noi di DOWEB siamo sempre vicini agli utenti nella salvaguardia della sicurezza dei propri siti internet. In definitiva, aggiungendo un link e andando a selezionare la voce "Apri nella nuova scheda" gli attributi rel="noopener" e quello rel="noreferrer" vengono aggiunti in automatico in modo da garantire un'assoluta protezione.
Gli hacker, infatti, potrebbero decidere di usare queste funzioni per arrivare ai siti internet attualmente aperti dagli utenti con siti web falsi e, in questo modo, riuscire a sottrarre informazioni importanti come dettagli d'accesso o, peggio, dati inerenti sistemi di pagamento che si sono utilizzati. Al fine di evitare tutto ciò, utilizziamo rel="noopener", il tag che riesce, come abbiamo visto, a bloccare l'utilizzo dell'oggetto JavasCript denominato window.opener. Il suo utilizzo è limitato all'ambito della sicurezza nel momento in cui nei nostri link si trova il tag target="_blank". Questo, infatti, è un chiaro messaggio che indica l'apertura del link stesso all'interno di una nuova scheda. Questo ha delle conseguenze in termini di vulnerabilità con un processo che è noto come Tabnabbing inverso. Tale problematica si supera con l'aggiunta del nopeener mediante cui le pagine aperte all'interno delle nuove schede non riusciranno a controllare le pagine originali (le nostre). Utilizzando questo attributo, inoltre, si possono riuscire ad evitare alcuni problemi a livello di prestazione del sito internet in quanto se le pagine in collegamento hanno in esecuzione molti JavaScript possono andare ad influenzare molto pesantemente la prestazione della pagina a cui si riferiscono.
Contattaci per maggiori informazioni
Attributo numero due, il Rel= "noreferrer", cos'è e quando lo utilizziamo
Il cosiddetto rel="noreferrer" è tra le più recenti tipologie di link aggiunte in HTML5 che si utilizza per tenere nascoste le fonti del traffico che vanno da un sito internet ad un altro. Per definirlo in maniera più tecnica, possiamo affermare che se gli utenti seguono dei collegamenti ipertestuali, si impedirà ai browser l'invio di intestazioni di referrer HTTP.
Nel momento stesso in cui aggiungiamo il rel="noreferrer", ci assicureremo che non venga divulgata alcuna informazione sul referral dato che se non risultano informazioni non ci sarà nessuno che potrà procedere a rintracciarle. Gli effetti di questo attributo sono praticamente uguali a quelli del noopener con la differenza che utilizzandolo, come anticipato più volte, saremo in grado di impedire che le intestazioni referrer arrivino alle nuove pagine.
Quando i visitatori raggiungono il nostro sito internet utilizzando il rel="noreferrer" sui propri siti, i nostri dati di analisi non ci mostreranno chi si è, in effetti, riferito a quel determinato link. Ci verranno mostrati, invece, in corrispondenza del traffico diretto. Questo si è tradotto in un problema di portata importante per tutti coloro che possiedono un sito dal momento che ogni dato sul traffico in entrata viene del tutto incasinato e che risulta praticamente impossibile effettuare un monitoraggio delle modalità in cui un utente si sposta attraverso il nostro sito.
In pratica, questo attributo riesce a rimuovere ogni informazione sui referral interessando i browser. Ne consegue che alle risorse linkate da cui, quindi, provengono i link non verrà comunicata alcuna informazione sul referral. Solitamente questo attributo viene utilizzato per i link che si generano, in maniera del tutto automatica, quando un utente, ad esempio, commenta un post su un forum.
Il rel="noopener noreferrer", cos'è e quando viene utilizzato
Ci sono, poi, alcuni casi in cui i due attributi vengono utilizzati contemporaneamente. In questo caso ci troveremo dinnanzi al cosiddetto rel="noopener noreferrer". Questa combinazione significa che ai siti web non verrà passata alcuna informazione e che, allo stesso tempo, sarà impedito un controllo sulle pagine da cui proviene il traffico. Per capire meglio, prima il link era così
<a href="https://esempio.it" target="_blank">Ancora di testo</a>
Da quando è stata effettuata la modifica, invece, è così
<a href="https://esempio.it" target="_blank" rel="noopener noreferrer">Ancora di testo</a>
Attributo numero tre, il rel="nofollow": cos'è e quando lo utilizziamo
Vi sarà capitato di certo di sentir parlare del cosiddetto rel="nofollow". Di cosa si tratta? Si parla, in questo caso, di un tag da aggiungere nei codici sorgente delle pagine internet con lo scopo di chiedere ai motori di ricerca di non seguire un determinato link a cui si sta facendo riferimento. Il vantaggio principale che ci deriva dall'utilizzarlo risiede nel migliorato controllo delle attività di spam. Non sempre, infatti, ci troviamo nelle condizioni di poter controllare, uno per uno, i commenti che, ad esempio, vengono inseriti all'interno del nostro sito o blog. Questo mancato ed involontario controllo offre, però, un invito ai malintenzionati a poter spammare sul nostro portale. Invito che però, utilizzando il rel="nofollow" viene bloccato. Nessuna penalizzazione, dunque, potrà arrivarci da Google per questa motivazione.
Il motore di ricerca, infatti, con l'utilizzo di questo attributo capirà immediatamente che non approviamo affatto le pagine a cui ci stiamo collegando e che, se lo facciamo, abbiamo altre finalità (che potrebbero, ad esempio, essere quelle prettamente commerciali).
Se, quindi, noi siamo il sito A e puntiamo verso un sito B, utilizzando questo attributo impediremo che il page rank o il link juice del nostro sito si disperda verso l'altro sito che non riteniamo assolutamente valido a questo scopo.
Questa tipologia di attributo rel si può usare nelle sezioni tag <meta> con lo scopo di evitare che i collegamenti sulle pagine siano seguiti o, in alternativa, è possibile scegliere di inserirlo su ciascun tag <a> in maniera separata dagli altri. Nel primo caso l'attributo sarà
<meta name = "robots" content = "nofollow" />
mentre nel secondo avremo
<a href="signin.php" rel="nofollow"> accedi </a>.
Le influenze di noopener, noreferrer e nofollow in ottica SEO
A questo punto, una domanda è più che lecita: utilizzare il noopener, il noreferrer e il nofollow può avere delle conseguenze anche sull'ottimizzazione Seo del nostro sito internet? A questa domanda esiste una risposta che, però, non è univoca per i tre attributi. Partiamo, quindi, con il definire le conseguenze di noopener e noreferrer per passare, successivamente, al nofollow.
I primi due, infatti, non hanno impatti diretti in ottica Seo. Dal momento che i due attributi in questione non interessano i motori di ricerca ma vanno ad impattare solo sulla sicurezza dei collegamenti (e lo abbiamo visto abbondantemente finora), in maniera inevitabile la stessa cosa vale anche per il Seo. In particolare, il rel="noopener" indica ai browser che è indispensabile andare a stoppare immediatamente l'utilizzo di window.opener (completamente estraneo ai motori di ricerca). Il tag rel="noreferrer" serve ad impedire ai link di sapere da dove arriva. Il lavoro viene dunque fatto sui browser e non ha alcun impatto sui motori di ricerca. Utilizzare il noreferrer può semplicemente creare alcuni problemini per tracciare il traffico in entrata sui siti internet ma non avrà alcuna influenza sulle capacità dei motori di ricerca di scansionare, indicizzare e posizionare le pagine web.
Un po' diverso il discorso per quanto riguarda, invece, l'attributo rel="nofollow". In questo caso le conseguenze in ottica Seo possono avere anche una valenza importante dal momento che va ad influire sulle capacità di Big G di scansionare ed indicizzare i collegamenti. Dato l'impatto che, come abbiamo specificato, è considerevole in ambito Seo, il consiglio principale è quello di impiegare questo attributo per i collegamenti ad un contenuto che non riteniamo essere attendibile, per un eventuale collegamento a pagamento o per quello ad un'eventuale pagina a cui i crawler non hanno accesso. L'utilizzo, quindi, deve avvenire sempre in maniera molto giudiziosa.
Concludendo..
Speriamo che questo articolo vi sia stato utile per capire più a fondo le differenze e le funzioni di noopener, noreferrer e nofollow. In linea di massima nessuno dovrà occuparsi del noreferrer fino al momento in cui non si vorranno mantenere segrete alcune informazioni inerenti al proprio sito internet. D'altro canto, il nofollow potrà rivelarsi utile in svariate occasioni a tutti i proprietari di un sito web dal momento che riuscirà a limitare il trasferimento di PageRank su determinati link a pagamento.
Per maggiori informazioni non esitate a contattarci
