Supporto volontario e collaborativo per Joomla!® in italiano

HTML5 crea nuove amicizie e relazioni

Informazioni UtiliUn titolo curioso per questo articolo...
HTML5 ha introdotto numerose novità, basta pensare al Canvas o ai nuovi elementi semantici come i tag section, headerfooterarticle.
Con questo articolo voglio parlarvi di un'altra novità che spesso viene tenuta di minor conto: l'aumento delle potenzialità dell'attributo rel.
Già in passato erano stati fatti, qui su http://www.joomla.it/, articoli che riguardavano l'uso di questo attributo con Joomla ("Inserire il rel=no_follow ai link nei contenuti di un Joomlasite" e "Url duplicate verso l'homepage? Impariamo l'utilizzo di rel=canonical") ma vediamo adesso cosa c'entra con HTML5.

Cosa è l'attributo rel e perché usarlo?
E' un attributo dell'HTML che, come possiamo leggere su questa pagina, descrive il tipo di relazione che esiste tra la risorsa corrente e quella che viene linkata attraverso l'attributo stesso. Come scritto, l'attributo rel non puo' essere usato senza che l'attributo href sia presente. E' utile usarlo per vari motivi:
  • dà una spiegazione sulla relazione che esiste tra due documenti ai motori di ricerca semantici;
  • indica dove possiamo trovare delle risorse esterne che completano la pagina;
  • "aiuta" script, robots o altre applicazioni a identificante e utilizzare link diversi.
L'attributo rel è stato per un lungo periodo utilizzato dagli sviluppatori web per indicare l'email dell'autore della pagina, pratica sconsigliata perché sono stati molti gli spammer che vanno a cercare questa informazione. Per fortuna con l'arrivo di nuovi standard le cose si sono chiarite e possiamo utilizzarlo in sicurezza senza che diventi un'arma a doppio taglio.

E i link di relazione? Cosa c'entra l'HTML5?
Una delle novità più importanti riguardanti HTML5 è sicuramente l'introduzione di relazioni tra link aggiuntive. L'HTML5 divide le relazioni tra link in due categorie principali:
  • collegamenti a sorgenti esterni: link a elementi che arricchiscono la pagina stessa (per esempio i collegamenti ai fogli di stile);
  • collegamenti ipertestuali: link ad altri documenti (per esempio a una versione in formato diverso della stessa pagina, ai feed, a una traduzione etc etc);
Nell'HTML5 inoltre sono stati introdotti nuovi valori di rel, mentre altri sono stati rimossi.

Dove sono inserite le relazioni tra link?
Nella maggior parte dei casi sono inseriti negli elementi link definiti all'interno del tag head. A volte all'interno del tag a. Con l'HTML5 è nata la possibilità anche di inserirli all'interno dell'elemento area. Possiamo ben notare che questi ultimi due casi sono poco frequenti.
I rel principali che erano utilizzati già da prima in maniera (più o meno) ufficiale sono (in ordine alfabetico):
  • alternate: serve per specificare un documento con una rappresentazione alternativa della pagina;
  • bookmark: è un permalink al contenuto del contenitore più vicino;
  • help: collegamento a un contenuto che offre un aiuto valido alla pagina;
  • index: link all'indice o alla tabella dei contenuti. Non è il link alla home page (che viene solitamente indicata con index.php o index.html);
  • next: link al documento successivo. Viene utilizzato per esempio per una serie di contenuti (capitoli, lezioni etc etc). Storicamente il "next" è stato l'unico, tra i tanti attributi per le raccolte dei documenti, ad essere stato utilizzato correttamente. Per gli altri invece era normale che alcune persone usassero "previous" invece di "prev", "begin" invece di "first", in parole povere tutti valori non standardizzati;
  • prev: link al documento precedente. Anche questo, come il precedente, viene utilizzato per una serie di contenuti correlati;
  • stylesheet: sicuramente quello più conosciuto, viene utilizzato per importare un foglio di stile.
