Cos'è un link? Un link è un collegamento ipertestuale tra due documenti. È uno dei concetti alla base del Web che consente di navigare da una pagina all'altra o da un sito all'altro, senza utilizzare la tastiera del computer. I collegamenti ipertestuali, per impostazione predefinita, non si aprono in una nuova scheda.
Un collegamento ipertestuale, noto anche come link, è un elemento che consente di connettere tra loro diverse risorse su Internet, come pagine web, immagini, documenti o sezioni all’interno di una stessa pagina. La loro importanza risiede nel fatto che i collegamenti ipertestuali sono alla base della struttura stessa del web. Grazie a questi collegamenti, il web è diventato un sistema interconnesso di informazioni, consentendo agli utenti di esplorare e navigare tra diversi siti, articoli, documenti, video e altro ancora.
Attraverso l'uso dei collegamenti ipertestuali, gli utenti possono accedere a diverse pagine web, risorse esterne o file scaricabili. I link HTML sono il fondamento della navigazione e dell'interazione sul web.
I link sono composti dal collegamento in sé e dalla risorsa a cui il collegamento fa riferimento. In HTML i link si creano col tag <a> </a> che sta per ancora, inteso come ancoraggio tra più pagine. Il tag <a> contiene il testo da visualizzare sulla pagina web e l’indirizzo URL della pagina di riferimento, costituito dall’attributo obbligatorio href. Il testo, il file o l'immagine che fungono da collegamento devono essere inseriti all'interno del tag di apertura e chiusura dell'elemento a.
Per creare un link devi decidere l’anchor text, usare il tag HTML <a> e aggiungere l’URL di destinazione. Per inserire un link HTML all'interno di una pagina, è necessario posizionare l'elemento a nel punto desiderato del codice. Completa il tag di chiusura: chiudi il tag <a> dopo il testo del link utilizzando </a>.
Leggi anche: Sbiancamento denti fai da te: la guida
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.
Quest’ultimo può essere di due tipi: relativo o assoluto. I link relativi sono utilizzati normalmente per creare dei collegamenti a diverse pagine del sito (cd. link interni) mentre quelli assoluti sono utilizzati, normalmente, per raggiungere risorse presenti all’interno di altri siti web (cd. link esterni). Non tutti gli URL si riferiscono a una pagina web. Alcuni URL portano a documenti scaricabili, mentre altri richiedono una codifica speciale.
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:
Per un'esperienza di navigazione efficace, è importante strutturare correttamente i link all'interno del tuo sito web.
Prima di tutto, a cosa serve il target="_blank"? A fare in modo che il link HTML cliccabile si apra in una nuova scheda del browser. Vi consigliamo di aggiungere gli attributi e i valori rel="noreferrer noopener" per bloccare i problemi di sicurezza più comuni nell'apertura dei link nelle nuove schede. Il valore HTML nofollow indica ai motori di ricerca di ignorare un link cliccabile e impedisce che il link juice dei motori di ricerca venga trasferito al sito web di destinazione. noopener: è un attributo HTML che viene aggiunto automaticamente ai link di WordPress contrassegnati come “Apri in una nuova scheda”.
Leggi anche: Come gestire il gonfiore dopo l'estrazione dei denti del giudizio
Il testo di ancoraggio deve essere rilevante per la pagina di destinazione e indicare chiaramente dove condurrà il collegamento. In linea di massima immagina le parole da linkare come l’etichetta su un cassetto chiuso. Senza questa etichetta non sapresti il contenuto del cassetto. Per questo motivo è fondamentale che le parole scritte sull’etichetta siano estremamente didascaliche rispetto al contenuto.
Ad esempio, se vuoi linkare una ricetta del Tiramisù dovrai creare il link sulle parole “ricetta del Tiramisù”. Evita testi generici come "clicca qui" o "link" e sfrutta le keyword pertinenti per fornire contesto ai motori di ricerca. Potresti anche usare link branded (es. Giallo Zafferano) o naked URL (es. www.open.it).
Esistono principalmente due tipologie di link: i link interni ed i link esterni. Un link interno se cliccato rimanda ad altra pagina presente nel tuo sito web. Dal lato opposto il link esterno è un collegamento che si riferisce ad una risorsa su un sito web esterno.
Un’ancora è un particolare tipo di collegamento ipertestuale che consente all’utente di muoversi velocemente tra diversi punti della stessa pagina. Per creare link di ancoraggio: potete collegarvi a contenuti della stessa pagina usando i link di ancoraggio; si usano molto per creare un indice all’inizio di un lungo post del blog. Usate l'attributo id per identificare la sezione e create un collegamento ipertestuale corrispondente utilizzando l'attributo href con il prefisso #.
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. 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.
Leggi anche: Trattamenti per la Carie Dentale
Pulsanti con link: i pulsanti CSS offrono opzioni per l’aggiunta di collegamenti ipertestuali. Puoi creare dei link cliccabili anche con dei bottoni. In sintesi, devi aggiungere un blocco Gutenberg specifico, quello dedicato ai pulsanti.
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. Abbiamo detto che attraverso i link è possibile collegare una pagina HTML ad un qualsiasi file. La reazione del nostro software di navigazione, in realtà, sarà differente a seconda del tipo di file linkato.
Se ad essere collegata è un’altra pagina HTML o un’immagine di un formato ottimizzato per il web (PNG, JPG o GIF) allora il browser aprirà la risorsa. Qualora invece si tratti di un file ZIP, di un EXE o di un altro tipo di file non direttamente gestibile dal browser (ad es. un file DOC, CSV, MDB, MOV, ecc.), allora il nostro browser si limiterà ad effettuarne il download.
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. Per un link testuale, è meglio che il testo sia già stato inserito nell’editor visuale. Con il testo ancora evidenziato, scorrete sul pulsante Inserisci/Modifica link nella barra degli strumenti dell’editor visivo. Create un link evidenziando il testo desiderato e facendo clic sul pulsante Inserisci/Modifica link (chainlink) nell’editor.
Nel testo che hai appena creato seleziona con il cursore del mouse la frase o le parole sulle quali vuoi creare un link o collegamento ipertestuale. Clicca poi sull’icona a forma di catenella proposta dall’editor di testo. A questo punto potrai inserire l’indirizzo della pagina da linkare oppure ricerca all’interno del sistema WordPress, una pagina o articolo già presente all’interno del sito web sul quale stai lavorando.
Se stai impostando un link esterno è opportuno che una volta cliccato il link si apra in una nuova pagina. Per questa ragione seleziona la check box “Apri in una nuova scheda”. Dopo aver eseguito questi passaggi potrai confermare cliccando il pulsante Invio.
Gli editor di testo come Atom, Sublime Text e Coda offrono l’interfaccia necessaria per scrivere e modificare l’HTML, soprattutto per i link cliccabili. Per prendere confidenza con il linguaggio Html ti consiglio di installare un semplice editor di codice gratuito.
Caricare i vostri file per pubblicarli su internet, tramite FTP o SFTP. Una volta pronto il link, potete pubblicare l’articolo/pagina o caricare l’HTML sul vostro sito. Una versione pubblicata di quel link HTML mostra il link sottolineato e talvolta in un colore diverso.
Quando si tratta di ottimizzare i link HTML per i motori di ricerca, ci sono alcuni suggerimenti da seguire. Se stai creando link interni al tuo sito, assicurati di utilizzare testi di ancoraggio descrittivi e pertinenti che riflettano il contenuto della pagina di destinazione. Evita testi generici e sfrutta le keyword pertinenti per fornire contesto ai motori di ricerca.
Attenzione ai link in uscita: non usare keyword troppo performanti; in questi casi lavora con nome brand o URL. Il fattore di innaturalezza risiede nel fatto che un blogger o webmaster difficilmente andrebbe a linkare spontaneamente ad una pagina prodotto utilizzando una money keyword.
Monitorare il buon funzionamento dei collegamenti ipertestuali è fondamentale per l’esperienza utente e per la SEO. Posiziona il cursore sul link e verifica il comportamento, oppure utilizza strumenti automatici per trovare link rotti.
Per creare un link cliccabile in molti editor basta copiare l'URL, incollarlo nel campo apposito e confermare. Per collegare un link su Pages o su documenti di testo seleziona il testo o l’immagine che ti interessa, clicca sul tasto destro e scegli Link. Nei client di posta, per inserire un collegamento basta copiare e incollare l’URL e poi premere la barra spazio per renderlo cliccabile.
L’elemento centrale della sintassi delle ancore è l’attributo name (o id) per il quale è necessario spendere qualche parola in più. Un punto di arrivo è l’ancora da inserire nel punto di destinazione: è la zona della pagina dove il browser si deve spostare quando l'utente clicca sul collegamento interno. Le etichette possono essere inserite nell'indirizzo URL della pagina web per linkare direttamente un punto interno della pagina tramite un backlink proveniente da un'altra pagina del sito oppure da un sito web esterno.
L'attributo rel può assumere valori come rel="canonical" per indicare contenuti duplicati o rel="author"/"me" per relazionare profili e autori.
Per creare un link testuale di base usa l'elemento <a href="URL">testo di ancoraggio</a>. Per esempio, per aprire il link in una nuova scheda: <a href="https://esempio.com" target="_blank" rel="noreferrer noopener">Visita esempio</a>.
| Scopo | Tag/Attributi | Esempio |
|---|---|---|
| Link base | <a href> | <a href="https://esempio.com">Visita</a> |
| Aprire nuova scheda | target="_blank" rel="noreferrer noopener" | <a href="..." target="_blank" rel="noreferrer noopener">Apri</a> |
| Link interno (ancora) | href="#id" id="id" | <a href="#sezione">Vai a sezione</a> ... <h2 id="sezione">Sezione</h2> |
| Link a file | href con URL assoluto | <a href="/files/doc.pdf">Scarica PDF</a> |
Spero che questa guida su come inserire i link ipertestuali ti sia stata utile. Dopo aver letto questo articolo, dovreste essere in grado di riconoscere l'aspetto di un link cliccabile e sapere esattamente come crearne uno, sia che si tratti di aggiungere un link al testo o alle immagini.
tags: #come #inserire #link #in #testo #html
