Come Creare la Table of Content sul tuo sito web?

La TOC o Table of Contents ti aiuta a migliorare l'usabilità dei tuoi articoli sul blog e quindi a migliorare la SEO. Scopri qui come realizzarla con o senza plugin.
Condividi con i tuoi amici

Tabella dei Contenuti

IMPORTANTE: Il seguente sito viene monetizzato con link di affiliazione. Cliccando sui link di colore verde e acquistando i servizi proposti, Chiara Scanavino ottiene una commissione.

L’abbiamo citata nell’articolo “Come Creare un Sito Web da Zero: Guida in 7 Passi“.

E siccome in quell’articolo avevo promesso che ti avrei insegnato come farla, ecco che quindi oggi ne parliamo.

Chiara, ma di che cosa stai parlando?

Della Table of Contents, Silvia…

E sarebbe?

Continua a leggermi…

Si, ma per favore parla in italiano… Non ci capisco una mazza…

Va bene. Ma si dice TOC anche in italiano…

Voglio una traduzione in italiano… Lo sai che io con le lingue sono una capra…

Beh, allora… Innanzitutto un po’ di autostima, per favore… Non fa mica male, sai?

Ma al di là di questo… Table of Contents significa letteralmente “tabella dei contenuti”.

E dimmi…

Che cos'è la Table of Contents (TOC)?

In sostanza è l’indice dei contenuti presenti in una pagina web. Proprio come vedi qui sotto:

TOC

Questa è la TOC che ho creato per l’articolo “SiteGround per Negati 2022: Tutorial di Chiara Scanavino“. Se sei interessatə ad acquistare un piano di hosting con SiteGround, ti consiglio di andare a leggere quell’articolo…

Ad - Hosting WooCommerce SiteGround - La migliore casa per il tuo negozio online. Clicca per scoprire di più.

Ok. Ma…

Perché Inserire la TOC all'interno dei contenuti?

Perché la Table of Content rende più fruibile il tuo sito web.

Dice già in anticipo quali argomenti vengono trattati in un articolo. Quindi gli utenti possono leggere direttamente solo le parti che desiderano.

E poi è uno degli elementi che il signor Google guarda quando deve posizionare un contenuto all’interno della SERP.

Ah, capisco… Ma come posso inserire la TOC all’interno dei miei contenuti?

Puoi farlo in due modi, cara Silvia.

Ovvero: con oppure senza un plugin. In questo articolo ti faccio vedere come crearla in entrambi i modi. Poi sei tu che decidi come vuoi farla. Ok?

Ok. Tu però prima presentati per chi ancora non ti conosce…

Ma non interessa a Nessuno…

Come sarebbe a dire che non interessa a Nessuno?! Non hai detto che vuoi che la gente ti conosca come persona?

Si, certo. Però in questo momento ho bisogno di traffico da parte del signor Google. E abbiamo detto nell’articolo SEO Tecnica per Negati 2022: Guida di Chiara Scanavino, che chi arriva da Google ha solo un problema da risolvere. E quindi non è realmente interessatə a conoscere la persona che sta dietro l’articolo che sta leggendo…

Chiara, ma ne sei sicura che non interessa a Nessuno sapere chi sei?!

La certezza assoluta non posso averla. “So di non sapere”…

Ecco. Quindi per favore presentati per il signor Nessuno…

L’ho già fatto. Ha solo da andarsela a leggere qui: https://www.chiarascanavino.it/chi-e-chiara-scanavino. E se vuole delle referenze per i signori Incognito può andare sul mio profilo LinkedIn.

Ma ora andiamo avanti, per favore…

Come Inserire la Table of Contents

Chiara Scanavino premiata a Torino per la sua tesi di laurea

Era in uno dei miei primi corsi di marketing fatti in tedesco, quando un giorno Axel, il mio mentore di allora, mi ha detto di inserire la sezione “potrebbe interessarti anche” al fondo dei miei articoli sul blog.

Allora non sapevo come fare. E quindi la prima cosa che ho fatto è stata quella di cercare un plugin che mi permettesse di farlo.