Quelli introdotti in modo ufficiale (alcuni erano già utilizzati ma non facevano ancora parte dello standard) nella specifica HTML5 sono (sempre in ordine alfabetico):
  • archives: link ad una collezione di documenti. Nato per raccogliere insieme materiale di interesse storico o cronologico, probabilmente molti ne abuseranno;
  • author: uno dei valori del rel più interessanti. Indica un link alle informazioni relative all’autore del contenuto: può essere, per esempio, un indirizzo email, una pagina con la biografia o con i contatti o semplicemente il collegamento a un profilo in un social network, come è stato utilizzato su joomla.it per far apparire la foto dell'autore nei risultati di ricerca di Google (leggi articolo). Si prevede che l'utilizzo di questo valore sarà sempre più importante: sia per il SEO ma, da alcuni mesi, anche per controllare il rendimento dei propri articoli tramite gli strumenti per webmaster di Google (infatti una volta fatto accesso alla pagina basta andare su "Funzioni sperimentali" e scegliere "Statistiche sull'autore");
  • external: collegamento a una pagina esterna. Fu diffuso per primo da WordPress che lo utilizzava nei link di chi lasciava un commento;
  • first: link al primo contenuto di una serie, adatto da inserire insieme a prev e next;
  • icon: considerata la seconda relazione più utilizzata, serve per importare un'icona. Utile per esempio per le favicon. Se andiamo a vedere il sorgente di un sito fatto con Joomla avremo nella pagina per esempio la riga
    <link href="/templates/TEMPLATE_UTILIZZATO/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    Da notare bene che utilizzando "shortcut icon" su Internet Explorer non funziona perché il browser non tratta gli attributi rel come un elenco di valori separati da spazi e andrà a cercare il file favicon.ico nella root del sito. Con HTML5 possiamo indicare anche la dimensione dell'icona a cui facciamo riferimento;
  • last: complementare del first, è il link all'ultimo contenuto di una serie;
  • license: inventato dalla comunità Microformats, anche questo valore è molto importante perchè porta alle informazioni relative al copyright del documento;
  • nofollow: spesso c'è confusione sul significato di questo valore, ma in verità indica che l'autore del documento non conferma la validità della pagina a cui si linka. Inventato da Google ma standardizzato all'interno della comunità Microformats; il suo scopo iniziale era, come detto, quello di indicare che il contenuto non era garantito: se i link "nofollow" non avessero passato il pagerank questo avrebbe portato a far si che gli spammatori cessassero di pubblicare commenti spazzatura dentro i blog. Questa cosa non è successa, ma il nofollow viene tutt'ora utilizzato e spesso, nei CMS o in altri sistemi di pubblicazione di contenuti, viene aggiunto in modo predefinito e automatico.
  • noreferrer: non è un link vero e proprio, ma impedisce l’invio del referente tramite l'header HTTP. Il supporto a tale attributo non è presente ancora su tutti i browser;
  • pingback: utilizzato per indicare l'indirizzo del server di pingback. Il pingback è un interessante sistema che permette a un autore di essere automaticamente informato quando altri siti web inseriscono un link verso il proprio contenuto. Alcuni CMS implementano questo meccanismo. Anche Joomla lo fa con alcune estensioni;
  • prefetch: in alcuni casi è utile perché fa il preload del documento linkato;
  • search: linka ad un documento OpenSearch, che è un formato utilizzato per la ricerca dei contenuti basato su XML;
  • sidebar: mostra il documento linkato in una sidebar del browser (solo se è presente). In pratica, nel caso di browser come Firefox, se si clicca si aprirà la finestra per il salvataggio di un segnalibro, mentre altri browser (come Internet Explorer) trattano il link come di normale;
  • tag: indica un tag o una parola chiave applicabile al documento corrente;
  • up: collegamento al documento padre del documento attuale, se è presente.
L'elenco completo lo possiamo trovare nella pagina del W3C.
Da come abbiamo potuto capire i nuovi valori all'attributo rel permettono ai motori di ricerca di contestualizzare meglio il collegamento semantico e quindi avere un impatto con il SEO migliore. Teniamolo bene a mente: HTML5 è e sarà il prossimo futuro del web; conoscere e capire le potenzialità dell'HTML5 ci permetterà di creare siti migliori. Alla prossima novità Occhiolino

CommentaCommenta questo articolo sul forum