Le cosiddette "link relations" sono quei valori che inseriamo nell'attributo "rel" quando creiamo un link (sia un collegamento ipertestuale che ad esempio il richiamo ad uno script JavaScript) e che servono a specificare che tipo di "rapporto" c'è fra la pagina corrente e la risorse linkata.

Anche se non ci siamo mai soffermati a pensarci, infatti, quando scriviamo

<link rel="stylesheet" href="style-original.css" type="text/css" />

oppure

<link rel="alternate" type="application/atom+xml" title="Il feed Atom del mio blog" href="/feed/" />

o ancora

<link rel="shortcut icon" href="/favicon.ico">

stiamo indicando delle "relazioni" tra la pagina corrente e la URL linkata (nello specifico "stylesheet" per indicare che si tratta di un foglio di style, "alternate" per indicare che il link è verso una versione "alternativa" dell'attuale contenuto e infine "shortcut icon" per la favicon)

Le novità di HTML5

Tutto questo accadeva e accade già in molte pagine dal momento che le relazioni indicate sono già previste da HTML4.

HTML5, come ormai ci ha abituato, porta questo concetto di "relazioni fra oggetti web" ad un nuovo livello di potenza, aggiungendo una serie di relazioni estremamente utili per aiutare motori di ricerca, spider e utenti a capire la struttura e i collegamenti fra le varie parti di un sito e della Rete in generale.

Ecco la lista completa delle relazioni attualmente accettate nella proposta di standard HTML5 e che dunque possono essere già utilizzate nelle nostre pagine:

  • alternate: Rappresentazione alternativa del documento attuale
  • archives: Link agli archivi del nostro sito
  • author: Link all'autore del sito
  • bookmark: Permalink
  • external: Link ad una risorsa "esterna" al nostro sito
  • first: Indica che il documento attuale è parte di una serie di cui rappresenta il primo "capitolo"
  • help: Link ad una pagina di "help"
  • icon: Icona che rappresenta il documento corrent (favicon)
  • index: Link all'indice di una serie di documenti
  • last: Indica che il documento attuale è parte di una serie di cui rappresenta l'ultimo "capitolo"
  • license: Link al documento che specifica la licenza di utilizzo dei contenuti del documento corrent
  • next: Link verso il "prossimo" documento nella serie
  • nofollow: Indica che il documento linkato non deve ricevere "link juice" dalla pagina corrente
  • noreferrer: Chiede al browser di non inviare il referer (sic) quando si clicca sul link
  • pingback: Indirizzo del server a cui inviare i pingback
  • prefetch: Richiede che il link indicato debba essere pre-caricato
  • prev: Link verso il "precedente" documento nella serie
  • search: Link verso una pagina di ricerca
  • stylesheet: Link verso lo stylesheet
  • sidebar: Il documento linkato dovrebbe essere mostrato in una barra laterale (se presente nel browser)
  • tag: Specifica un tag che si applica al documento corrent
  • up: Il documento "superiore" (gerarchicamente) a quello attuale

Esempi

Se vogliamo indicare i tag di un post del nostro blog possiamo specificare qualcosa del genere nella lista dei tag:

<a href="/tag/tag1" rel="tag">tag1</a>, <a href="/tag/tag2" rel="tag">tag2</a>, ...

Stesso discorso per l'autore del nostro articolo:

scritto da <a href="/autori/pietro" rel="author">Pietro Negri</a>

o il link agli archivi:

<a href="/archivio" rel="archives">archivio</a>

Alla stessa maniera useremo prev, next, first o last

<a href="/primo-articolo" rel="first">primo articolo</a><br />    <a href="/prossimo-articolo" rel="next">prossimo articolo</a><br />    <a href="/ultimo-articolo" rel="last">ultimo articolo</a>

Impatto sul SEO e il posizionamento

Se da un lato quando si parla di web semantico il concetto di "SEO" ci sembra un po' limitativo (è ora di iniziare a pensare "al di fuori" dei vecchi motori di ricerca), sicuramente avere una semantica delle relazioni fra i link delle nostre pagine aiuta anche nel posizionamento sui search engines tradizionali.

In che modo? Vediamo alcuni esempi:

  • external: indicare come "esterno" un link vuol dire assegnarli un peso diverso (probabilmente inferiore) rispetto a link che puntano verso pagine del nostro sito
  • suggerire allo spider la struttura delle relazioni fra i nostri articoli con prev, next, last, first ma anche help, search e archives vuol dire aiutare il motore di ricerca a indicizzare correttamente (e come diciamo noi) le pagine del nostro sito incanalando il traffico dai search engines verso i contenuti più adeguati
  • stesso discorso per index: avere una pagina che si indica chiaramente come "indice" dei contenuti del nostro sito aiuta nella gestione dei contenuti duplicati e della dispersione di pagerank fra le varie pagine del sito
  • la relazione tag potrebbe essere estremamente utile nella categorizzazione delle nostre pagine, assegnando al documento una categorizzazione maggiormente accettata – e dunque molto più utile e rispettata – di quanto ad esempio il vecchio meta keywords possa fare

Per approfondire ulteriormente l'argomento, la specifica completa delle relazioni tra link è all'indirizzo http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html

Nel frattempo, il nostro suggerimento è di iniziare ad utilizzare queste funzionalità quanto prima – proprio come facciamo noi su HTML5 Today… :)