I link di ancoraggio (o link interni) non sono un argomento di cui si discute molto, ma ci hanno dato ottimi risultati! Oggi vedremo come creare link di ancoraggio in WordPress e vi spiegheremo il motivo per cui potreste voler iniziare a utilizzarli. In base alla nostra esperienza, i link di ancoraggio possono contribuire a migliorare l’esperienza utente, rendono molto più facile la navigazione dei contenuti lunghi e danno persino un leggero vantaggio nei risultati di Google. E chi non vuole un vantaggio gratuito su Google? 😉

Esempio di un Link di Ancoraggio

Se ancora non avete ben capito cosa sono i link di ancoraggio, non preoccupatevi. Guardate l’immagine di esempio qui sotto. Stiamo usando i link di ancoraggio su ciascuno di questi elementi della lista puntata. Quando fate clic su di essi, arrivate direttamente all’intestazione H2 che contiene quel contenuto. Potete controllare voi stessi più in basso nell’articolo. I link di ancoraggio possono essere usati su qualsiasi cosa, come testi, immagini e intestazioni H1-H6.

Link di ancoraggio
Link di ancoraggio

Su molti siti, i link di ancoraggio vengono usati solo per creare un indice all’inizio degli articolo lunghi. Se conoscete un po’ di CSS, potete dar spazio alla creatività e farli sembrare un po’ più eleganti, come abbiamo fatto sulle nostre landing page.

Link di ancoraggio su un articolo in formato lungo
Link di ancoraggio su un articolo in formato lungo

Su altri siti, è possibile che i link di ancoraggio non si vedano e che vengano usati solo sugli header in modo che i link vadano direttamente alle sezioni specifiche.

Pro e Contro dei Link di Ancoraggio

Solo perché noi stiamo facendo qualcosa, non significa che voi dobbiate fare lo stesso. Ecco alcuni pro e contro da considerare quando usate i link di ancoraggio sul vostro sito WordPress.

Pro

  • Uno dei maggiori vantaggi dei link di ancoraggio è la creazione di una migliore esperienza utente durante la navigazione del sito. Ciò è particolarmente vero quando si tratta di articoli lunghi. Pubblichiamo molti contenuti di approfondimento (oltre 4.000 parole) e scorrerli può diventare una seccatura. L’utilizzo dei link di ancoraggio permette a chi ci legge di saltare istantaneamente alla sezione di suo interesse. Lasciate che i vostri utenti trovino più velocemente ciò di cui hanno bisogno.
  • L’utilizzo di link di ancoraggio sugli header consente di condividere link diretti a diverse sezioni all’interno di un articolo. Questo è fantastico per i social media e anche per i team di supporto. Ad esempio, il team di supporto di Kinsta si affida molto ai link di ancoraggio per gli articoli della Knowledge Base, in modo da poter portare l’utente sul punto esatto da seguire per risolvere un problema. Il nostro team di vendita li utilizza anche per rispondere più rapidamente alle domande relative a Kinsta.
  • Quando si tratta di pagine di risultati dei motori di ricerca (SERP), i risultati possono sempre variare in base a ciò che appare. Tuttavia, abbiamo visto più volte i link di ancoraggio apparire sulla nostra SERP perché li abbiamo usati nei nostri articoli. In questo senso i link sono fantastici perché essenzialmente vi regalano un’altra riga di testo nei risultati organici. Possono anche aiutare ad aumentare il CTR, poiché l’utente potrebbe trovarci un termine relativo alla sua query che non è stato trasmesso nella meta descrizione o nel titolo.
Link di ancoraggio nell'esempio di Google
Link di ancoraggio nell’esempio di Google
  • I link di ancoraggio possono essere usati anche per altre funzioni: pensate ad esempio ai link per ritornare in cima alla pagina che Wikipedia usa insieme alle sue citazioni ^ o note a piè di pagina. [1]

Contro

