SEO e realizzazione siti web Udine a misura di PMI

menu x
menu x

Come inserire un link in Html: teoria e pratica per creare un collegamento ipertestuale.

  • 12 Agosto 2024
Laura Musig Siti web Udine » Blog SEO » Come inserire un link in Html: teoria e pratica per creare un collegamento ipertestuale.
Si parla di:
inserire-link-sui-siti-web

Nella mia attività di creazione di siti web ricevo dei testi dai miei clienti corredati da note in cui si indica che una determinata parole deve aprire una determinata pagina web oppure ancora delle istruzioni in cui a ridosso di una certa frase, si indica che quest’ultima dovrebbe rimandare ad un contenuto che (ahimè) non è sempre in linea con quello che un lettore si aspetterebbe di trovare. Questo mi ha fatto riflettere sul fatto che forse i link o collegamenti ipertestuali non sono poi così banali, né da concepire, né da inserire in un contenuto testuale, soprattutto se quest’ultimo è una pagina web. In questa guida, scritta prima di tutto per i miei clienti, ma anche per chiunque ne avesse bisogno, andrò a spiegare come inserire un link (o collegamento ipertestuale) in una pagina web.

Sì, ma che cos’è un link o collegamento ipertestuale?

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. I collegamenti ipertestuali sono fondamentali per la navigazione sul World Wide Web, poiché permettono agli utenti di muoversi facilmente da una risorsa all’altra con un semplice clic.

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. Essi non solo facilitano la fruizione delle informazioni, ma supportano anche l’indicizzazione delle pagine da parte dei motori di ricerca, migliorando l’accessibilità e la scoperta dei contenuti online.

Come decidere le parole da linkare

Al di là della rilevanza dei collegamenti ipertestuali quali “spina dorsale” di internet, è altrettanto importante capire come impostare il nostro link: detto in parole semplici, quali parole linkare, che come vedrai tra qualche paragrafo, prendono il nome di “anchor text”.

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 del cassetto.

Se vuoi quindi linkare una ricetta del Tiramisù dovrai, appunto, creare il link sulle parole “ricetta del Tiramisù”.

Anche se questo è l’esempio più comune, ci sono anche dei casi specifici in cui le parole linkate non sono esattamente così didascaliche.

  • Potresti linkare il nome di un sito web es. Giallo Zafferano, in questo caso abbiamo un link di tipo branded perché include il nome di un sito o di una marca.
  • Potresti linkare direttamente l’indirizzo di un sito web es www.open.it in questo caso siamo di fronte ad una naked url ovvero l’indirizzo “nudo” della pagina web.
  • Oppure potresti decidere di linkare una risorsa attraverso un semplice “clicca qui”. In questo caso è importante che il testo in prossimità del “clicca qui” renda esplicito all’utente il contenuto della pagina che andrà a visitare quando cliccherà su quel link.

Link interni e link esterni

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. Può trattarsi di una pagina istituzionale, di un articolo di blog o magari di un pdf.

Dal lato opposto il link esterno è un collegamento che si riferisce ad una risorsa su un sito web. Puoi decidere di includere nella tua pagina web un link ad un sito/risorsa esterna quando ritieni che quest’ultima sia particolarmente utile al tuo utente o quando la ritieni complementare all’argomento che stai trattando. Quando decidi di creare un link ad un sito esterno è sempre bene far sì che questo link si apra in una nuova finestra (approfondiremo meglio questo aspetto tra qualche paragrafo, abbi pazienza).

Come inserire un link in una pagina web nella pratica

Dopo aver capito come si crea un link nella teoria, passiamo alla pratica. Distinguerò due casistiche: la creazione di un link ipertestuale attraverso un editor di codice oppure sfruttare l’editor di testo di un sistema come WordPress.

Conoscere il codice o markup Html per creare un link

Prima di capire creare un link con l’Html, cerchiamo di capire cos’è l’Html!

L’HTML (HyperText Markup Language) è il linguaggio standard utilizzato per creare e strutturare il contenuto delle pagine web. Si tratta di un “linguaggio di markup” in quanto composto da tutta una serie di marcatori utilizzati per delineare e organizzare gli elementi all’interno di un documento. Questi marcatori o tag non contengono istruzioni di programmazione (in altre parole non svolgono azioni o compiti), ma servono semplicemente a definire degli elementi come paragrafi, immagini, link, titoli, e altri elementi multimediali, indicando al browser come visualizzarli. Per esempio, un tag come `<p>` viene utilizzato per indicare un paragrafo, mentre `<img>` indica l’inserimento di un’immagine. Il concetto di linguaggio di markup, quindi, si basa sulla separazione del contenuto dal modo in cui viene presentato, consentendo di strutturare le informazioni in modo logico e coerente per il web.

Per prendere confidenza con il linguaggio Html ti consiglio di installare un semplice editor di codice gratuito. Io, per esempio, mi trovo bene con Notepad++ che è appunto gratis.

