Se pubblichi un articolo lungo e articolato, con tante informazioni, per essere funzionale è consigliato inserire un indice. L’indice dei contenuti permette all’utente di navigare in maniera facile tra gli argomenti trattati senza dover scorrere tutto l’articolo. Inoltre l’indice è molto utile anche in ottica di ottimizzazione SEO, questo perché permette ai crawler dei motori di ricerca (Google, Bing ecc) di comprendere e schematizzare in maniera più efficace il contenuto del tuo articolo.
Cos’è un indice e come si crea
L’indice è un menù che permette di andare direttamente al paragrafo che ci interessa. Dal punto di vista tecnico, l’indice non è altro che un elenco di anchor text, cioè di link che portano a specifiche parti dell’ articolo.
Se nella scrittura cartacea è prassi leggere l’intero testo, per le ricerche online gli utenti cercano una risposta veloce, e quindi vanno individuare le parole chiave di loro interesse. È proprio in questo caso che l’indice aiuta l’utente. Con l’indice gli utenti possono navigare in maniera rapida e semplice al capitolo di loro interesse senza dover leggere tutto il testo.
Su WordPress la creazione di un indice può avvenire principalmente in due modi: con codice HTML oppure tramite un plugin.
Non esiste un modo migliore o peggiore per creare un indice. Ogni metodo ha dei vantaggi e degli svantaggi che possono influenzare più o meno la scelta di come implementare l’indice. La creazione di un indice in HTML è migliore dal punto di vista della sicurezza, ma può essere un po’ complicata soprattutto all’inizio. Con i plugin creare un indice è molto semplice, ma installando un elemento esterno si rischia di rallentare il sito e di compromettere la sicurezza dei nostri contenuti.
Creare un indice in WordPress con codice HTML
Creare un indice con il codice HTML non è particolarmente complesso, ma soprattutto all’inzio potrebbe essere un po’ ostico se non conosci il linguaggio HTML. Un indice in HTML ha il vantaggio di non richiedere installazioni aggiuntive, ma si può creare inserendo qualche riga di testo all’interno dell’articolo. La possibilità di creare l’indice senza l’installazione di un plugin esterno aumenta la sicurezza del tuo sito perché si evitano eventuali falle informatiche che possono essere presenti nel plugin (soprattutto se questo smette di essere aggiornato), e non appesantisce il sito con l’installazione di elementi esterni.
I principali svantaggi dell’utilizzo del linguaggio HTML per l’indice di un articolo WordPress sono la minima conoscenza di HTML necessaria (anche se con questa guida dettagliata sarà molto facile creare il tutto) e la necessità di dover creare i vari punti di ancoraggio manualmente per ogni articolo. Questo è lo scoglio più grande da superare quando si inizia a inserire qualche elemento in HTML, ma la sicurezza e la leggerezza di questa soluzione la rendono ottima per tutti i siti.
Se non conosci il codice HTML o sei alle prime armi, la guida che ho creato ti permetterà di creare un’indice in HTML in maniera molto semplice e veloce. Ti basterà copiare il codice che trovi qua sotto e leggere la spiegazione dettagliata degli elementi che lo compongono. In questo modo sono sicuro riuscirai a creare un indice veloce, sicuro e personalizzato anche se sei alle prime armi.
1. Scrivere l’articolo
Sembrerà scontato, ma la prima cosa da fare è scrivere il tuo articolo. Tiene in considerazione di suddividere il testo in vari sottotitoli come è buona prassi nella scrittura di articoli online. Crea un sottotitolo <h2> per ogni parte della pagina, in modo da suddividere il tuo articolo in maniera logica nei vari sotto argomenti.
Ad esempio questo articolo, è suddiviso in vari sottotitoli:
H2 – Cos’è un indice e come si crea
H2 – Creare un indice con codice HTML
H3 – 1. Scrivere l’articolo
H3 – 2. Come creare le ancora in WordPress
H3 – 3. Come creare un indice in WordPress
H3 – 4. Personalizzare l’indice in HTML
H2 – Creare un indice con un Plugin WordPress
L’organizzazione ideale per un testo è questa. In questo articolo, visto che è breve, ho deciso di inserire nell’indice solo gli H2.
2. Come creare un’ancora in WordPress
Il punto successivo è quello di creare le anchor text. Le ancore sono degli elementi che, come un’ancora, permettono di avere dei punti fissi all’interno dell’articolo raggiungibili tramite un link. Nel caso di un articolo le ancore saranno da inserire dove sono presenti i tag <H2> e <H3>.
Ad esempio in questo articolo voglio creare un’ancora nel tag <H2> “Creare un indice con codice HTML”. Inserire un’ancora in WordPress è molto semplice.

