fbpx

Link tag e attributo html href: collegamenti

Condividi su facebook
Condividi su twitter
Condividi su linkedin
Condividi su email
Senza il #taglink “a” che permette di collegare i documenti, il #web non esisterebbe così come lo conosciamo, vediamo come usare questo elemento #html nel modo corretto, anche per fini #SEO.
Tempo di lettura: 5 min.

Uno dei più importanti tag in html è il link tag o áncora <a>, da cui dipendono i collegamenti ipertestuali. La possibilità di collegare documenti all’interno di una rete di connessioni è l’essenza del web e la definizione stessa di “ipertesto”. Senza la possibilità di collegare i documenti, il web non esisterebbe così come lo conosciamo. Esisterebbero solo delle versioni online di contenuti indipendenti.

Fortunatamente, il tag link e il suo attributo html href sono qui per aiutarci a creare connessioni di qualità tra i nostri testi e altre pagine nella rete.

Link tag

L’elemento si chiama áncora o anchor in inglese, perché è usato per ancorare un indirizzo a uno specifico testo su una pagina. Questo in contrasto con il tag <link> che collega interi documenti e non parti di testo specifiche.

Il testo all’interno dell’elemento è l’anchor text e l’URL di destinazione viene incluso in uno specifico attributo html href.

<a href="http://esempio.it">Questo link porta al sito esempio.it</a>

Questo link porta al sito esempio.it

Assieme a href, il link tag <a> ha svariati importanti attributi utilizzabili, vediamo insieme quali sono.

Attributi

L’attributo html href è indispensabile per far fare in modo che il testo del link, una volta cliccato, ci conduca da qualche parte. Ci sono però altri attributi per servono per arricchire l’elemento e fornire ulteriori informazioni all’utente o al motore di ricerca che ispeziona la pagina.

target
Questo attributo specifica in quale finestra o tab del browser seguire il link. Il valore di default è la stessa finestra, ma se vuoi che si apra un nuovo tab del browser, l’attributo da usare è target="_blank".
title
Specifica un suggerimento che compare quando ci si ferma con il mouse sopra al link. Questo attributo mostra un piccolo popup sopra al testo mostrato (o immagine). È utile per mostrare qualche informazione aggiuntiva su cosa si stia per cliccare.
rel
Riporta la relazione tra il documento o pagina collegata e il testo corrente. I valori possono essere diversi:

  • alternate — Il documento collegato ha lo stesso contenuto di quello corrente, ma in un formato alternativo. Usato molto spesso per collegare i feed RSS.
  • author — La destinazione è la homepage del profilo dell’autore del documento corrente.
  • bookmark — Un link per specificare un punto in un documento, per esempio per creare una tabella dei contenuti del documento stesso.
  • help — Il documento collegato dal link tag fornisce informazioni aggiuntive su quello corrente.
  • license — Indica che il documento collegato è il testo della licenza per quello corrente.
  • next — La destinazione specificata nell’attributo html href è la parte successiva di quello che viene visualizzato. Alcuni browser pre-caricano la pagine successive per velocizzare il caricamento al click.
  • nofollow — Il documento collegato non è approvato dall’autore di quello corrente. Viene usato per prevenire i benefici SEO alla pagina collegata.
  • noreferrer — Usato per prevenire la spedizione di informazioni di riferimento nella richiesta HTTP quando l’utente clicca sul link tag. Normalmente le richieste HTTP specificano la pagina di partenza. Questo valore dell’attributo rel omette l’informazione.
  • prefetch — Simile a next, ma senza l’implicazione di sequenzialità. Il valore richiede il al browser di pre-caricare la destinazione di quel link tag prima che l’utente lo clicchi.
  • prev — Il contrario di next, questo valore specifica che il documento collegato è il precedente di quello visualizzato. Alcuni browser potrebbero pre-caricare anche questo.
  • search — La pagine collegata fornisce un’interfaccia specifica per la ricerca del documento corrente e altri correlati.
  • tag — Il documento collegato dal link tag fornisce ulteriore contesto all’argomento trattato nella pagina visualizzata.

Attributo rel e semantica

L’attributo rel è usato molto poco da creatori di contenuti non tecnici ma è un ottimo modo per offrire informazioni semantiche comprensibili per motori di ricerca, aggregatori e screen reader. Se si vuole puntare sulla semantica, non si può ignorare l’attributo html rel dei tag link.

Per esempio: Google usa l’attributo rel="author" nei suoi link tag per mostrare altro contenuto dello stesso autore. Ma non solo, include anche l’abilità di ricercare immagini sulla base della loro licenza, per trovare contenuti Creative Commons da riutilizzare. Questo dipende, in parte, dall’attributo rel="licence", usato per collegare la Creative Commons o altri tipi di licenza. Infine, molti motori di ricerca e siti di aggregazione, usano anche rel="tag", se presente, per identificare l’argomento trattato.

L’attributo rel può anche essere usato nei Microformat, che sono modi semplici di includere informazioni semantiche aggiuntive all’interno degli attributi html.

Per esempio, il Microformat XFN suggerisce di usare l’attributo rel quando di collegano i profili o pagine delle persone con cui si ha una relazione. Vediamo un esempio:

<p>Il prossimo mese sarà a una conferenza con <a href="http://example.com/profilo-elisa" rel="co-worker">elisa</a>. La conferenza sarà vicino alla città dei miei genitori, quindi spero di avere il tempo di fare un pranzo con <a href="http://example.com/profilo-marco" rel="parent">mio padre.</a></p>

SEO

Il link e le sue componenti sono indicatori importanti per Google nella valutazione di una pagina. Non solo il motore di ricerca seguirà i collegamenti, cercando di identificare una relazione tra la destinazione e la pagina di partenza, ma cercherà di verificare se il testo dell’elemento <a> sia correlato al contesto della pagina di approdo.

In sostanza, il collegamento deve essere pertinente con l’argomento trattato e utile. Inoltre, l’anchor text non deve essere fuorviante e incorporare in modo naturale il collegamento. Non inserire link solo perché devi fare link building, perché Google riconosce la tecnica e potrebbe addirittura penalizzare il contenuto.

Ne parlerò meglio in un articolo apposito, ma per il momento ricorda che i link devono essere utili, inerenti al soggetto trattato e inseriti in modo naturale nel testo.

Se ti è piaciuto l’articolo, non dimenticare di iscriverti alla newsletter per restare aggiornato sui prossimi contenuti!

Tabella dei Contenuti
Tabella dei Contenuti
Giacomo Lanzi

Giacomo Lanzi

Dopo studi in psicologia e letteratura, dal 2010 mi sono dedicato alla grafica web e all'editing per testi universitari. Sono un content creator per il web dal 2012. Dopo un'esperienza di due anni come manager di un team italiano per una compagnia internazionale a Berlino, ho deciso di tornare alla libera professione e di dedicarmi del tutto al web. Oggi offro servizi come autore, content creator, grafico web e SEO expert. Mi caratterizzano un attitudine al pensiero critico, abilità nella guida di un team, la cura dei dettagli e l'impegno che metto in ogni progetto, siano essi personali o professionali.