back to top

Attributo "rel" per i link HTML

In HTML l’attributo rel può essere utilizzato esclusivamente in associazione all’attributo href e nella definizione dei link. Esso ha il compito di specificare una relazione tra il documento corrente, quello in cui è presente il link, e il documento linkato il cui URL viene passato come argomento ad href. Tra i vantaggi del suo utilizzo vi è anche la possibilità di comunicare ai motori di ricerca delle informazioni utili per la SEO (Search Engine Optimization).

Supportato da tutti i browser più utilizzati per la navigazione su Internet, rel accetta diversi valori predefiniti, ognuno dei quali dotato di un significato preciso. Scopriamo quali.

dofollow e nofollow

Gli argomenti dofollow e nofollow dell’attributo rel hanno il compito di trasferire o meno valore alla risorsa linkata, sono quindi dei parametri di endorsing o unendorsing per il documento introdotto dall’attributo href. Relativamente alla SEO dofollow viene utilizzato dai motori di ricerca per specificare che il crawler deve seguire un determinato collegamento, al contrario nofollow suggerisce a piattaforme come Google di non attribuire rilevanza ad un link.

La differenza tra dofollow e nofollow non è soltanto semantica ma anche sintattica, infatti dofollow non è un tag HTML e non deve essere esplicitato all’interno del codice di makup. Si tratti di un valore predefinito che viene attribuito di default a tutti i contenuti linkati e contribuisce a fornire una struttura di backlink (o inbound link) utili o dannosi per il posizionamento a seconda della qualità dei siti Web in cui sono presenti.

Diverso il discorso per quanto riguarda nofollow la cui esistenza ha delle ragioni "storiche" dovute all’evoluzione che negli anni hanno registrato gli algoritmi dei motori di ricerca e, in particolare, quello di Mountain View. Chi opera da anni in ambito SEO, o più semplicemente nella produzione di siti Web, ricorderà sicuramente l’importanza che agli inizi degli anni 2000 si attribuiva al cosiddetto PageRank, quest’ultimo veniva interpretato come un indice di popolarità e nello stesso tempo di autorevolezza e gestito secondo un criterio per molti versi erroneo: più backlink avrebbe ricevuto una pagina migliore sarebbe stato il suo posizionamento.

In realtà il PageRank era ed è soltanto uno dei tanti parametri utilizzati da Google per stabilire quale posizione deve essere occupata da uno specifico contenuto nella SERP (Search Engine Results Page), ma essendo almeno apparentemente quello più immediato da manipolare portò ad attività di link building spesso artificiose che Big G decise di arginare.

Il valore nofollow è stato quindi introdotto per contrastare lo spam da backlinking, i link a pagamento così come i collegamenti inseriti massivamente nei commenti dei blog, dei social network o dei forum di discussione sono stati penalizzati così come qualsiasi altra attività tesa ad alterare i risultati delle query.

A livello sintattico, per effettuare l’unendorsing di un link tramite nofollow è necessario esplicitare questo valore nel modo seguente:

<a href="https://sito-web.com/pagina.html" rel="nofollow">Visita questo link</a>

In linea generale è consigliabile utilizzare sempre nofollow quando non si ha la certezza che la risorsa linkata sia affidabile, quando l’argomento della pagina di destinazione non è sufficientemente attinente con gli argomenti trattati dal sito Web che la linka, nel caso di collegamenti introdotti per ragioni commerciali e in tutte quelle situazioni in cui si ritiene che un link non sia utile per i crawler dei motori di ricerca.

Per evitare un utilizzo indiscriminato del nofollow Google ha poi introdotto due nuovi valori non ufficiali associabili a rel:

  • sponsored: con cui indicare i link che hanno finalità puramente commerciali;
  • UGC (User Generated Content): utilizzabile per contenuti che sono stati creati da persone o team esterni ad un sito Web, come per esempio i commenti di un Blog.

noopener

Prima di parlare del valore noopener è necessario fare riferimento a una pratica malevola denominata reverse tabnabbing, per capirne la pericolosità bisogna però fare riferimento ad un altro attributo HTML per i link: target. Quest’ultimo ha lo scopo di specificare in che modo deve essere aperta la risorsa linkata e di default è impostato su _self, determinando la visualizzazione della pagina di destinazione nella scheda corrente del browser.

Quando invece si vuole aprire il contenuto linkato in una nuova scheda deve essere utilizzato il valore _blank:

<a href="https://sito-web.com/pagina.html" target="_blank">Visita questo link</a>

Tale modalità espone però al rischio di reverse tabnabbing attraverso cui una scheda in background potrebbe essere sostituita con un’altra dove sono presenti contenuti dannosi.

