Di Riccardo Esposito | Pubblicato il - Aggiornato il
Un’ancora HTML è un hyperlink che collega due sezioni differenti della stessa pagina con un testo anchor con il markup a name. Consente al lettore di spostarsi da un punto all’altro per evitare sezioni che non interessano.
In una pagina web possono esserci diversi tipi di link HTML. Alcuni collegano ad altre pagine dello stesso dominio, altri invece vanno verso l’esterno. In alcuni casi hanno anche il rel=”nofollow” per togliere valore SEO al collegamento ipertestuale (hyperlink).
Ma forse hai sentito parlare dei link ancora verso sezioni specifiche della stessa risorsa. Di cosa parliamo? Questo è un metodo per creare salti di pagina su WordPress ma anche su altri tipi di CMS. Basta usare il giusto tag HTML per creare dei salti di pagina.
Indice dei contenuti
Cos’è un’ancora HTML, definizione
Nel markup HTML, un’ancora è l’elemento necessario creare collegamenti all’interno di una pagina web. Questi tipi di link interni sono utili per navigare facilmente tra diverse sezioni di una pagina particolarmente lunga, senza dover scorrere manualmente.
Ma a cosa serve avere un’ancora interna per raggiungere sezioni specifiche? Perché è così importante poter linkare un header o un paragrafo particolare della risorsa? Così puoi inserire dei salti di pagina per navigare rapidamente all’interno di una pagina web.
In primo luogo puoi migliorare la leggibilità di contenuti molto lunghi, inoltre hai la possibilità di gestire la la navigazione di un sito landing page, con un’unica pagina (ovvero la home). Nello specifico, grazie alle anchor HTML puoi realizzare dei menu interni. Questo permette anche di creare dei rich snippet con link alle sezioni.
Da leggere: come creare un collegamento tra due pagine web?
Come fare un ancora in HTML?
Il primo metodo per mettere un link di ancoraggio: l’HTML. Può sembrare la soluzione meno pratica, in realtà ti dà massima indipendenza. Per inserire questo collegamento intra-pagina hai bisogno di due elementi: in primo luogo serve un nome identificativo (ID). Ad esempio su un header. Ecco come si mette un jump link in una pagina web:
- Metti un ID a un a href.
- Inserisci lo stesso ID a una sezione.
Questo funziona anche un’immagine, un form di invio email. Poi serve un anchor text, un bottone, un elemento da cliccare. La sintassi da rispettare per il codice HTML è questa:
<a href="https://esempio.com/it/#etichetta">partenza del link</a>
<H2 id="etichetta">Questa è la destinazione del link.</H2">Calcola che puoi inserire un jump link, ovvero un’ancora HTML per effettuare un salto da un punto all’altro della pagina, anche su un’immagine. Se deve essere la destinazione basta usare la formula <img id="etichetta> mentre se vuoi utilizzare il visual come ancora del link è sufficiente inserire il tag HTML all’interno di <a></a>. Un esempio chiaro?
Inserire il salto di pagina su WordPress Gutenberg
La grande novità di WordPress Gutenberg sul tema dei salti di pagina: puoi inserirli senza usare codice HTML. Ad esempio lo puoi fare con gli H2 o H3, per un blocco di testo o un’immagine. Puoi inserire un jump link WordPress anche in uno spazio vuoto.
- Vai sul blocco in questione.
- Nella sidebar a destra vai in Avanzate.
- Aggiungi un’etichetta ID.
Con WordPress Gutenberg puoi aggiungere l’identificativo direttamente nell’editor, senza andare nel codice HTML. Poi devi inserire il link e basta procedere come negli altri casi: seleziona l’anchor text e aggiungi l’ID preceduto da cancelletto.
Ricorda che i salti di pagina su WordPress possono essere usati anche per raggiungere punti specifici di un’altra risorsa. Se, ad esempio, vuoi aggiungere un link interno a una sezione lo puoi fare. Basta inserire come permalink l’ancora specifica.
Qual è la differenza tra un link e un’ancora
Un’ancora HTML e un link standard consentono entrambi di creare collegamenti ipertestuali all’interno di una pagina. La principale differenza è nell’intento d’uso.
Un link di base porta a risorse esterne o pagine che si trovano all’interno del tuo sito o su altri siti. L’attributo href specifica l’URL di destinazione. Ecco un esempio:
<a href="https://www.esempio.com">Ecco il sito di esempio</a>Un’ancora è una specifica forma di link che collega a una posizione all’interno della stessa pagina web. In questo caso, l’attributo href contiene un riferimento all’ID.
<a href="#paragrafo1">Vai al paragrafo 1</a>La differenza principale è nell’attributo href e nella destinazione del collegamento. I link li puoi usare per navigare verso pagine esterne o risorse dello stesso dominio, mentre le ancore sono utili per creare connessioni e menu all’interno della risorsa.
Meglio usare id o name nei jump link?
Puoi inserire tutti i salti di pagina che desideri ma con un ID differente. E assicurati di evitare il tag name. Può essere usato al posto di ID ma non è accettato nell’HTML5. Ricorda tutto questo quando decidi di mettere un link per fare salti di pagine interne.
Da leggere: come inserire link MAILTO
Come linkare un paragrafo specifico con i plugin
Spesso l’idea di creare un salto di pagina per raggiungere un punto specifico non è così generica. Vuoi semplicemente creare un menu interno come quello che vedi in questo articolo. Si tratta di una soluzione utile soprattutto per i long form content.
Basta usare uno dei tanti plugin dedicati alla creazione di un table of content. L’indice dei contenuti si crea in automatico, nella posizione che desideri. Oppure puoi decidere di lasciarlo disattivato e inserirlo dove desideri con uno shortcode. I plugin:
Molti plugin permettono di integrare il table of content con relativi jump link in Gutenberg, aggiungendo nel menu un blocco dedicato proprio alle ancore verso i relativi header. Ricorda che la versione plus di Yoast offre anche un modulo menu.
Categoria: Guide per webmaster