Cos’è un link, definizione

Di Riccardo Esposito | Pubblicato il 4 Ott 2009 - Aggiornato il 20 Ago 2022

La domanda per blogger e SEO: cos’è un link in informatica? I collegamenti ipertestuali – o web hyperlink in inglese – sono passaggi, inseriti con il codice HTML, che permettono di raggiungere un documento web attraverso un click.

---

Il significato di link: collegamento, connessione. Ma anche legame, nesso. In informatica, cosa sono i link? Un collegamento ipertestuale in codice HTML che consente di mettere in relazione due pagine – o due sezioni dello stesso documento – che hanno una connessione in termini utilitaristici. Internet si basa sul concetto di hyperlink.

Un click pulsante sinistro del mouse o con il dito indice sullo smartphone. I link sono l’anima del web e permettono di creare i documenti che ogni giorno navighiamo e scopriamo per raggiungere informazioni. Approfondiamo i collegamenti ipertestuali?

Cos’è un link e a cosa serve

Posso collegare una pagina per approfondire un argomento o per soddisfare delle esigenze legali. Ad esempio in una home page puoi inserire i link alla policy e alla pagina cookie. Mentre in un post puoi aggiungere collegamenti per approfondire.

Il collegamenti rappresentano anche un fattore di posizionamento per Google, che valuta la qualità di un documento anche dal numero e dal tipo di link ipertestuale.

Ecco perché si paga spesso di link building e link earning, tecniche SEO sempre complesse che appunto consentono di ottenere link in ingresso di qualità. Ora, però, cerchiamo di capire meglio cos’è un link in informatica e a cosa serve.

Da leggere: come inserire un link su Facebook

Quanti tipi di link esistono sul web?

Iniziamo dai web hyperlink di base. Cos’è un link e quali sono i principali usi che possiamo fare di questo elemento? Ecco una lista base da sfruttare per approfondire.

• Text hyperlink: utilizza una parola o una frase per indirizzare verso pagine diverse.
• Image hyperlink: sfrutta un’immagine per portare a un altro documento online.
• Bookmark: elemento salvato nel browser, in un’app o in un sito web specifico.
• Collegamento ipertestuale e-mail: invia messaggio all’indirizzo visualizzato.

Poi ci sono i collegamenti web. C’è una lista dei link che partono dalle pagine? Ecco quanti menzioni ipertestuali puoi incontrare sul tuo cammino di blogger.

• Link interni, sono collegamenti ipertestuali verso altre pagine del sito.
• Link in uscita, noti come outbound link diretti su altre risorse web.
• Backlink, o inbound link, ovvero i collegamenti ipertestuali verso il tuo sito.
• Ancore interne, salti di pagina con link che vanno in sezioni specifiche.
• Permanent link, i permalink: indirizzi non modificabili delle pagine web.

Un esempio di link relativo a quest’ultima sezione? Quello che si crea con un menu interno attraverso il classico a href che punta su un a name. Ecco un esempio:

Cos’è un link ipertestuale con ancora? Un modo per passare da una sezione all’altra. In automatico puoi creare menu interni grazie a plugin come Table Of Content Plus, oppure puoi usare il codice HTML come mostrato dal video.

All’interno di un sito web troviamo i sitewide link, un collegamento ipertestuale nelle aree meno centrali del contenuti. Come ad esempio nel footer o nella sidebar.

Cos’è un link e il suo anchor text

L’anchor text (o testo ancora) è la stringa di contenuto che permette all’utente di cliccare e raggiungere la destinazione. Al posto del contenuto testuale ci possono essere immagini (qui il testo ancora sarà il tag alt per Google) o elementi dinamici.

Il significato di link comprende anche questo elemento, il testo ancora. Senza, non esiste collegamento ipertestuale. D’altro canto esistono diversi tipi di anchor text:

• Keyword esatta: una parola chiave secca.
• Branded: il nome del sito o della marca.
• URL: l’indirizzo della pagina web.
• Tag alt: quando metti link nell’immagine.
• Generico: una parola chiave non specifica.

