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

Link di ancoraggio nell'esempio di Google

Link di ancoraggio nell’esempio di Google

Contro

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

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

Una migliore esperienza utente inizia con un migliore host del sito web. Prova Kinsta gratuitamente.

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

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.


Risparmia tempo e costi e massimizza le prestazioni del sito con:

  • Aiuto immediato dagli esperti dell’hosting WordPress, 24/7.
  • Integrazione di Cloudflare Enterprise.
  • Copertura globale del pubblico con 28 data center in tutto il mondo.
  • Ottimizzazione del sito con il nostro Monitoraggio delle Prestazioni delle Applicazioni integrato.

Tutto questo e molto altro, in un piano senza contratti a lungo termine, con migrazioni assistite e una garanzia di 30 giorni di rimborso. Scopri i nostri piani o contattaci per trovare il piano che fa per te.