1. Seleziona il titolo in cui inserire l’ancora.
2. Apri la barra laterale di Gutemberg, l’editor di testo di WordPress che in automatico stai usando per scrivere l’articolo.
3. Clicca sul tasto “Avanzate”
4. Inserisci il nome dell’ancora
Questa operazione è da utilizzare per ogni singolo capitolo.
Come vedi nell’immagine, all’ancora bisogna assegnare un nome. Puoi scegliere un nome qualsiasi, l’importante è che sia univoco (non possono esserci più ancora con le stesso nome nel singolo articolo) e abbia un senso logico (questo non per necessità tecnica, ma per lavorare meglio).
Potresti decidere di utilizzare “titolo1” per il primo sottotiolo, “titolo2” per il secondo sottotitolo, oppure utilizzare come ancora il nome del sottotitolo. Questi numi li utilizzeremo tra poco. Andranno inseriti nell’indice che creeremo a inizio pagina, e ci permetteranno di creare un collegamento con il capitolo corretto.
3. Come creare un indice in WordPress
L’ultimo step è la creazione dell’indice. Non esiste una posizione corretta per l’indice, ma a rigor di logica è sensato inserirlo all’inizio dell’articolo. Puoi metterlo subito dopo il titolo, oppure scrivere un piccolo paragrafo introduttivo e poi inserire l’indice.
Per creare l’indice sarà necessario inserire del testo in HTML. Per prima cosa andrà inserito un elemento

2. Clicca sul + in alto a sinistra per inserire un nuovo blocco.
3. Cerca dall’elenco oppure scorri i blocchi fino a trovare HTLM personalizzato.
4. Clicca sul blocco per inserirlo.