Ok. Ma senti, Chiara… perché hai messo questa foto qui sopra?

Perché voglio che la gente mi conosca. Ma questo adesso non c’entra nulla con questo articolo. Andiamo avanti…

Dicevamo… Axel mi ha aveva detto di mettere la sezione “Potrebbe interessarti anche”. E quindi ho girovagato per il web fino a quando ho trovato come farla.

Ok. Ma non pensi che se hai trovato su Google come farla, allora non serve che tu pubblichi questo articolo sul tuo blog?

Beh, in effetti su internet di guide come queste ce ne sono tante.

Ma le promesse si mantengono.

E quindi, visto che avevo promesso di spiegare come fare la table of contents, ti racconto qual è stata la mia soluzione al problema.

È chiaro?

Ok. Spero di trovare qualcosa di utile.

Lo spero anch’io. E in tal caso mi farebbe piacere se me lo facessi sapere. Basta anche solo che tu condivida questo articolo con i tuoi amici.

Ad - Hosting WordPress gestito di SiteGround - Potente, ma semplice da usare. Clicca per scoprire di più.

Torniamo a noi, ora…

Come Inserire la Table of Contents con i Plugin

Questo è in assoluto il metodo più semplice. In fin dei conti, quello che devi fare è:

  1. andare nella sezione “plugin” del back-end del tuo sito web WordPress.
  2. Scrivere “TOC” nella barra di ricerca che trovi sulla pagina “aggiungi nuovo”.
  3. Installare e attivare il plugin “Easy Table of Contents”.

Una volta che hai concluso queste operazioni, l’unica cosa di cui ti devi preoccupare è quella di creare degli articoli del blog in cui metti i titoli <h1></h1>, <h2></h2> e così via…

Ah, capisco.

Comunque… Ho citato i plugin Easy Table of Contents perché l’ho usato anch’io in passato. Poi l’ho tolto perché allora mi dava dei problemi col sito. Sia ben chiaro per chi ci legge: sto parlando di anni fa. E nel frattempo Easy Table of Contents è stato aggiornato varie volte. Ora sul mio sito funziona tutto regolarmente.

Ah, capisco. Ma che problemi ti dava?

Si vedeva del codice anche sul front-end del sito. È una cosa che può capitare in qualsiasi momento, quando installi un qualunque plugin sul tuo sito web WordPress.

Non è bello da vedersi.

Dillo pure anche a Marco, Andrea e Dario, cara Silvia…

Ok. Ma nel caso in cui Easy Table of Contents mi desse problemi o non volessi installare altri plugin sul mio sito web, cosa posso fare per far vedere la TOC? Quali alternative ci sono in caso di emergenza?

Dipende molto da ciò che hai installato sul tuo sito web. Io per esempio ho installato Elementor Pro e quindi su questo sito creo la Table of Contents degli articoli del mio blog senza dover installare ulteriori plugin.

Perché, Chiara?

Perché Elementor è un site builder che – tra le altre cose – ha un widget che ti permette di inserire la TOC all’interno dei tuoi articoli.

Me lo fai vedere?

Certo. Eccolo qui sotto:

Widget Table of Contents di Elementor
Widget "Table of Contents" di Elementor Pro.

Basta che inserisci il widget qui sopra nella pagina che desideri ed Elementor ti crea la TOC sulla base dei titoli che hai inserito.

È tutto chiaro fin qui?

Si, certo. Grazie mille. Ma senti… Cosa posso fare per inserire la TOC sul mio sito web senza un plugin?

Te lo spiego nel prossimo paragrafo, cara Silvia. Continua a leggermi.

Ad - Web Hosting SiteGround - Creato per semplificare la gestione del sito. Clicca per scoprire di più.

Come Fare la TOC senza Plugin?

Passiamo ora a spiegare come fare una table of contents senza installare dei plugin sul sito web.

Ok. Ma prima spiega perché dovrebbe interessarmi come creare la TOC senza i plugin?

Perché continuerò a ripetertelo come un mantra, cara Silvia. Non amo utilizzare i plugin. Perché possono creare problemi di compatibilità.