Anche se pensiamo che i pro siano decisamente superiori ai contro, ecco alcuni contrattempi che potreste voler considerare.

  • I link di ancoraggio o un indice dei contenuti potrebbero diminuire il tempo medio di permanenza sul sito per visitatore. Perché? Perché chi vi legga salta direttamente al contenuto che vuole invece di leggere l’intero articolo. Tuttavia, se fate felici i vostri lettori fin da subito, potreste incoraggiarli a iscriversi alla vostra newsletter o a fare più ricerche su ciò che state vendendo. Quindi questo punto potrebbe essere visto sia come un pro che come un contro.
  • Direttamente collegato al problema di cui sopra, i link di ancoraggio potrebbero avere un impatto sui vostri introiti pubblicitari. I visitatori che saltano direttamente a una certa sezione potrebbero diminuire le impressioni e i clic. I siti che si affidano molto alla pubblicità potrebbero voler fare dei test A/B usando i link di ancoraggio e l’indice dei contenuti.
  • Se state cambiando dominio o avete bisogno di aggiungere reindirizzamenti 301, è importante notare che l’identificatore (#) non viene mai inviato al server. Questo può complicare le cose se decidete di cambiare in corso d’opera i link di ancoraggio. Ci sono modi per aggirare questo problema con JavaScript, ma non è affatto un compito facile.

Transizione del Link di Ancoraggio

Potreste anche pensare di cambiare la transizione del link di ancoraggio. Per impostazione predefinita, i link di ancoraggio salteranno improvvisamente all’ID più in basso nella pagina. Questo può essere fastidioso per alcune persone. È possibile modificare questo passaggio in modo che sia più scorrevole. In realtà è quello che facciamo sul blog di Kinsta. È possibile utilizzare un plugin gratuito come Page scroll to id o aggiungere alcuni CSS al vostro sito, come scroll-behavior: smooth;. Questo post di Stack Overflow contiene alcuni consigli aggiuntivi per chi si occupa di sviluppo.

Come capita spesso quando trattiamo suggerimenti su WordPress, ci sono diversi modi per aggiungere link di ancoraggio nel nostro CMS preferito. Date un’occhiata a questi quattro semplici metodi. E sì, i link qui sotto usano link e testi di ancoraggio. 😁

Il primo modo per creare link di ancoraggio in WordPress è farlo manualmente con l’HTML in ciascuno dei vostri articoli. Creiamone uno per vedere come funzionano.

Passo 1

Create il testo per il vostro link e aggiungeteci sopra un hyperlink come fareste normalmente per qualsiasi altro link.

Creare un link di ancoraggio con HTML
Creare un link di ancoraggio con HTML

Passo 2

Invece di collegarlo a un URL, a un articolo o a una pagina, gli assegnerete un nome di ancoraggio. Gli URI che designano le ancore contengono un carattere “#” seguito dal nome dell’ancora. Potete nominare questa ancora come volete, anche se di solito si consiglia di tenere i nomi brevi e legati al nome effettivo dell’header.

Se si guarda l’anteprima del testo (in HTML), apparirà così:

<a href="#manually-create-anchor-links-wordpress">Come Creare Manualmente i Link di Ancoraggio in WordPress</a>

Ecco un esempio di tutti i link di ancoraggio che stiamo usando in questo post:

<ul>
<li><a href="#manually-create-anchor-links-wordpress">Come Creare Manualmente i Link di Ancoraggio in WordPress</a></li>
<li><a href="#anchor-links-wordpress-plugin">Come creare link di ancoraggio in WordPress con un plugin</a></li>
<li><a href="#anchor-links-wordpress-gutenberg">Come creare link di ancoraggio in WordPress con Gutenberg</a></li>
</ul>

Passo 3

Successivamente, è necessario aggiungere un ID sull’header a cui volete che il link di ancoraggio vi porti. Per farlo è necessario passare alla visualizzazione testo (HTML) nell’editor di WordPress. Sull’header, in questo caso un’intestazione H2, aggiungete l’ID insieme al nome dell’ancora scelto al punto 2. Il nome dell’ancora e l’attributo ID devono essere esattamente gli stessi affinché il link funzioni.

<h2 id="manually-create-anchor-links-wordpress">Come Creare Manualmente i Link di Ancoraggio in WordPress</h2>

Non volete preoccuparvi del codice HTML ogni volta? Non preoccupatevi, ci sono alcuni fantastici plugin gratuiti di WordPress che potete usare per aggiungere facilmente link di ancoraggio e persino un indice a ogni articolo.

Aggiungere un Link di Ancoraggio con un Plugin

Uno dei modi più semplici per aggiungere un link di ancoraggio è tramite il plugin gratuito TinyMCE Advanced. Questo plugin aggiunge fondamentalmente funzionalità extra all’editor con pulsanti di scelta rapida. Al momento in cui scriviamo questo articolo, il plugin ha oltre 2 milioni di installazioni attive con una valutazione di 4,5 stelle su 5.

Plugin WordPress TinyMCE Advanced
Plugin WordPress TinyMCE Advanced

Passo 1

Dopo aver installato e attivato il plugin, andate nel vostro articolo e create un collegamento ipertestuale sul vostro anchor text. Invece di collegarlo a un URL, un post o una pagina, gli assegnerete un nome di ancoraggio e aggiungerete un # prima di esso.

Aggiungere il nome dell'ancora
Aggiungere il nome dell’ancora

Passo 2

Evidenziate l’intestazione a cui desiderate collegare il link. Poi fate clic su “Insert” dal pulsante in alto e selezionate “Anchor”. Questo pulsante appare nell’editor grazie al plugin TinyMCE Advanced.

Aggiungere l'ancora
Aggiungere l’ancora

Passo 3

Inserite il nome dell’ancora che avete scelto al punto 1 e fate clic su “OK”. Questo plugin vi fa risparmiare tempo perché non dovete mai uscire dalla vista dell’editor visuale. Se lo fate manualmente con l’HTML dovete passare dalla vista dell’editor visivo e quella dell’editor di testo (HTML).

ID dell'ancora
ID dell’ancora

Aggiungere di un Indice di Contenuti con un Plugin

Magari volete accelerare ancora di più il processo. 😄 Se state scrivendo molti contenuti di approfondimento e volete sempre includere un indice (liste di link di ancoraggio o jump menu) nei vostri articoli, allora dovreste approfittare di un plugin per l’indice.

Uno dei migliori plugin gratuiti è Easy Table of Contents. Questo plugin genera automaticamente i link di ancoraggio per le vostre intestazioni e vi permette di inserire il vostro indice in qualsiasi punto del vostro articolo con un semplice shortcode. Nel momento in cui scriviamo questo articolo, il plugin ha oltre 30.000 installazioni attive con una valutazione di 4,5 stelle su 5.

Plugin WordPress Easy Table of Contents
Plugin WordPress Easy Table of Contents

Passo 1

Dopo aver installato e attivato il plugin, ci sono alcune impostazioni che probabilmente vorrete modificare. Queste si trovano sotto “Settings → Table of Contents”.

  • L’opzione “Enable support” consente di scegliere su quali tipi di articoli desiderate usare l’indice. Molto probabilmente sarà la tipologia “Posts”.
  • Potete quindi scegliere se desiderate o meno inserire automaticamente un indice oppure farlo manualmente. Vi raccomandiamo di farlo manualmente se i vostri articoli cambiano un po’.
  • L’opzione “Show when” consente di definire il numero di titoli che l’articolo deve avere prima che venga visualizzato un indice. Per esempio, probabilmente non volete che l’indice dei contenuti appaia su un breve articolo del blog, quindi avere almeno quattro o più header nel contenuto è la cosa migliore.
Impostazioni di Easy Table of Contents
Impostazioni di Easy Table of Contents

Passo 2

Per inserire manualmente l’indice, basta inserire lo shortcode [ez-toc] nel punto del post in cui volete che appaia.

Shortcode EZ-TOC
Shortcode EZ-TOC

L’indice viene poi generato automaticamente per tutte gli header del post. Non è fantastico?

Indice dei contenuti in WordPress
Indice dei contenuti in WordPress

È inoltre possibile apportare ulteriori modifiche alle impostazioni relative a cosa deve apparire, esclusioni, aspetto, ecc. Ad esempio, forse avete sempre un paragrafo di riepilogo alla fine dei vostri messaggi (come il nostro “Sommario”). È possibile inserire quell’header nell’elenco delle esclusioni nelle impostazioni in modo che non sia inclusa nell’indice dei contenuti.

Un altro plugin per l’indice dei contenuti che potreste voler controllare è Shortcode Table of Contents. Si tratta di un plugin che è entrato di recente sul mercato, ma è stato sviluppato da James Kemp, che abbiamo avuto il piacere di intervistare.

Aggiungere Automaticamente Link di Ancoraggio sugli Header con un Plugin

Volete semplicemente aggiungere automaticamente i link di ancoraggio su tutte le vostre intestazioni? Allora dovreste dare un’occhiata al plugin gratuito WP Anchor Header. Questo plugin aggiungerà dei link di ancoraggio a tutti gli header dagli H1 agli H6.

Plugin WP Anchor Header
Plugin WP Anchor Header

Si tratta di un plugin molto semplice che non include impostazioni. Basta installarlo, attivarlo e il gioco è fatto. Ogni intestazione otterrà automaticamente un nome di ancoraggio (derivato dal nome dell’intestazione) e una piccola icona di ancoraggio che appare quando passate il mouse sopra. Questo permette ai visitatori di vedere facilmente che c’è un link che possono copiare se lo desiderano.

Link di ancoraggio automatici sugli header
Link di ancoraggio automatici sugli header

Il nuovo editor di Gutenberg è stato lanciato con WordPress 5.0. In questo nuovo editor viene integrato e migliorato il supporto per l’aggiunta di ID di ancoraggio alle intestazioni.

Passo 1

Evidenziate l’header nel blocco di Gutenberg e fate su “Advanced” sul lato destro. Vedrete quindi un’opzione per aggiungere un ancoraggio HTML.

Aggiungere un ancoraggio HTML nell'editor di Gutenberg
Aggiungere un ancoraggio HTML nell’editor di Gutenberg

Passo 2

Se desiderate collegarvi a esso, è sufficiente creare un collegamento ipertestuale sul vostro anchor text. Invece di collegarlo a un URL, un post o una pagina, gli assegnerete un nome di ancoraggio preceduto da un #.

Aggiungere il link di ancoraggio in Gutenberg
Aggiungere il link di ancoraggio in Gutenberg

Non volete creare link di ancoraggio con HTML né installare un plugin? Allora dovreste dare un’occhiata all’estensione gratuita Anchor Links per Chrome. È pienamente compatibile con WordPress, WordPress.com e Medium.

Passo 1

Dopo aver installato l’estensione di Chrome è sufficiente evidenziare l’header su cui volete aggiungere il link di ancoraggio. Quindi fate clic sulla piccola icona dell’estensione Anchor Link di Chrome nella barra degli strumenti del browser.

Estensione per Chrome per aggiungere il link di ancoraggio
Estensione per Chrome per aggiungere il link di ancoraggio

Dietro le quinte, l’estensione crea l’ID dell’ancora (derivato dal nome dell’intestazione). In questo esempio: #Header_1. Quando fate clic sull’icona, questa viene automaticamente copiata negli appunti.

Copiato negli appunti
Copiato negli appunti

Passo 2

Poi andate sul testo a cui volete aggiungere il link di ancoraggio, create un collegamento ipertestuale come fareste normalmente e premete “Paste”.

Aggiungere il link di ancoraggio
Aggiungere il link di ancoraggio

E questo è tutto! L’estensione di Chrome aiuta a rendere il tutto facile e veloce senza dovervi affidare a plugin di terze parti.

Riepilogo

Come potete vedere ci sono molti modi creativi per aggiungere link di ancoraggio in WordPress. Alcuni sono più facili di altri. Se pubblicate contenuti molto lunghi, questo metodo aiuta i vostri visitatori ad arrivare subito ai contenuti desiderati. Abbiamo anche visto che i link di ancoraggio aiutano ad ottenere un “jump to menu” nelle SERP, cosa che aiuta ad aumentare il CTR nei vostri risultati organici.

Usate già i link di ancoraggio sul vostro sito WordPress? Se è così, ci piacerebbe ascoltare la vostra esperienza o i vostri pensieri.

Brian Jackson

Brian ha una grande passione per WordPress, lo usa da più di dieci anni e sviluppa anche un paio di plugin premium. Brian ama i blog, i film e le escursioni. Entra in contatto con Brian su Twitter.