L’indice dei contenuti è sicuramente uno degli elementi che caratterizzano la fruibilità di raggiungimento rapido dei paragrafi di interesse in un articolo del blog.

Si tratta di un menu con vari anchor link, che se cliccati, ci permettono di andare direttamente alla sezione di maggiore interesse.

Ecco un esempio di menu indice dei contenuti in un blog post:

Indice dei contenuti in un blog post

Perchè è importante creare un menù indice dei contenuti?

Creare un menu indice dei contenuti all’interno dei blog post è utile per la SEO in quanto i motori di ricerca (Google in primis ma anche altri) riconoscono il menù come una struttura di link navigabili o anchor text e associa le varie voci del menù a delle chiavi di ricerca. Non tutti i post pero, necessitano di menu indice dei contenuti. Per esempio in blog post corti questo non risulta affatto necessario al contrario nei contenuti molto lunghi come tutorial, guide, cornerstone content, ecc il menù diventa uno strumento importante da fornire all’utente per la consultazione dell’articolo, dei suoi paragrafi, sottoparagrafi etc etc.

Cos’è un anchor text?

Per anchor text o testo di ancoraggio si intende il testo, o porzione di testo, di una pagina web linkata verso un’altra pagina, che può essere interna al sito oppure esterna.

Nel caso dell’indice di contenuti gli anchor text non riportano a un’altra pagina del sito ma a uno specifico paragrafo dell’articolo in cui è inserito.

Come creare un indice dei contenuti per il tuo articolo?

Il primo step sarà quello di “pensare” il nostro articolo come una struttura suddivisa in “paragrafi”, ogni paragrafo avrà un titolo h2 e questo sarà presente nel nostro menu. Nel menu verranno mostrati anche sottotitoli h3 qualora siano gerarchicamente “figli” dei precedenti h2. Sicuramente a livello di struttura SEO, questa gerarchia è la migliore da utilizzare per avere una indicizzazione ottimale dei nostri contenuti testuali.

Una volta suddiviso il testo in paragrafi possiamo passare alla realizzazione dell’indice dei contenuti. A questo punto le strade percorribili sono due: usare un plugin o scrivere il codice a mano.

Ecco il codice HTML, per poter creare un menù indice dei contenuti, come quello all’inizio dell’articolo, comprensivo anche di dimensioni e colore di sfondo

<div id=”tmenu” style=”position: relative; top: -110px;”></div>
<div id=”toc” class=”toc” style=”width: 320px; padding: 5px;
border: 1px solid #aaa; background-color: #f9f9f9; font-size: 95%;”>
<div id=”toctitle” style=”text-align: center;
font-size: 15px;”><strong>Indice dei contenuti</strong></div>
<ul>
<liclass=”toclevel-1 tocsection-1″><ahref=”#titolo1″>
<spanclass=”toctext”>Titolo 1</span></a></li>
<liclass=”toclevel-1 tocsection-2″><ahref=”#titolo2″>
<spanclass=”toctext”>Titolo2</span></a></li>
<liclass=”toclevel-1 tocsection-3″><ahref=”#titolo3 “>
<spanclass=”toctext”>Titolo 3
</span></a></li>
</ul>
</div>
Le varie voci del menù sono dei punti elenco con i link che riportano al titolo del relativo paragrafo.

Sempre nell’editor HTML dell’articolo, inserisci queste righe di codice nella parte dove va il titolo del paragrafo:

<div id=”titolo1″ style=”position: relative; top: -110px;”></div>

<h3>Titolo 1<small>[ <a href=”#tmenu”>torna al menu</a> ]</small></h3>

L’ancora che dal menù riporta al paragrafo deve essere inserita nel tag che precede il titolo. In questo modo quando cliccherai sulla relativa voce dell’indice dei contenuti sarai riportato direttamente al titolo del paragrafo e non alla prima riga, come avviene spesso utilizzando i plugin.

Inserendo l’anchor text “torna al menu” sotto al titolo darai ai tuoi utenti la possibilità di tornare all’indice dei contenuti con un semplice click. Questo elemento è utilissimo, perché permette ai tuoi lettori di passare facilmente da un paragrafo all’altro.

Qualora invece del codice, volessi utilizzare un comodo plugin per wordpress, ti consigliamo Table Of Content Plus:

Si tratta di un plugin estremamente utile e semplice da installare e personalizzare. Una volta trovato nella sezione “plugin” di WordPress, basta installarlo e attivarlo.

Terzo step la sua personalizzazione. Permette di inserire il nostro menu in alto come primo elemento o appena dopo il paragrafo iniziale.

Permette di scegliere tra 5 layout grafici pre impostati oppure di personalizzarlo con i nostri colori preferiti, come da immagini seguenti.

Indice dei contenuti in un blog post

Indice dei contenuti in un blog post

Indice dei contenuti in un blog post