E poi perché con il codice puoi personalizzarla come meglio credi…

Ok. Ma ora rispondi alla domanda… Come fare la TOC senza plugin?

Ti spiego qui il modo più semplice per farla, cara Silvia…

Ok.

Allora…

Con il codice HTML crei una tabella. E all’interno ci metti i link ancora dei titoli.

Non ci ho capito nulla…

Ti faccio vedere il codice…

				
					<table>
    <thead>
        <tr><td>Table of Contents</td></tr>
    </thead>
<tbody>
    <td><a href="#ancora1">Titolo 1</a></br>
        <a href="#ancora2">Titolo 2</a></br>
        <a href="#ancora3">Titolo 3</a></br>
        <a href="#ancora4">Titolo 4</a></br>
        <a href="#ancora5">Titolo 5</a></br>
        <a href="#ancora6">Titolo 6</a></td>
</tbody>
</table>
				
			

Il risultato è questo qui sotto:

Chiara, ma se clicchi lì sopra non succede niente…

Perché per farla funzionare devi creare prima i riferimenti delle ancore

E come faccio?

Beh, su questo Elementor è un valido aiuto… Perché ha un widget anche per creare le ancore…

E questo che vedi qui sotto:

Il widget "Ancoraggio del menu" di Elementor serve per creare la table of contents senza ulteriori plugin

Widget "Ancoraggio del menu" di Elementor.

Quindi se volessimo ricreare la TOC di questo articolo usando solamente l’HTML, dobbiamo:

  1. creare il nome dell’ancora per ciascun titolo;
  2. creare la TOC con il codice che abbiamo visto più sopra.

Ok, Chiara. Ma mi fai vedere il codice?

Eccolo qui sotto:

				
					<table>
    <thead>
        <tr><td>Table of Contents</td></tr>
    </thead>
<tbody>
    <td><a href="#TOC1">Che cos'è la TOC?</a></br>
        <a href="#TOC2">Perché inserire la TOC nei propri articoli?</a></br>
        <a href="#TOC3">Come inserire la Table of Contents</a></br>
        <a href="#TOC4">Come Inserire la Table of Contents con i Plugin</a></br>
        <a href="#TOC5">Come Inserire la Table of Contents senza Plugin</a></br>
        <a href="#TOC6">Conclusioni</a></td>
</tbody>
</table>
				
			

Se noi ora prendessimo il codice che abbiamo scritto qui sopra e lo inseriamo nella pagina, il risultato sarebbe questo:

Chiara, ma così non si vedono i numeri dei paragrafi…

Si, vero. Ma puoi sempre farlo facendo una lista…

E come si fa?

Te lo faccio vedere un’altra volta.

Continua a seguirmi.

Ma se io volessi personalizzare un po’ questa tabella che abbiamo fatto?

Puoi farlo. Questo è una delle cose belle del codice…

Ah, capisco.

Ci sono altre domande?

No, per ora basta. Sono già abbastanza in pallone così…

Mi spiace che tu sia andata in pallone. Comunque ok. Chiudiamo qui. Non voglio mettere troppa carne sul fuoco. Non va bene…

Ok, dai… Vado a vedermi un bel film su Prime Video…

Conclusione

Va bene, Silvia. Per oggi ti grazio…

Come sarebbe a dire che mi grazi?!

Chiudo qui la lezione sulla TOC. Non voglio mettere troppa carne sul fuoco. Se hai delle domande a proposito di quello che abbiamo detto finora, scrivimi pure qui nei commenti.

Lo sai che intanto ti rispondo…

Ok. Grazie. Vado a vedermi qualcosa su Amazon Prime.

Fai pure… Io ti ricordo solo che se vuoi, quando hai finito, puoi sempre acquistare Elementor Pro per fare la tua Table of Contents in modo semplice e senza aggiungere ulteriori plugin che potrebbero creare delle incompatibilità.

Questa è la direzione:

?cid=489717

Articoli Correlati

Cerca
Potrebbe interessarti anche...
Chi sono