Quindi, cosa sono i link? Elementi che presentano uno di questi anchor text per collegare l’utente da un punto all’altro del web. Scegli il miglior testo ancora per migliorare l’usabilità e la leggibilità, usa un testo chiaro per dare significato ai link.

Esempio di link: il codice HTML

Cos’è un link? Conviene fare un esempio con una stringa di codice. Nessun problema, ecco un esempio di collegamento ipertestuale in tag HTML che puoi prendere come riferimento. Ovviamente cambiano dominio e testo di riferimento.

<a href="https://www.sito.it/">Esempio link</a>

Ricorda che i collegamenti ipertestuali possono essere gestiti attraverso anchor text, immagini, elementi dinamici come widget e bottoni Call To Action. Ecco un esempio di link su immagine che puoi utilizzare sia in una pagina web che in un’email.

<a href="https://www.sito.it/">
<img src="esempio.gif" alt="esempio">
</a>

Tra i migliori esempi di link, però, ricordiamo che il testo ancora puro resta il miglior modo per realizzare link ipertestuali cliccabili, usabili e facili da riconoscere. In sintesi, ecco cos’è un link in base ai vari attributi per scriverlo con il codice HTML.

<a href> e altri attributi del link

Cos’è un link? Un insieme di tag HTML del codice. La <a> sta per anchor, questo perché i primi documenti ipertestuali erano collegati ad ancore (o marker) all’interno di una pagina. Il passaggio href all’interno di un sta per hypertext reference.

Ovvero riferimento ipertestuale. A questo codice HTML per creare un link si possono aggiungere una serie di elementi chiave per influenzare il comportamento. Alcuni attributi, come il target=”_blank”, si usano per aprire la pagina in un’altra scheda.

• Usa <a> per definire un hyperlink tra documenti.
• Utilizza l’attributo href per l’indirizzo del link.
• Metti eventuale target per chiarire dove aprire.
• Aggiungi rel per dare un attributo al link.
• Usa img per usare un’immagine come collegamento.

Infine puoi sfruttare lo schema mailto: all’interno dell’attributo href per creare un collegamento in grado di aprire il programma di posta elettronica dell’utente.

Uno dei più famosi e l’attributo nofollow che comunica a Google di non considerare un link in termini SEO. Ecco un esempio di collegamento ipertestuale con attributo rel="nofollow" che impedisce il passaggio di Pagerank e di valore SEO.

<a href="https://www.sito.it/" rel="nofollow">Esempio link</a>

Ricorda che il nofollow può essere definito con maggior attenzione grazie ad altri attributi come il rel="sponsored" per i link promozionali e il rel="UGC".

Questi riguardano gli User Generated Content. Vale a dire i contributi pubblicati dagli utenti come i commenti. Per approfondire puoi leggere la guida di Google sui link.

Come creare un link in HTML

Per mettere un collegamento in una pagina web devi usare il codice HTML. In particolar modo l’attributo a href, una soluzione che consente di creare la connessione tra le due risorse. Gli elementi che compongono il link sono due:

• L’URL della pagina di destinazione.
• L’anchor text di riferimento da cliccare.

Per aggiungere il codice bisogna usare l’attributo <a>, che serve per passare da un elemento all’altro. Si può usare in diverse situazioni ma la più comune è con href che consente di saltare verso un documento ipertestuale diverso con un permalink.

C’è la possibilità di utilizzare <a name> per creare i salti di pagina da una sezione all’altra. Molti CMS semplificano queste operazioni e rendono superfluo il codice.

Inserire un link su WordPress

Non devi solo capire cos’è un link, ma anche come inserirlo. Per WordPress ci sono dei comandi nell’editor WYSIWYG che corrispondono all’immagine della catena.

Aggiungere un link su WordPress e rendere cliccabile un testo? Basta selezionare l’anchor text o l’immagine scelta e cliccare sull’icona per inserire il collegamento.

Poi si apre un campo nel quale puoi aggiungere l’URL o cercare una parola chiave: il CMS ti propone tutti gli articoli che potresti aggiungere come collegamento interno, una soluzione molto interessante per gestire link interni su WordPress.