Quando crei un link per la prima volta famigliarizzerai con questi quattro elementi:

  1. Anchor text: è il testo di ancoraggio ovvero letteralmente le parole o la frase sulle quali inserirai il link.
  2. Href: (abbreviazione di “Hypertext REFerence”) indica l’URL o il percorso della risorsa a cui l’utente verrà indirizzato quando clicca sul link.
  3. Target: è la destinazione del tuo sito web ovvero dove andrà a puntare. Se non modifichi questo elemento andrai ad aprire il tuo link nella finestra o tab del browser che stai già utilizzando. Viceversa, se imposti il target _blank andrai ad aprire il link in una nuova finestra. Ti consiglio di utilizzare sempre il target _blank se vuoi rimandare i tuoi lettori ad una nuova pagina: in questo modo ti assicurai che l’utente non abbandoni il tuo sito web mentre da sfogo a tutta la sua curiosità mentre naviga internet.
  4. Rel: attributo che fornisce informazioni aggiuntive sulla relazione tra la pagina corrente e la risorsa collegata. Viene utilizzato principalmente dai motori di ricerca e dai browser per capire il contesto e il significato del collegamento. L’attributo rel può assumere i seguenti valori:
    1. – rel=”nofollow”`: indica ai motori di ricerca di non seguire il link, ossia di non trasferire “autorità” o “peso” SEO alla pagina collegata.- rel=”noopener”` e `rel=”noreferrer”`: questi valori sono spesso utilizzati per motivi di sicurezza quando si apre un link in una nuova scheda o finestra (`target=”_blank”`). Impediscono che la nuova pagina possa accedere alle informazioni sulla pagina di origine e prevenire eventuali attacchi di tipo “tabnabbing”.- rel=”canonical”`: indica che la pagina corrente è una copia o variazione di un’altra pagina principale, aiutando i motori di ricerca a evitare contenuti duplicati.
    1. – rel=”author”` o `rel=”me”`: utilizzati per indicare la relazione tra il link e l’autore o il profilo personale del proprietario.

Se sei alle prime armi con l’Html difficilmente ti capiterà di utilizzarlo. Ma se già hai un po’ di conoscenze web ed interesse per la SEO, ti rimando alla mia precedente guida sull’uso dei link esterni nofollow.

Esempio

Se vuoi creare un link esterno alla ricetta del tiramisù che si apra in una nuova finestra senza trasferire autorevolezza a livello di motori di ricerca il relativo codice avrà questo aspetto.

<a href=”https://www.sitoricette.it/ricetta-tiramisu” target=”_blank” rel=”nofollow”>Ricetta del Tiramisù</a>

Creare un link in WordPress

Da molti anni ormai per la creazione di siti internet e più nello specifico per la creazione di pagine web si utilizzano i CMS (Content Management System) o sistemi di gestione contenuti. Tra essi il più famoso ed utilizzato è sicuramente WordPress che ad oggi è installato sul 39,6% dei siti web.

L’utilizzo di WordPress rende la creazione e la modifica delle pagine web estremamente intuitiva anche per coloro che non hanno conoscenze di Html. Qui di seguito quindi ti mostrerò quanto sia facile creare un link con WordPress riportandoti direttamente gli screenshot dei vari steps, riferito all’editor di testo Gutenberg.

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.

editor-link

Clicca poi sull’icona a forma di catenella proposta dall’editor di testo. A questo punto potrai inserire l’indirizzo della pagina da linkare (se ad esempio si riferisce ad un link esterno) oppure ricerca all’interno del sistema WordPress, una pagina o articolo già presente all’interno del sito web sul quale stai lavorando.

cerca-o-digita-url

Se stai impostando un link esterno (come ho spiegato qui sopra) è opportuno che una volta cliccato il link si apra in una nuova pagina. Per questa ragione selezione la check box “Apri in una nuova scheda“.

apri-nuova-scheda

Dopo aver eseguito questi passaggi potrai confermare cliccando il pulsante Invio.

Considerazione finali e take aways.

Spero che questa guida su come inserire i link ipertestuali ti sia stata utile. Si tratta di un tutorial per principianti ma a volte i problemi più banali sono proprio quelli che ci rubano più tempo. Se però per la tua gestione del tuo sito web preferisci affidarti ad un professionista allora posso affiancarti con una consulenza come webmaster ad Udine ed in tutta Italia.

Laura Musig SEO UdineLaura Musig

Web Designer e SEO Freelance a Udine o se preferite web designer SEO. Nel 2001 decisi di sezionare un sito web per vedere cosa c’era dentro, da allora creo e gestisco siti web. Lettrice onnivora, con un fisiologico bisogno di scrivere e di ballare.

Come diventare SEO:


Corso SEO

Ho inoltre raccolto le risorse più utili di questo blog per aiutare chi sta cercando di capire come si diventa SEO Specialist:

SEOZoom

Blog SEO e ultime news

In questa sezione propongo periodicamente approfondimenti a tema SEO e web marketing. Segnalo anche gli ultimi lavori di creazione siti web ad Udine e di posizionamento sui motori di ricerca. 

Perchè non leggi anche questi post?

Leggi tutti i post dal mio blog seo