In qualità di imprenditore, sei sempre alla ricerca di modi per migliorare la soddisfazione degli utenti sul tuo sito Web WordPress. La prossima metrica nel mirino: la frequenza di rimbalzo.
Un’elevata frequenza di rimbalzo potrebbe non essere un motivo di panico. La frequenza media di rimbalzo è di circa il 50,9%, a seconda del settore. Per i siti di e-commerce, è del 54,54%.
Ad esempio, forse il tuo sito web è così ben progettato che gli utenti ottengono rapidamente le informazioni di cui hanno bisogno e se ne vanno. Questo conta ancora come un rimbalzo.
Ma troppi rimbalzi potrebbero anche indicare un sito web mal strutturato, quindi è una buona idea migliorare il più possibile questa metrica.
Migliorare l’esperienza utente (UX) è un modo infallibile per ridurre la frequenza di rimbalzo e l’aggiunta di link di ancoraggio è un modo sorprendentemente efficace per farlo.
Che cos’è un collegamento ipertestuale?
Prima di parlare di più sui link di ancoraggio, dobbiamo esaminare cos’è un collegamento ipertestuale.
Probabilmente conosci già questi link: testo colorato o sottolineato che, se cliccato, ti trasporta su un’altra pagina web. Questi si differenziano per i link interni, che rimandano allo stesso sito web, e per i link esterni, che rimandano a un sito web separato.
L’anatomia di un collegamento ipertestuale include il testo visibile, noto come testo di ancoraggio, e l’URL (Uniform Resource Locator ) a cui si collega. Ad esempio, nella frase “visita Bluehost per un web hosting veloce”, la frase sottolineata “visita Bluehost” è il testo di ancoraggio.
In HyperText Markup Language (HTML), quel collegamento ipertestuale sarebbe simile al seguente:
<a href=”https://www.bluehost.com/”>visita Bluehost</a>
Che cos’è un link di ancoraggio?
I link di ancoraggio, spesso chiamati salti di pagina o link di salto, possono aiutare gli utenti a navigare rapidamente in una pagina. A differenza dei link interni ed esterni, i link di ancoraggio ti mantengono sulla stessa pagina mentre ti spostano in una sezione specifica.
L’anatomia di un collegamento di ancoraggio è molto simile a quella di un tipico collegamento ipertestuale. Anche se in seguito approfondiremo come creare manualmente un link di ancoraggio, ecco un esempio di link di ancoraggio in azione dal nostro articolo su come strutturare un sito web:
Dopo aver fatto clic su un collegamento nell’indice, passerai direttamente a quella sezione della pagina e vedrai cambiare l’URL nella barra degli indirizzi. In questo esempio, facendo clic sul link di ancoraggio “Che cos’è la struttura del sito web” si cambia l’URL da https://www.bluehost.com/blog/website-structuring a https://www.bluehost.com/blog/website-structuring/#What-Website-Structure-Is.
Perché dovresti usare i link di ancoraggio
L’inclusione di link di ancoraggio negli articoli e nelle pagine è una piccola modifica, ma può avere un impatto significativo. Ecco solo alcuni dei vantaggi:
- UX migliorata: I link di ancoraggio semplificano i menu di navigazione e l’organizzazione del sito web, consentendo agli utenti di trovare rapidamente ciò che stanno cercando. Una buona UX soddisfa i visitatori e aumenta le possibilità che rimangano sul tuo sito web.
- Maggiore coinvolgimento: Gli utenti frustrati che lottano per aggirare il tuo sito web tendono a rimbalzare. Anche se ci vuole un secondo di troppo per trovare quello che stanno cercando, potrebbero andarsene. I link di ancoraggio consentono loro di trovare rapidamente e facilmente ciò che desiderano senza dover scorrere una pagina enorme e rimarranno più a lungo sul tuo sito web mentre leggono e navigano.
- Migliore ottimizzazione per i motori di ricerca (SEO): I link di ancoraggio sono fondamentali per organizzare la tua pagina in un modo che gli indicizzatori dei motori di ricerca possano capire. L’anchor text descrittivo può migliorare la SEO dicendo a Google di cosa tratta la tua pagina. Inoltre, i tuoi link di ancoraggio potrebbero apparire nella parte inferiore dei risultati della Ricerca Google, offrendoti maggiori opportunità di ottenere clic.
- Accessibilità e reattività: Gli aiuti alla navigazione possono essere di grande aiuto a coloro che ne hanno bisogno. Le persone che utilizzano screen reader e altri dispositivi di assistenza troveranno il tuo sito web più accessibile quando utilizzi i link di ancoraggio. Aiutano anche i visitatori su schermi mobili più piccoli a navigare facilmente in una pagina lunga.
In breve, i link di ancoraggio aumentano il coinvolgimento e la soddisfazione degli utenti, portando potenzialmente a più tempo trascorso a navigare sul tuo sito web e a una frequenza di rimbalzo ridotta.
Quando dovresti usare i link di ancoraggio
Hai bisogno di aiuto per determinare dove posizionare i link di ancoraggio sul tuo sito web? Ecco alcune idee:
- Sommario (ToC): Su pagine lunghe suddivise da vari titoli, come gli articoli, è una buona idea avere un indice che possa saltare direttamente a qualsiasi sezione.
- Elenchi e indici: Quando si dispone di un documento con molte singole sezioni, ad esempio un indice o una pagina di domande frequenti, è possibile disporre di collegamenti di ancoraggio che puntano a ciascuna voce o gruppo di voci.
- Torna all’inizio/alla fine: Un link rapido che porta gli utenti all’inizio o alla fine della pagina è spesso apprezzato, soprattutto se non si dispone di un menu o di un’intestazione adesiva, che rimane al suo posto durante lo scorrimento.
- Vai all’invito all’azione (CTA): Indirizza gli utenti verso CTA essenziali. Ad esempio, consenti agli utenti di accedere direttamente al modulo di contatto.
- Pagine di destinazione: Semplifica la navigazione su pagine di destinazione o siti Web di una pagina con collegamenti di ancoraggio.
Sfide dell’utilizzo dei link di ancoraggio
Sebbene i link di ancoraggio siano utili, è necessario implementarli correttamente o si rischia di avere un impatto su UX, SEO e accessibilità. Fai attenzione a questi potenziali problemi:
- SEO danneggiato: I link sono essenziali per la SEO e gli anchor link non fanno eccezione. Tuttavia, i link devono essere utilizzati in un certo modo per aiutare il posizionamento nei motori di ricerca. Link di salto mal organizzati, anchor text scritto male o vuoto o codice HTML non scansionabile potrebbero danneggiare la tua SEO.
- Disordine degli URL: I link di ancoraggio mal impostati e organizzati possono ingombrare l’URL. Gli URL puliti sono molto più facili da usare.
- Problemi di accessibilità: Sebbene i collegamenti di salto possano aiutare con l’accessibilità, potrebbero essere un ostacolo se non li implementi in linea con le Linee guida per l’accessibilità dei contenuti Web (WCAG). Ad esempio, potresti voler aggiungere un link “salta navigazione” che consenta agli utenti con screen reader di passare direttamente al contenuto della pagina principale.
- Scarsa reattività: I collegamenti di collegamento possono funzionare in modo diverso su dispositivi diversi. Se non ti assicuri che questi collegamenti funzionino su più dispositivi, alcuni utenti potrebbero avere una brutta esperienza.
- Collegamenti interrotti: L’aggiornamento dei link di salto quando si aggiungono o si rimuovono sezioni ai contenuti è importante per evitare collegamenti interrotti e una cattiva UX.
- Problemi tecnici: I link di salto possono introdurre problemi come un comportamento di scorrimento conflittuale che porta a problemi visivi o elementi di pagina come intestazioni adesive che coprono parte del contenuto.
- Uso eccessivo del collegamento di ancoraggio: Sebbene i link di ancoraggio possano essere utili, utilizzarli su pagine brevi che non ne hanno bisogno o aggiungerne troppi in una pagina può diventare opprimente.
Fortunatamente, molti di questi problemi hanno soluzioni facili. Tienili a mente quando aggiungi link di ancoraggio al tuo sito web.
Come creare link di ancoraggio in WordPress
Esistono diversi modi per aggiungere link di ancoraggio in WordPress, dalla creazione manuale con HTML al semplice utilizzo degli editor integrati. Ecco diversi tutorial per guidarti attraverso di esso.
Crea link di ancoraggio nell’editor a blocchi di Gutenberg
Per prima cosa, creiamo un link di ancoraggio utilizzando l’editor a blocchi di Gutenberg, passo dopo passo.
Passaggio 1: aggiungi il blocco a cui vuoi saltare
Può trattarsi di un’intestazione, di un blocco di paragrafo, di un’immagine o di qualsiasi altra cosa.
Passaggio 2: apri la scheda Impostazioni e fai clic sul menu a discesa Avanzate
Puoi trovare la scheda Impostazioni nell’angolo in alto a destra e il menu a discesa Avanzate nel pannello aperto.
Passaggio 3: trova la casella di input Ancoraggio HTML
Questo sarà nella scheda Avanzate. Se non lo vedi, prova un tipo di blocco diverso, come un’intestazione.
Digita un nome nella casella di ancoraggio HTML, assicurandoti che sia univoco rispetto a qualsiasi altro ancoraggio della pagina. Puoi anche usare alcuni simboli, come trattini e punti. Ricorda che questo apparirà nell’URL quando si fa clic sul link di ancoraggio.
Passaggio 4: collega il tuo ancoraggio
Per fare ciò, aggiungi il testo, l’immagine o il pulsante che diventerà il tuo link di salto cliccabile.
Evidenzialo, seleziona il pulsante di collegamento e digita l’ancora HTML che hai impostato in precedenza, con un hashtag davanti. Se il tag di ancoraggio era “esempio”, digita “#example”.
Provalo in un’anteprima e dovresti saltare immediatamente al punto di ancoraggio che hai impostato.
Aggiungere collegamenti di ancoraggio nell’editor classico
Se preferisci l’editor classico, qui è possibile creare anche link di ancoraggio in WordPress. Il processo è un po’ più complicato ma comunque relativamente semplice.
Passaggio 1: passa all’editor di testo
Nell’angolo in alto a destra dell’area di modifica, vedrai due schede, Visivo e Testo. Fare clic su Testo per passare da un all’altro.
Passaggio 2: Aggiungere l’ID di ancoraggio
Trova l’elemento a cui desideri saltare. In questo esempio, stiamo utilizzando un’intestazione simile alla seguente:
<h2>Anchor Link 2</h2> Aggiungi un tag “id” con il nome desiderato per l’ancoraggio. Ecco come dovrebbe apparire:
<h2 id="anchor-link-two">Anchor Link 2</h2> 
È possibile utilizzare questo tag ID in modo simile nella maggior parte degli attributi HTML. Ecco come apparirebbe in un paragrafo tipico.
<p id="anchor-link-two">Anchor Link 2</p> Passaggio 3: collega il tuo ancoraggio
Torna all’editor visivo e aggiungi l’elemento su cui gli utenti faranno clic per passare alla sezione desiderata.
Evidenzialo, seleziona il pulsante di collegamento e quindi digita l’ID di ancoraggio che hai impostato in precedenza, oltre a un hashtag. In questo esempio, digitiamo “#anchor-link-two”.
Come con l’editor Gutenberg, usa la schermata di anteprima per testarlo e assicurarti che funzioni.
Creare manualmente i link di ancoraggio con HTML
Analogamente all’esempio precedente, è possibile utilizzare l’HTML per creare direttamente un link di ancoraggio. Ecco come si fa.
Passaggio 1: crea un tag di ancoraggio
Innanzitutto, assegna un nome all’ancora. Puoi farlo con il tag HTML “id”, che può essere posizionato quasi ovunque. Ecco alcuni esempi:
• <a id="anchor-example"></a>
• <h1 id="anchor-example">Heading example</h1>
• <p id="anchor-example">Example text.</p>
• <span id="anchor-example"></span>Passaggio 2: collegamento al tag di ancoraggio
Crea un collegamento che salterà all’ancoraggio specificato quando fai clic. Assicurati di utilizzare un simbolo hashtag davanti all’ID. Un esempio:
<a href="#anchor-example">Example link.</a> Passaggio 2: collegamento al tag di ancoraggio
Crea un collegamento che salterà all’ancoraggio specificato quando fai clic. Assicurati di utilizzare un simbolo hashtag davanti all’ID. Un esempio:
<a href="#anchor-example">Example link.</a>Passaggio 3. Inserisci il codice HTML
WordPress ti consente di modificare l’HTML in varie aree del tuo sito Web e i plug-in di WordPress possono offrire ancora più opzioni. Abbiamo già spiegato come accedere all’HTML nell’editor classico. Ci sono alcuni altri modi.
È possibile modificare l’HTML nell’Editor blocchi aggiungendo un blocco, selezionandolo, facendo clic sui tre punti verticali e selezionando Modifica come HTML.
È inoltre possibile aprire l’editor di codice facendo clic sui tre punti verticali nell’angolo in alto a destra dello schermo e scegliendo l’editor dal menu a discesa.
Infine, puoi modificare l’HTML del tema accedendo a Strumenti > Editor di file del tema, anche se non è consigliabile modificarlo direttamente. Invece, puoi impostare un tema figlio.
Aggiungere link di ancoraggio a una voce di menu di WordPress
È anche possibile aggiungere link di ancoraggio a un menu di WordPress. Questi funzioneranno proprio come qualsiasi altro collegamento di salto. L’uso di questo è alquanto limitato, ma potresti trovarlo utile su siti Web di una pagina.
La combinazione di questo con il plug-in Conditional Menus ti consente di creare menu con link di ancoraggio su pagine specifiche, come la tua home page o le pagine di destinazione. Ecco come configurarlo:
Passaggio 1. Creare un ID di ancoraggio
Consulta le istruzioni riportate sopra per sapere come creare manualmente un link di ancoraggio. Trova l’intestazione, il testo o l’immagine a cui desideri passare e aggiungi l’attributo ID di ancoraggio utilizzando HTML.
Passaggio 2. Aggiungi link di ancoraggio al menu
Nella dashboard di WordPress, vai a Menu Aspetto>. Crea un menu, quindi fai clic sul menu a discesa Link personalizzati. Inserisci l’ID di ancoraggio che hai creato, con un hashtag davanti, quindi fai clic su Aggiungi al menu.
Ricorda, questo non funzionerà correttamente sulle pagine senza l’ID di ancoraggio, quindi creare un menu globale come questo su un sito Web multipagina non è una buona idea.
Passaggio 3. Imposta le condizioni
Una volta creato il menu, fai clic sulla scheda Gestisci posizioni . In una delle posizioni di menu fornite, fai clic su + Menu condizionale, quindi su + Condizioni. È possibile impostare le condizioni in modo che il menu appaia solo su determinate pagine.
Usa un plugin di WordPress per aggiungere link di ancoraggio
Infine, puoi installare un plug-in se tutti i metodi di cui sopra richiedono troppo tempo.
Molti plugin possono aiutarti a creare link di ancoraggio, inclusi i link di ritorno all’inizio, ma evidenziamo uno dei migliori: Easy Table of Contents.
Questo plugin funziona con Gutenberg, l’editor classico e persino i page builder. Puoi inserire manualmente i sommari o configurarli in modo che li inserisca automaticamente in ogni post e pagina del blog.
Best practice per i link di ancoraggio
Ora che sai come creare link di ancoraggio in WordPress, segui questi suggerimenti per implementarli bene.
Posiziona i link di ancoraggio in modo strategico
Quando implementi i link di ancoraggio, inseriscili nelle pagine corrette. Che si tratti di un sommario o di un modo per sfogliare rapidamente le domande frequenti, dai la priorità all’UX prima di tutto.
Quando implementi i link di ancoraggio, inseriscili nelle pagine corrette. Che si tratti di un sommario o di un modo per sfogliare rapidamente le domande frequenti, dai la priorità all’UX prima di tutto.
Inoltre, considera l’esperienza utente su tutti i dispositivi e dove i collegamenti di ancoraggio potrebbero avvantaggiare gli utenti mobili. Qualcosa che si adatta bene al monitor di un computer può sembrare molto più opprimente su un telefono.
Utilizzare l’anchor text corretto
L’anchor text è importante qui come per qualsiasi link interno o esterno. Un buon anchor text migliorerà la SEO aiutando i motori di ricerca a classificare la struttura della tua pagina e mantenendo le cose intuitive per i visitatori.
Usa una formulazione chiara e diretta in modo che gli utenti sappiano esattamente dove li porterà un link di salto. Ad esempio, se stai utilizzando un sommario, usa una dicitura identica alle intestazioni a cui ogni link ti salta. Evita parole generiche come “clicca qui”.
Evita il disordine
Mantieni un layout strutturato utilizzando i link di ancoraggio per organizzare i tuoi contenuti. Resisti alla tentazione di abusare dei link di ancoraggio su pagine che non ne hanno bisogno o di utilizzare troppi link di ancoraggio su una pagina. Di solito sono sufficienti un singolo sommario e un link di ritorno all’inizio.
Inoltre, assicurati che i tuoi link di ancoraggio non si aprano in una nuova scheda, il che è controproducente.
Metti alla prova i tuoi link di ancoraggio
Testa regolarmente i tuoi link di ancoraggio, soprattutto dopo aver aggiornato i contenuti o modificato le intestazioni. Prova i link di ancoraggio su più dispositivi e browser, inclusi gli screen reader.
Considera l’UX generale qui. Lo schermo sembra angusto o disordinato dopo lo scorrimento? Hai bisogno di più spazi bianchi? Il testo è nascosto sotto l’intestazione superiore adesiva?
Stile ai tuoi link di ancoraggio
Distingui i link di ancoraggio dai link interni o esterni attraverso l’etichettatura o lo stile. Prendi in considerazione l’impostazione di link di ancoraggio “appiccicosi” che seguono gli utenti mentre scorrono piuttosto che quelli nel contenuto stesso o la creazione di fisarmoniche che nascondono ordinatamente il tuo indice sotto un elemento cliccabile.
Nel complesso, chiarisci che questi collegamenti di salto aiutano l’utente a navigare nella pagina.
Considerazioni finali: come creare link di ancoraggio in WordPress
Migliorare l’UX è sempre un buon obiettivo. Gli utenti soddisfatti rimangono più a lungo, navigano più pagine e, in definitiva, hanno maggiori probabilità di diventare clienti fedeli.
I link di ancoraggio, anche se una caratteristica minore, possono avere un impatto significativo. Questo è solo un piccolo ma efficace modo per migliorare l’UX del tuo sito Web WordPress.
Un altro modo per migliorare l’esperienza utente è utilizzare un provider di hosting più veloce in modo che le pagine a caricamento lento non facciano sì che i visitatori facciano clic su di esso.
Bluehost offre un hosting WordPress conveniente che include una rete di distribuzione dei contenuti (CDN) Cloudflare per prestazioni e velocità massime. Offriamo anche una configurazione rapida e semplice e un’assistenza 24 ore su 24, 7 giorni su 7, in modo da avere sempre accesso all’assistenza quando ne hai bisogno.
Scrivi un commento