Cos’è un link relativo o un link assoluto

Il collegamento ipertestuale relativo non include il nome di dominio e si usa per i link interni o per i file locali. Quello assoluto aggiunge il nome di dominio e sono necessari per i collegamenti esterni, che indirizzano l’utente a un altro sito Web.

Absolute URL
<a href="https://www.esempio.it/">Esempio</a>

Relative URL
<a href="/esempio/default.asp">Esempio</a>

I collegamenti assoluti possono anche iniziare con due slash //. Quindi, cosa sono i link relativi e assoluti? Due modi diversi per differenziare gli hyperlink che riguardano l’uso interno ed esterno. Personalmente, uso in ogni caso l’URL intero.

Regole di user experience (UX) per i link

L’usabilità dei link è l’insieme di regole che permette a un collegamento ipertestuale di essere riconoscibile e leggibile. In questo modo si inserisce nei contenuti ottimizzando al meglio la sua funzione: farsi notare e cliccare dal lettore.

Usa un colore diverso per i link

Già usando il giusto colore del carattere puoi fare qualcosa per migliorare l’usabilità dei link. Il primo passo è quello di renderli perfettamente riconoscibili online.

Di che colore devono essere i link? Blu. Questa è la regola di base che viene indicata come ideale per indicare la presenza di hyperlink. Motivo? Secondo l’inventore del web, Tim Berson Lee, non c’è una ragione. Ecco perché puoi usare soluzioni differenti.

Differenzia link visitati e da cliccare

Sempre buona norma usare colori differenti per i link non visitati e già cliccati. La regola prevede una scelta di sfumature vivaci per i primi e smunte per l’ultima soluzione, ma appartenenti comunque allo stesso colore. Due variabili:

• Normale: #0000FF (blu).
• Visitato: #800080 (viola).

Quale consiglio? È da evitare l’utilizzo di due colori completamente differenti (arancione e verde) per i link visitati e da visitare, così come è da evitare l’utilizzo di un colore simile a quello dei collegamenti ipertestuali per il testo normale.

Sfrutta l’attributo title quando serve

Ricorda che i link possono essere arricchiti da un testo che appare quando il mouse passa sopra all’anchor text. Serve a spiegare, dà maggiori informazioni.

L’attributo title nei link non è obbligatorio ma in alcune circostanze può aiutare a definire la natura del collegamento. Ecco come creare un link in questi casi:

<a href="http://example.com/" 
   title="Questo è il mio sito web">
   example.com
</a>

Come creare un link di un file PDF

Se per caso il link è rivolto a documenti differenti dalla pagina web inserisci tipo, formato e peso del file che si andrà a scaricare con quell’azione. In questo modo l’utente non rimane spiazzato, è informato rispetto all’azione che va a compiere.

Evita target=”_blank” quando possibile

Una delle regole fondamentali dell’usabilità per i link: non usare il target=”_blank”, vale a dire il comando HTML per far aprire i link in una finestra differente.

Questa è una regola di user experience che si prende cura dell’utente: non è informato rispetto a cosa stai per fare, ovvero aprire il link in una finestra differente. Al limite puoi mettere il target=”_blank” solo per i link in uscita (outbound link).

Differenziare link interni e in uscita

C’è bisogno di farlo? Di base per gli outbound link è prevista un’icona con la freccia verso destra che indica, appunto, la presenza di un collegamento che va fuori al sito.

Però si tratta di una regola in disuso, non è obbligatorio seguire questo principio. Meglio usare le parole, il contesto, per spiegare dove è diretto quel link ed evitare un elemento di disturbo. In ogni caso, come sottolinea ux.stackexchange.com, puoi usare anche icone differenti per suggerire la fonte linkata all’utente.

Devi attivare i link al passaggio del mouse

Per link attivati s’intende il momento in cui passi cursore sull’anchor text e clicchi. In questa situazione il collegamento dovrebbe cambiare colore (di solito diventa rosso) e sottolinearsi se già non lo è, prevedere il passaggio del cursore dalla freccia alla mano. In questo modo capisco che sto per avviare un collegamento ipertestuale.

