Come creare un link interno (ancora) nella pagina HTML


Postato in data Maggio 4th, da Riccardo Esposito in Vita da Webmaster. No Comments

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.

ancora HTML

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.

Cos’è un link ancora HTML

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

Come inserire un’ancora

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:

  • Un’ancora che faccia da arrivo.
  • Un link che si basi su un anchor text.

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#arrivo

Il 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.

Vantaggi SEO delle ancore HTML

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.

serp

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.

Inserire menu di navigazione

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.

Come creare ancore in WordPress

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. Ecco il video:

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?





Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*

Shares