Cos’è un link, definizione

Di Riccardo Esposito | Pubblicato il - Aggiornato il

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.

cos'è un link ipertestuale
Cosa sono i link ipertestuali’

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?

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.

Esempio di link internet.
Esempio di link internet.

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

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:

Come creare salti di pagine con WordPress.

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.

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.

immagine che spiega il testo ancora e mostra un esempio di anchort text
Anchor text link, cosa vuol dire? Ecco una spiegazione

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.

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.

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.

Come mettere attributi a link su WordPress Gutenberg.
Come mettere attributi a link su WordPress Gutenberg.

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.

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.

immagine che mostra un esempio di struttura url per inserire un link
Struttura URL per capire cos’è un link.

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.

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.

Come si mette un link su WordPress.

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.

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.

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.

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.

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>

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

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.

Simboli per i link in uscita.
Simboli per i link in uscita.

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.

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.

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.

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.

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.

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.

Social yoast
Modifica l’anteprima link.

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

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:

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.

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.

Che cosa sono i link?

Il significato di link in informatica: collegamento che porta da una pagina all’altra. O a un documento. Senza dimenticare i web link MAILTO. Vale a dire i collegamenti ipertestuali (o hyperlink) che permettono di cliccare e scrivere le email.

Cosa vuol dire aprire un link?

Oltre a capire cos’è un link dobbiamo chiarire come si apre. Da computer basta cliccare con il mouse il tasto sinistro. Da smartphone basta un tap sullo schermo.

I link devono essere sempre sottolineati?

Non sempre è necessario aggiungere questa formattazione sui link, se sono ben visibili nel testo puoi usare il sottolineato solo quando passi il cursore del mouse.

Il font dei link è uguale a quello del testo?

Come dimensione sì, a parte casi del footer o del menu. Deve essere diverso per colore. Fa’ in modo che il font del link sia sempre diverso da quello del testo.

Posso mettere il target=”_blank” nei link?

Meglio di no, il target=”_blank” inserito nel codice HTML dei collegamenti rappresenta una forzatura. Puoi pensare a questa soluzione solo per i link in uscita.

Devo inserire icona per i link in uscita?

Non per forza, l’importante è usare un buon anchor text che spieghi all’utente dove è diretto quel collegamento ipertestuale. Però è sempre utile aggiungere la freccia.

Come vedere il link

Il link di un sito – noto anche come URL – si trova nella parte alta del browser. Si tratta di quella stringa preceduta da HTTP. Lo stesso si può fare dallo smartphone.

Riccardo Esposito

Sono un web writer freelance. Mi occupo di scrittura online dal 2009, mi sono specializzato nella stesura di piani editoriali per blog aziendali. Ho scritto 3 libri dedicati al mondo del blogging e della scrittura online.

Categoria: SEO

2 commenti su “Cos’è un link, definizione”

  1. Da qualche mese (1 o forse 2) quando apro un file precedente mi compaiono scritte di questo tipo: HYPERLINK.
    Quando per esempio inserisco il numero di pagina in una relazione, mi esce, al posto dei numeri di pagina, la seguente scrittura:
    parentesi graffa aperta+PAGE+tre puntini centrati verticalmente+\+*+punto centrato verticalmente +MERGEFORMAT+parentesi graffa chiusa .
    Non riesco a sistemare le cose. Le sarei grato se volesse gentilmente aiutarmi.
    Grazie.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.