2. Posizionati all’interno del campo di testo.
Qua andremo a inserire il nostro HTML per creare l’indice.
Ho preparato un testo HTML precompilato che puoi copiare e incollare all’interno del campo HTML (numero 2 nell’immagine qua sopra). Ci saranno da fare alcune modifiche per fare si che l’indice funzioni correttamente.
Il testo HTML che ho creato ti permette, non solo di creare l’indice, ma anche di personalizzare font e colori. Se non non conosci il linguaggio HTML, non ti preoccupare. Ti spiegherò passo per passo i campi da modificare per ottenere il risultato che cerchi.
Il codice da inserire è il seguente:
style=”
width: auto;
background-color: #f0f0f0;
padding: 10px;
border: 0px solid #000000;
border-radius: 2px;
font-size: 20px;
font-weight: 400;
>
<span
style=”
color:#000000;
text-align: left;
font-size: 14px;
font-weight: 600″>
Indice:
</span>
<ul style=”padding:0px 25px 0px 25px; color:#7B67FF; list-style-type: ;”>
<li> <a href=”#titolo1″ style=”color:#000000″> Titolo 1 </a>
<ul>
<li><a href=”#titolo1.1″ style=”color:#000000; list-style-type:;”>Titolo1.1</a></li>
</ul>
</li>
<li> <a href=”#titolo2″ style=”color:#000000″> Titolo 2 </a></li>
<li> <a href=”#titolo3″ style=”color:#000000″> Titolo 3 </a></li>
</ul>
</div>
Ma per non lasciare nulla al caso, ecco una spiegazione dettagliata del codice, in modo che tu possa modificarne la veste grafica a piacere.
Riquadro principale
↓ Qua si modifica il contenitore principale, cioè il riquadro dove sarà contenuto l’indice.
Per non vedere il riquadro, puoi inserire uno sfondo bianco e un bordo bianco di zero pixel. In caso contrario puoi modificare gli elementi che ti interessano.
style=”
↓ Larghezza del riquadro. Puoi lasciare “auto” oppure inserire una larghezza in pixel (es. 600px) o in percentuale.
width: auto;↓ Colore dello sfondo. Puoi scrivere un colore (red, white, grey, ecc) oppure inserire un codice colore (es. #f0f0f0)
background-color: #f0f0f0;↓ Il padding è lo spazio che c’è tra il contenitore e il tuo testo. Con un valore di 0px, il testo sarà attaccato al bordo, con un valore di 10px, ci saranno 10px tra un il bordo e il testo. Inserisci un valore a piacere.
padding: 10px;↓ Qua si modifica il bordo. Il primo valore numerico è lo spessore espresso in pixel, il secondo è lo stile del bordo. Solid per il bordo pieno, dotted per il bordo punteggiato. Puoi decidere di usare anche altri stili.
border: 1px solid #000000;↓ Si modifica l’arrotondamento degli angoli del contenitore. Con un valore di 0px avrai un contenitore squadrato.
border-radius: 2px;↓ Dimensione del testo.
font-size: 20px;↓ Peso del testo.
font-weight: 400;>
Indice
↓ Con questo testo andiamo a modificare il titolo “Indice”.
<divstyle=”
↓ Si modifica l’allineamento: left, center o right.
color:white;↓ Si modifica l’allineamento: left, center o right.
text-align: left;↓ Grandezza del carattere. Se lasciamo il campo vuoto (quindi eliminando “16px”) il testo prenderà la grandezza di default.
font-size: 16px;↓ Si modifica il “peso” del font, ovvero lo spessore delle linee. Il peso può avere i seguenti valori, ma dipende dal font a font: 100, 200, 300, 400, 500, 600, 700, 800.
font-weight: 600″>↓ Questo è il titolo dell’indice. Puoi lasciare “indice ” oppure modificare con “Capitoli” o con qualsiasi scritta tu voglia.
Indice:</div>
Lista
↓ Questa è la nostra lista. “ul” infatti sta per “Unordered list”, quindi lista senza ordine (che nei fatti si traduce in una lista puntata). Se vuoi una lista numerata, basta sostituire “ul” con “ol” ovvero “Ordered list”.
NB: per fare si che tutto funzioni correttamente, bisogna modificare anche il tag di chiusura. Quindi, oltre a cambiare <ul> con <ol>, dovrai cambiare anche </ul> con </ol>.
Modificando invece il campo “color”, cambi il colore dei punti o dei numeri della lista.
L’elemento “list-style-type” è da modificare nel caso in cui tu voglia tenere l’elenco, ma senza il punto o il numero davanti. In quel caso basta scrivere “list-style-type:none;”
↓ Ora andiamo a modificare i due elementi principali che ci permettono di rendere funzionante il nostro indice.
L’elemento <li> significa “list item”, ovvero elemento di lista.
Dove vedi le scritte arancioni, vanno inseriti i nomi delle ancore che abbiamo creato al punto 2 di questa guida.
Le ancore devono essere una per elemento di lista, e devono essere precedute dal simbolo #.
L’elemento verde è invece il testo che verrà visualizzato. Quindi, dove ora c’è “Titolo1”, va inserito in nome che sarà visualizzato nell’indice. Nel mio caso ho scritto “Cos’è un indice e come si crea”.
Cambiando il codice colore, cambi il colore di testo del singolo elemento.
Quello che vedete in blu invece è un “Elemento nidificato”. Se notate bene è una lista senza ordine <ul> inserita all’interno di un elemento <li> della lista precedente. Questa nuova lista ci permette di inserire in elenco i sottotitoli H3, e rispetta tutte le regole della lista “madre”, quindi ad ogni elemento di lista dovremo assegnare l’ancora corretta (che in questo caso ho chiamato titolo1.1).
<li> <a href=”#titolo1” style=”color:#000000“> Titolo 1 </a>
—<ul style=”list-style-type: ;”>
—–<li><a href=” #titolo1.1 ” style=”color: #000000;“> Titolo1.1 </a></li>
—</>
</li>
<li> <a href=”#titolo2” style=”color:#000000″> Titolo 2 </a></li>
<li> <a href=”#titolo3” style=”color:#000000″> Titolo 3 </a></li>
</>
</div>
La lista e gli elementi della lista devono essere organizzati in base hai contenuti che hai nell’articolo.
Potresti avere solo titoli H2, oppure vari titoli H3. Per ogni lista andranno tolti o aggiungi a piacimento gli elementi <li>.
Qualche esempio di come potrebbe essere strutturata una lista:
<li> <a href=” #titolo1 ” style=”color:#000000″> Titolo 1 </a>
—<ul style=”list-style-type: ;”>
—–<li><a href=” #titolo1.1 ” style=”color: #000000;“> Titolo1.1 </a></li>
—–<li><a href=” #titolo1.2 ” style=”color: #000000;“> Titolo1.2 </a></li>
—–<li><a href=” #titolo1.3 ” style=”color: #000000;“> Titolo1.3 </a></li>
—</ul>
</li>
<li> <a href=” #titolo2 ” style=”color:#000000″> Titolo 2 </a>
—<ul style=”list-style-type: ;”>
—–<li><a href=” #titolo1.1 ” style=”color: #000000;“> Titolo1.1 </a></li>
—–<li><a href=” #titolo1.2 ” style=”color: #000000;“> Titolo1.2 </a></li>
—–<li><a href=” #titolo1.3 ” style=”color: #000000;“> Titolo1.3 </a></li>
—</ul>
</li>
<li> <a href=” #titolo3 ” style=”color:#000000″> Titolo 3 </a></li>
</>
<li> <a href=” #titolo1 ” style=”color:#000000″> Titolo 1 </a></li>
<li> <a href=” #titolo2 ” style=”color:#000000″> Titolo 2 </a></li>
<li> <a href=” #titolo3 ” style=”color:#000000″> Titolo 3 </a></li>
<li> <a href=” #titolo4 ” style=”color:#000000″> Titolo 4 </a></li>
<li> <a href=” #titolo5 ” style=”color:#000000″> Titolo 5 </a></li>
</>
4. Personalizzare l’indice in HTML in WordPress
Bene! Siamo arrivati alla fine della spiegazione. So che il tutto può sembrare un po’ complicato, ma scommetto che basta un po’ di pratica e nel giro di poco riuscirai a creare degli indici in HTML in modo molto rapido.
Con questo codice puoi creare un indice come quello che trovi all’inizio di questo articolo, ma è facile crearne tanti altri personalizzati semplicemente cambiando qualche opzione.
Creare un indice con un Plugin WordPress
L’alternativa alla creazione di un indice tramite l’HTML, è l’installazione di un plugin di WordPress che svolga questa funzione. Creare un indice con un plugin è estremamente facile e immediato, ed è sicuramente consigliabile a chi non si vuole cimentare nell’imparare un minimo di HTML.
Il rovescio della medaglia per l’utilizzo di uno strumento facile e veloce, sono le problematiche che possono sorgere con l’utilizzo di un plugin. Questo potrebbe essere mal supportato e non compatibile con altri plugin o strumenti che stiamo usando sul WordPress, oppure rallentare molto il nostro sito. In questi due casi il consiglio è quello di cercare e testare un altro plugin che svolga la stessa funzione.
L’altro limite è la sicurezza che potrebbe essere messa a rischio (e non importa se il vostro sito fa 2 visite al mese, siete comunque a rischio) soprattutto se i plugin sono vecchi e poco aggiornati. Il consiglio è quello di cercare plugin che abbiamo ricevuto almeno un aggiornamento negli ultimi 4 mesi.
Easy Table of Content: uno dei migliori plugin per la creazione di un indice

Uno dei primi plugin a cui si pensa quando si parla di indice, è Easy Table of Contents. Questo plugin permette in maniera quasi imbarazzante di creare in automatico l’indice del tuo articolo. Dico in maniera imbarazzante perché ci sarà una solo cosa che dovrete fare: installare e attivare il Easy Table of Contents.
Una volta attivato il plugin andrà ad individuare in automatico gli articoli e, in base ai titoli H2 e H3 inseriti, creerà un’indice completo sotto il titolo principale dell’articolo.

Andando su Impostazioni –> Indice dei contenuti, si trovano una serie di importazioni e personalizzazioni che permettono di impostare al meglio l’indice. È possibile ad esempio decidere se attivare la creazione automatica dell’indice, la posizione, e se crearlo sempre oppure averlo solo quando ci sono più di 2 o 3 sottotitoli. E ancora è possibile personalizzare la larghezza dell’indice o anche alcune parti della veste grafica.
In generale è un plugin fatto bene, che riceve spesso aggiornamenti e che permette una buona personalizzazione. Nell’uso non ho mai riscontrato problemi critici.
Meglio un plugin o l’HTML?
Se ti aspetti che ti dica che un metodo è migliore dell’altro, rimarrai deluso. Non esiste un metodo per creare un indice in assoluto migliore dell’altro. Entrambi hanno pregi e difetti più o meno marcati, e si adattato al tipo di utenza a cui sono rivolti.

Indice in HTML
Sotto tanti aspetti creare un indice in HTML ha grossi vantaggi. Non si hanno rischi di rallentamento, è possibile personalizzare in maniera totale la veste grafica e il rischio di bug o problemi è molto bassa. Il tutto senza sborsare un centesimo.
Con questa guida per l’installazione hai un indice in HTML pronto all’uso da utilizzare nel tuo blog, e seguendo nel dettaglio la guida non è particolarmente difficile crearlo e personalizzarlo. Inoltre, una volta creato il tuo codice, per gli altri articoli basta un copiare e incollare il codice e sistemare le ancore.
Rimane comunque il limite che si deve avere un minimo di conoscenza di HTML (o voler imparare le basi) e se si vuole fare una profonda personalizzazione le competenze di linguaggio devono essere più profonde.
Se quindi vuoi sicurezza, velocità e personalizzazione, e non ti spaventa cimentarti nell’HTML, questa può essere la scelta giusta per te.
Creare un indice in un blog WordPress con un plugin
Creare un indice con un plugin, come abbiamo visto, è assolutamente alla portata di tutti, anche a chi si approccia per la prima volta a WordPress. Basta un clic per installarlo e trovarsi un indice bello organizzato su tutti gli articoli del proprio sito. L’immediatezza d’uso è il punto forte di uno strumento come Easy Table of Content.
D’altro canto possono esserci dei problemi di incompatibilità, a volte non risolvibili, e problemi di sicurezza che, anche se bassi, quando capitano sono delle belle gatte da pelare ( e se non sei un esperto molto spesso devi spendere soldi per un professionista che ti risolva un problema).
Inoltre, per quando buona, la personalizzazione è limitata (non sono riuscito a creare un’indice uguale a quello che ho ottenuto in HTML) e alcune funzioni vincolate all’acquisto della versione a pagamento.
Alla fine dei conti però, se cerchi uno strumento “plug and play” e non ti interessa la personalizzazione, un plugin è probabilmente la soluzione giusta per te.