Hosting WordPress preinstallato e gestito con il 50% di sconto. Scopri la promo
Con il termine ancora HTML intendiamo i link che collegano sezioni diverse della stessa pagina web. A differenza di altri link non lasci la pagina ma rimani sulla stessa risorsa. Per creare una relazione bisogna usare indicare un punto di arrivo. E ovviamente uno di partenza.
Questi link per creare salti nella pagina vengono usati per scopi differenti. Ad esempio puoi sfruttare le ancore per menu interni, utili per gli articoli più lunghi, ma anche per la navigazione nelle landing page o dei siti monopagina che sfruttano questa soluzione nel menu principale.
Argomenti
Questo tipo di collegamento ipertestuale si differenzia dai normali link interni o in uscita (outbound) per uno spostamento che rimane nella pagina aperta.
Queste soluzioni si usano per consentire all’utente di muoversi facilmente in una risorsa particolarmente impegnativa, magari lunga e difficile da fruire.
Anche se questi elementi non possono essere definiti come link a tutti gli effetti, la formattazione nel testo non presenta differenze rispetto a quelli interni (tra pagine diverse dello stesso sito) e in uscita (verso risorse differenti).
Da leggere: caratteri da evitare nell’URL
Per creare un link all’interno della stessa pagina, per collegare due sezioni differenti e generare un indice generico o una scorciatoia, hai bisogno di due elementi essenziali:
Il primo passaggio avviene attraverso l’attributo name che forma una sorta di etichetta da richiamare poi con il classico href (Hypertext REFerence). Quindi, per creare un’ancora interna bisogna procedere in questo modo con il codice HTML, ecco la soluzione con i relativi tag:
<a href="#arrivo">Partenza</a>
<a name="arrivo">Arrivo</a>
Come puoi ben vedere il link href porta su una sezione della pagina contraddistinta con un’etichetta che viene data dal name. Il link viene formato grazie all’inserimento del cancelletto prima della parola scelta per creare il punto di arrivo che verrà indicato anche nell’URL della pagina web. Ecco l’esempio dell’indirizzo verso un segnalibro specifico.
www.miosito.it/permalink#arrivoIl simbolo di cancelletto (#) porta il browser su un’area specifica della risorsa. Si usa, dal punto di vista tecnico, per separare l’URI da un identificatore relativo a una sezione.
La presenza di link interni alla pagina stessa non passa inosservata al crawler di Google. Infatti le pagine con menu hanno dei benefici nella serp mostrando i sitelink. Che vengono inseriti alla base dello snippet e come scorciatoia se l’header corrisponde a una query precisa.
Questo non ha vantaggi in termini di ranking ma si presenta meglio agli occhi dell’utente e aumentano le probabilità di attirare l’attenzione di chi effettua la ricerca su Google.
Diciamolo, aggiungere in automatico un table of content per ogni articolo pubblicato sul blog non è facile con questa soluzione. Ecco perché è possibile, almeno su WordPress, inserire ancore interne su ogni header (H2, H3…) in modo automatico grazie a plugin come:
Così puoi gestire il link interni in automatico. Di sicuro non conviene per siti web piccoli o con post brevi, meglio usare plugin solo quando ci sono tanti articoli da trattare e inserire un menu solo con segnaposti HTML diventa un lavoro complesso e difficile da affrontare.
Non tutti sanno che il nuovo editor Gutenberg consente di gestire in modo semplificato il lavoro sugli header. Quindi, oltre a usare i plugin e il codice HTML, se vuoi inserire un link verso un punto specifico della pagina puoi seguire questo semplice passaggio.
In primo luogo evidenzia il titolo di atterraggio. Poi vai, a destra, nella sezione delle opzioni avanzate e definisci il name. Vale a dire l’etichetta. In seguito seleziona l’anchor text che vuoi usare come link e aggiungi solo il cancelletto seguito dall’etichetta scelta. In questo modo è possibile creare un salto di pagina senza plugin e modifiche al codice HTML.
Ovviamente tutto questo si può fare anche per un menu di navigazione nell’header del sito web. Solo che le ancore precedute dall’asterisco si mettono nelle sezioni dedicate ai link personalizzati. Tu hai già seguito questa procedura? Hai domande sul tema?
6 commenti presenti
Vincenzo ha commentato il 2020-08-19 14:05:33
Ciao Riccardo,
ho utilizzato questo sistema su una mia pagina web, ma quando si clicca sul link la pagina viene posizionata non esattamente in corrispondenza del titolo ancorato, come succede su questa pagina, ma un po’ più in basso del titolo, diciamo una ventina di pixel sotto.
Come si fa ad ancorare il link esattamente al titolo del paragrafo? Esiste qualche attributo per farlo?
Grazie in anticipo
Riccardo Esposito ha commentato il 2020-08-22 06:45:42
Ciao, si deve aggiungere un elemento CSSS. Qui danno la soluzione https://github.com/daattali/beautiful-jekyll/issues/69
Nikas ha commentato il 2023-07-13 17:27:03
Caro Riccardo ho un sito fatto con googlesites…mi servirebbe il modo di creare
un ancora di collegamento dal basso pagina a un titolo in alto pagina, quindi
sempre nella stessa pagina. Esempio” VAI SU” che cliccando mi va in alto pagina
Verso un argomento specifico o nome specifico. Una volta usavo Dreamweaver cs8
e ci riuscivo. Adesso con Google site non so come fare. Ho letto il tuo post, ma sarei
grato se tu mi daresti un indicazione facile come fare in Google sites…
Ti ringrazio anticipatamente,attendo tua risposta.
Riccardo Esposito ha commentato il 2023-11-06 06:36:47
Ciao, ti dico la verità: non ho esperienza con i Google Site quindi rischio di darti un’informazione errata per creare il link di cui parli.
Giulia ha commentato il 2023-11-16 18:33:56
Ciao Riccardo,
una domanda questa procedura è attuabile anche per realizzare un menù? Ovvero avendo un sito one page è possibile attribuire esempio alla voce di menù “chi siamo” l’ancor di partenza e alla sezione della stessa pagina l’arrivo sul titolo della sezione “chi siamo”.
Grazie in anticipo
Riccardo Esposito ha commentato il 2023-11-19 04:43:33
Sì, funziona anche con i menu.