Come usare gli HTML anchor per migliorare la UX

Kelly Lyons

feb 24, 20235 min di lettura
HTML anchor
Condividi

INDICE

Che cos’è un HTML anchor?

Nel codice HTML si usano di solito gli anchor tag (o tag “a”) per creare collegamenti ipertestuali. Gli anchor tag modificati con l’attributo “href” creano link cliccabili che rinviano ad altre pagine del sito o ad altri siti.

Si può usare l’anchor tag anche per creare anchor link. Gli anchor link (o “jump” link) collegano o permettono all’utente di “saltare” ad altre sezioni della stessa pagina. 

Quando crei link testuali con il tag “a”, devi usare un qualche tipo di anchor text. L’anchor text è la parte cliccabile del link. Google usa questo testo per ricavare informazioni sul link e sul contenuto a cui fa riferimento.

Sicuramente aiutano a migliorarla. Vengono usati per navigare attorno a una pagina web e sono responsabili della qualità dell’esperienza di browsing.

Gli anchor link vengono usati anche nelle Tabelle dei contenuti delle pagine lunghe e/o visivamente dense. Quando il lettore finisce su una pagina, vuole sapere subito se le informazioni che contiene sono utili o rilevanti per la sua ricerca. 

Una sezione della Tabella dei contenuti che contenga anchor link chiari e cliccabili riassume la pagina e aiuta il lettore a “saltare” subito alla sezione che gli interessa di più.

Gli anchor link di per sé potrebbero non avere un impatto significativo sul ranking con Google, ma aiutano a migliorare la user experience e a guadagnare snippet in primo piano i quali a loro volta, nel tempo, incrementano il ranking.

Nel 2021, Google ha lanciato l’update del suo algoritmo Core Web Vitals enfatizzando la user experience come fattore di ranking di un sito. Gli ambiti principali dell’update comprendono l’interattività dell’utente. Ciò significa che Google presta più attenzione al modo in cui gli utenti interagiscono con le pagine web, compresa la durata della loro permanenza.

Se l’utente non è in grado di capire subito di cosa tratta la pagina, è probabile che la abbandoni, aumentando la frequenza di rimbalzo. 

Anni fa Google osservava che i jump link di una pagina web potevano diventare snippet in primo piano sulle SERP. Quando questo succede, gli utenti trovano una lista di anchor link negli snippet che segnalano che la pagina è utile e rilevante per le loro ricerche. 

Nel seguente esempio troviamo una lista di anchor link (in formato lista) tratti da una pagina web e convertiti in snippet in primo piano:

ricerca google mostra una lista di anchor links convertiti in snippet

Quando si creano anchor link, Google può anche includerli nello snippet della ricerca della tua pagina. Nel seguente esempio, Google include un anchor link a “Nutritional guidelines” su una pagina che parla di acidi grassi trans, in modo che gli utenti possano saltare direttamente a quella sezione della pagina dalla SERP:

esempio di risultati SERP
Credit: Google

Pertanto, anche se non verrai penalizzato se non usi gli anchor link, può valere la pena includerli nella pagina quando serve. Puoi usarli per raccontare di più a Google sul contenuto della tua pagina, e aiutare i lettori a trovare e accedere alle parti che voglio leggere. 

Si può aggiungere un anchor link in HTML in due passaggi:

1. Assegnare all’attributo ID il tag <a>

Si può collegare l’ID a una testata con il tag a in un processo simile che usiamo per creare i collegamenti ipertestuali. 

Supponiamo di aver creato una pagina web su soluzioni SEO e di volerci linkare a una sezione sulla SEO locale. Dobbiamo creare un’intestazione H2 per la sezione, quindi aggiungere un anchor link con il tag a:

<a id="localSEO"><h2>Local SEO</h2></a>

In via alternativa, possiamo includere l’anchor ID nel tag dell’intestazione:

<h2 id="Local-SEO">Section name</h2>

Per aggiungere un anchor ID a un’immagine, bisogna includerlo nel tag HTML dell’immagine come attributo:

<img id="anchor-name" src="/images/localseo.jpeg"/>

Per creare l’anchor link, dovrai usare l’attributo href. Tuttavia, invece di aggiungere un link a una pagina web, puoi usare l’anchor ID con il segno (#):

<a href="#localSEO">Local SEO Section</a>

Se l’utente clicca sul link di cui sopra, “salterà” alla testata H2 con l’ID "SEOlocale".

Puoi aggiungere gli anchor link a qualsiasi testo della tua pagina. Tuttavia, è meglio collegare gli anchor link alle intestazioni e ai sottotitoli. Entrambi vanno bene per riassumere il contenuto della pagina per i lettori e i crawler dei motori di ricerca.

Quando aggiungi gli anchor link alle tue testate, il testo della testata raddoppia rispetto all’anchor text del link. Pertanto è importante scegliere intestazioni e sottotitoli rilevanti, ricchi di parole chiave, che raccontino ai lettori e ai motori di ricerca di cosa si parla in quella sezione.

Scegli una frase chiave per i tuoi anchor link. I link con una sola parola a volte possono confondere e non danno a Google abbastanza contesto sul link o sulla pagina a cui si riferiscono. 

Usa parole descrittive che diano al lettore l’idea di quello che verrà dopo che ci hanno cliccato. Se il tuo anchor link si intitola per esempio “SEO locale”, i lettori si aspetteranno di saltare alla parte della pagina che parla di SEO locale. 

Puoi usare lo strumento Topic Research per cercare idee di possibili testate per la tua pagina. Inizia dalla parola chiave che vuoi usare e seleziona un dominio target. 

Se vuoi creare contenuti che si rivolgano ai lettori in aree geografiche o paesi diverso dal tuo, usa la funzionalità di ubicazione per impostare il paese, la regione, la città e la lingua di destinazione: 

schermata del topic research tool

Il tool ti restituirà i sottoargomenti rilevanti e una lista di parole chiave correlate per ciascun argomento:

Puoi cliccare su ciascuna pagina per leggere gli articoli su ogni argomento, in modo da comprendere meglio come gli altri articoli posizionati strutturano le loro testate e titoli.

Anche il SEO Content Template può aiutarti a scegliere le intestazioni giuste per il tuo contenuto. Il tool analizza i primi 10 articoli che si posizionano con le tue parole chiave, quindi crea un modello consigliato che puoi usare per creare il tuo contenuto.

Il modello comprende suggerimenti in merito a leggibilità, lunghezza del testo, backlink e testate:

Schermata del SEO content template

Spunti chiave

  • Gli anchor link strutturati favoriscono una migliore user experience e possono aiutare a ottenere snippet in primo piano.
  • Crea testate rilevanti, arricchite da parole chiave, in modo che i lettori e i motori di ricerca possano facilmente comprendere la struttura delle tue pagine web.
  • I tool di content marketing ti aiuteranno a sviluppare un contenuto favorevole alla SEO e facile da leggere. 
Condividi
Author Photo
Writer, editor, SEO strategist, and supporter of the Oxford comma. There‘s little I enjoy more than lounging on my couch playing video games and snuggling with my dog.
Maggiori info