Questo accade perché una pagina linkata acquisisce un accesso parziale a quella in cui è presente il link ad essa tramite la proprietà opener dell’interfaccia window che restituisce una referenza della scheda che ha determinato l’apertura di un’altra tab. Una scheda in background può essere quindi modificata attraverso l’oggetto location (window.opener.location) per finalità di phishing, sfruttando il fatto che gli utenti ritengono generalmente affidabili le tab aperte in precedenza.

noopener rappresenta una soluzione a questo problema e prevede una sintassi come la seguente:

<a href="https://sito-web.com/pagina.html" target="_blank" rel="noopener">Visita questo link</a>

A differenza di quanto detto per nofollow, noopener non sembrerebbe avere alcuna influenza sulla SEO, il pericolo del reverse tabnabbing è però concreto e sempre presente, tanto che gli sviluppatori di un CMS estremamente popolare come WordPress hanno deciso di applicare automaticamente il valore noopener a tutti i link in cui è stato utilizzato il target="_blank".

noreferrer

Il valore noreferrer è strettamente collegato al concetto di referral, termine con il quale si indica il sito Web da cui proviene una visita. Esso permette di stabilire la provenienza di un utente e quindi la pagina Web nella quale è presente il link che ha operato da tramite per l’accesso.

Le applicazioni per l’analisi del traffico presentano tra le loro statistiche anche le informazioni relative ai referral, funzionalità molto utile non soltanto per definire con precisione gli interessi e le abitudini della propria utenza ma anche per capire quanto eventuali campagne di partnership con altri siti Internet o network stiano sortendo l’effetto desiderato dal punto di vista dell’incoming.

noreffer ha invece lo scopo di rimuovere i dati relativi ai referral. La sua sintassi è simile alla seguente:

<a href="https://sito-web.com/pagina.html" rel="noreffer">Visita questo link</a>

e il suo compito è in sostanza quello di convertire una visita da refferal in una visita diretta, nascondendone la provenienza ed eliminando le intestazioni referrer HTTP che potrebbero rivelarla.

In alcuni casi noreferrer e noopener vengono utilizzati insieme tramite una sintassi che prevede di passare un doppio argomento all’attributo rel:

<a href="https://sito-web.com/pagina.html" rel="noopener noreffer">Visita questo link</a>

Tra i CMS che hanno deciso di adottare automaticamente tale modalità vi è per esempio WordPress che, a partire dalla release 4.7.4, completa tutti i link in cui è presente un attributo target con valore _blank in questo modo:

<a href="https://sito-web.com/pagina.html" target="_blank" rel="noopener noreffer">Visita questo link</a>

E’ comunque consigliabile un impiego ragionato di noreffer, questo perché da una parte si tratterebbe di un valore almeno apparentemente ininfluente per la SEO mentre dall’altra comunicare ad altri siti il proprio ruolo di referral potrebbe fornire indubbi vantaggi dal punto di vista delle partnership con altre piattaforme.

Altri valori dell’attributo rel

I valori descritti in precedenza sono i più rilevanti dal punto di vista della gestione quotidiana di un sito Web, ve ne sono però anche altri che meritano almeno una breve citazione:

  • alternate: fornisce un link alla rappresentazione alternativa di un documento, ad esempio una versione stampabile dello stesso;
  • author: mette a disposizione un link all’autore di un documento;
  • bookmark: indica un URL permanente per i Preferiti del browser;
  • external: indica che la risorsa linkata è esterna rispetto al sito Web della pagina corrente;
  • help: viene associato a collegamenti per la documentazione;
  • license: fornisce un link ai termini di licenza per il documento corrente;
  • next: mette a disposizione un link verso il documento successivo di una sequenza;
  • prev: mette a disposizione un link verso il documento precedente;
  • search: linka uno strumento per effettuare ricerche sul documento;
  • tag: introduce una keyword per un documento.

Alcuni di questi valori vengono utilizzati soltanto di rado, ma è buona norma tenerne conto anche perché quando impiegati con attenzione forniscono utili informazioni addizionali riguardo alle proprie pagine Web o ai contenuti linkati.

Pubblicitร 
Claudio Garau
Claudio Garau
Web developer, programmatore, Database Administrator, Linux Admin, docente e copywriter specializzato in contenuti sulle tecnologie orientate a Web, mobile, Cybersecurity e Digital Marketing per sviluppatori, PA e imprese.

Leggi anche...

Convertire PSD in HTML/CSS: ecco come fare

Avete deciso di creare un sito web ma non...

Humans.txt – cos’è, a cosa serve e come funziona

Humans.txt è un formato standard concepito per corredare un...

Un form di ricerca in HTML

Un modulo di ricerca è una delle funzionalità più...

Differenza tra sito statico e sito dinamico, vantaggi e svantaggi

Un sito statico è una collezione di pagine web...

Elementi a comparsa in puro HTML (no Javascript)

In molti siti web sono implementate tecniche di web-design...

L’attributo aria-hidden: cos’è e quando usarlo

In un precedente articolo abbiamo descritto le specifiche relative...
Pubblicitร