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.

Pubblicitร 

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.

Altri contenuti interessanti

Pubblicitร 

Potrebbero interessarti queste guide

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...

Video Background HTML e CSS: consigli, caratteristiche tecniche e best practices

Utilizzare un video come sfondo (noto anche come video background)...

Visualizzare il codice sorgente HTML di una pagina web su iPhone e iPad

Molti sviluppatori si trovano in difficoltร  quando hanno bisogno...

Caratteri speciali negli URL: quali sono e come gestirli

Gli URL (Uniform Resource Locator) sono componenti fondamentali del...

Stilizzare HR (linee orizzontali) in puro CSS

Il tag <hr> (Horizontal Rule) รจ un elemento HTML...

Convertire PSD in HTML/CSS: ecco come fare

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