I link devono essere sottolineati

La regola base dell’usabilità per i link: devi differenziarli. Questo solitamente avviene con un colore diverso e la sottolineatura del font, particolarmente utile per aiutare le persone affette da disturbi visivi (ad esempio il daltonismo) a riconoscere i link.

Ma i collegamenti ipertestuali, comprese le ancore interne HTML, devono essere sempre sottolineati? No, puoi attivare questa funzione nel momento in cui il mouse passa sopra al link e trasforma il cursore in mano. In questo modo è chiara la presenza di un collegamento ipertestuale nel contenuto che hai pubblicato.

Usa un anchor text del link chiaro

Cos’è un link? Una perla di chiarezza. Per questo il testo ancora deve comunicare il contenuto che si trova nella pagina di atterraggio: non deve essere generico ma specifico, leggendo l’anchor text io devo capire perfettamente cosa mi proponi.

• Clicca qui (no).
• Visita il sito My Social Web per approfondire (sì).
• Fonte La Repubblica (sì).
• Fonte www.corriere.it (sì).
• Leggi di più (no).

Ecco alcuni esempi di link corretti e non. L’anchor text permette di dare chiarezza all’hyperlink. Ricorda che questo elemento non deve prevedere tante parole.

Scegli dimensione del testo adeguata

Come creare un link? Un elemento da considerare con attenzione è la dimensione del font che, ovviamente, non deve essere differente da quella del testo normale. Basta il colore per differenziare un collegamento ipertestuale da tutto il resto.

Una dimensione inferiore del font può essere utilizzata per i link alle pagine informative (privacy) a patto che siano inseriti nel footer o in un’area secondaria.

Creare un link personalizzato su Facebook

Aggiungere un collegamento ipertestuale nel post Facebook è semplice, basta prendere l’URL e incollarla nello spazio dedicato agli aggiornamenti. In questo modo il social network prende il tag title, la meta description e la prima immagine della pagina per creare l’anteprima link Facebook. Condividere un hyperlink è facile.

Come personalizzare preview hyperlink

Ma come modificare anteprima link Facebook? Prima lavoravi nella preview, oggi devi usare WordPress SEO by Yoast e l’editor dei meta tag per aggiungere sezioni specifiche relative ai social network. Poi passa su Facebook Debugger.

Se vai nella sezione per gestire i dati delle personalizzazioni social, qui puoi aggiungere tre campi: titolo, descrizione e immagine dell’anteprima link. 

Bastano pochi passaggi per cambiare anteprima link anche per Twitter. Come puoi ben capire, condividere un hyperlink su Facebook non è mai stato così semplice.

Come cambiare anteprima video Facebook

Quando condividi il link di un video su YouTube ti ritrovi con una preview che non ti piace? Puoi usare un tool: scorphq.com/YouTube/Generator. Così puoi personalizzare il link e inserire una preview grande anche per YouTube su Facebook.

Da leggere: dove trovare link Facebook

Cos’è un link? Hai altre domande sui link?

Perfetto, lascia tutto nei commenti. Ampliamo l’argomento con quesiti di chi cerca informazioni sull’argomento link interni e in uscita. Magari anche in entrata, i classici inbound link che tanto piaccio a chi fa SEO. Per approfondire consiglio di leggere:

• Ottenere backlink di qualità
• Come inserire link su WordPress
• Come mettere un link MAILTO
• Quanto vale un link

Ultima curiosità: come si fa a cliccare un link? Dal computer devi usare tasto sinistro del mouse con doppio click. Destro, invece, permette di aprire finestra di dialogo e qui puoi scegliere se aprire in una nuova scheda o finestra del browser.

Da mobile c’è, invece, il tap per aprire e il tocco prolungato per aprire il menu con le varie opzioni. Con il tap prolungato puoi anche copiare il link da cellulare.

TL;DR: pillole di usabilità per i link

Cosa valutare per l’usabilità dei link? Cosa prendere in esame per avere un sito web accessibile? Ecco una serie di regole che abbracciano web design, UX e SEO.

Categoria: SEO