Cos’è un collegamento ipertestuale e come utilizzarlo all’interno del tuo sito web o del tuo blog?
Tutti i giorni navighiamo su internet muovendoci da un sito all’altro con un semplice click: tutto questo è possibile grazie all'ipertestualità, cioè alla possibilità di raggiungere un diversi siti web premendo su un collegamento ipertestuale, noti comunemente come link.
Oltre a permettere una navigazione fluida e facilitare l’inserimento di riferimenti esterni all’interno di un sito web, creare collegamenti ipertestuali permette di lavorare sull’indicizzazione SEO e sul link building per i motori di ricerca.
Se hai attivato un hosting WordPress e iniziato a lavorare sul sito web avrai notato che è possibile inserire i link in modo semplice e intuitivo, tramite una funzione nativa integrata. Potrebbe capitare ad alcuni però di dover inserire i link in codice HTML. Vediamo insieme in questo articolo cosa vuol dire e come fare per inserire un collegamento tramite link HTML.
Cos’è un link o collegamento ipertestuale?
Anzitutto partiamo dalla definizione di collegamento ipertestuale. In informatica è definito come il rinvio da una unità informativa ad un’altra. In inglese viene detto hyperlink o semplicemente link ed è ciò che permette l’atterraggio da un sito web su altre pagine dello stesso sito o di un sito esterno.
Per permettere al lettore di distinguere un link, solitamente il testo del collegamento, detto anchor text, viene evidenziato attraverso qualche peculiarità grafica: la più utilizzata è la sottolineatura e la scritta di colore blu. Il collegamento viene attivato quando il mouse va a finire sopra l’anchor text e cliccando sul link viene visualizzata la pagina di destinazione del collegamento.
I collegamenti ipertestuali vengono definiti anche come le fondamenta della struttura interconnessa del world wide web: infatti a tutti coloro che navigano sul web accade di continuo di imbattersi in link che li portano da un posto all’altro.
Lo stesso accade sempre più frequentemente nelle mail - soprattutto nelle newsletter pubblicitarie - ma anche su app di messaggistica come Whatsapp o Telegram così come sui social media come Facebook e Instagram. Molto spesso, mentre navighiamo online, clicchiamo su collegamenti ipertestuali senza neanche rendercene conto.
Attraverso i link si possono collegare non soltanto diverse pagine web ma anche immagini, documenti PDF, file eseguibili, archivi zippati, indirizzi di posta elettronica e molto altro. Ma da cosa è costituito un link HTML? I link sono composti dal collegamento in sé e dalla risorsa a cui il collegamento fa riferimento.
Come creare un link in codice HTML?
Come abbiamo anticipato, se hai un sito web in WordPress avrai lavorato con i link e i collegamenti ipertestuali molto spesso senza mai aver avuto bisogno di conoscere, creare o modificare il codice HTML.
Questo perché i CMS più diffusi, tra cui appunto WordPress, permettono anche a chi non ha dettagliate conoscenze di programmazione informatica di iniziare a lavorare sul web. Dopo aver introdotto di cosa si tratta e il suo utilizzo ci chiediamo cosa c’è dietro un collegamento ipertestuale? Vediamolo insieme.
I collegamenti ipertestuali si creano con la coppia di tag <a> </a>. La “a” sta per ancora, e fa riferimento al fatto che il link deve fornire un ancoraggio tra più pagine/elementi. Il tag <a> contiene il testo da visualizzare sulla pagina web e l’indirizzo URL della pagina di riferimento, costituito dall’attributo obbligatorio href.
Vediamo un esempio di una struttura base di collegamento ipertestuale:
L’utente visualizza nella pagina il testo “visita il sito”, solitamente sottolineato e scritto in blu, ma non vede il sito o il percorso che sono contenuti nel codice html.
Il tag <a> può essere costituito non per forza da un testo, ma anche da un’immagine o un oggetto che canalizzano di più l’attenzione al link da cliccare. In base al formato da utilizzare cambierà il codice che inserisci nel documento.
In caso di collegamento ipertestuale in forma di immagine il codice si presenterà così:
In generale, i collegamenti possono essere suddivisi in due categorie:
- link a risorse esterne: sono anche chiamati link assoluti o link esterni e vengono utilizzati per raggiungere risorse esterni al sito web di partenza. Si può trattare di collegamento ipertestuale a un file, ad un altro documento, ad un indirizzo e-mail, ad una nuova pagina web per ulteriori informazioni su un argomento, e molto altro...
- link a risorse interne: i link vengono utilizzati per creare collegamenti a diverse pagine interne allo stesso sito; vengono detti anche link relativi.
La maggior parte degli editor, a partire da WordPress fino a Microsoft Word, permettono di creare un collegamento ipertestuale dal menu, semplicemente cliccando sull’icona a forma di catena e inserendo nella finestra di dialogo che si apre il link a cui si intende collegare la pagina web o il documento di word.
Se ti occupi di content marketing potresti aver utilizzato anche un altro tipo di collegamenti: le ancore interne al testo. Vengono utilizzate specialmente negli articoli di blog per facilitare la lettura, suddividere il testo in paragrafi e permettere a chi legge di orientarsi facilmente da una parte all’altra del testo.
Quali sono gli attributi del tag <a>?
Il tag <a>, oltre a href, che è obbligatorio, ha tutta una serie di altri interessanti attributi che permettono di aggiungere maggiori informazioni ai collegamenti ipertestuali. Quelli più interessanti e tra i più utilizzati sono:
- title: permette di assegnare un titolo al link, cioè un testo di commento che viene visualizzato quando il mouse passa sull’area del link. Il title è utile sia per orientare l’utente nella navigazione che per migliorare l’indicizzazione.
- target: dà la possibilità di aprire il link nella stessa finestra del browser (target self) oppure in una nuova finestra (target blank) o all’interno di un frame specifico.
- name: attraverso questi attributi è possibile creare link interni alle pagine (anche detti ancore)
- rel: specifica il tipo di relazione che c’è tra la pagina che linka e quella linkata. Viene utilizzato soprattutto in ambito SEO per creare link nofollow.
- accesskey: permette di tracciare delle scorciatoie da tastiera grazie a cui arrivare velocemente al documento/link collegato. hreflang: consente di specificare la lingua del documento allegato, che deve essere scritta in forma abbreviata di due lettere.
Pubblicato: | Aggiornamento: