Uno degli elementi che caratterizzano leggibilità di un articolo del blog è sicuramente l’indice dei contenuti: un menù che permette di consultare un articolo passando da un paragrafo all’altro.
Pur presentando dei contenuti lunghissimi, le pagine di Wikipedia hanno una gran leggibilità.
Il segreto di questa leggibilità è dato proprio dal menù interno di ogni voce, che permette di andare direttamente al paragrafo che ci interessa senza bisogno di leggere tutto, oppure di riprendere a leggere dal paragrafo che avevamo lasciato in sospeso perché non abbiamo avuto il tempo di leggere tutto.
In questo articolo ti spiego come creare un indice dei contenuti nei tuoi articoli del blog, in modo da renderne più facile la lettura e la consultazione.
Quando creare un menù dei contenuti?
[ torna al menu ]
A livello SEO un menù di contenuti interno all’articolo del blog è sicuramente una buona pratica.
Google riconosce il menù interno come una struttura di link navigabili e associa le varie voci del menù a delle chiavi di ricerca.
Non sempre però la realizzazione di un menù interno è una buona soluzione!
Un menù interno all’articolo di un blog è una soluzione che funziona con contenuti molto lunghi, come ad esempio con tutorial, guide, cornerstone content, ecc. In questi casi il menù diventa uno strumento importante da fornire all’utente per la consultazione dell’articolo, dei suoi paragrafi, sottoparagrafi, approfondimenti, ecc.
Esistono degli articoli che però non hanno bisogno di un menù.
Sono gli articoli brevi, quelli che puntano sullo storytelling o di cui vogliamo più semplicemente che vengano letti tutti i paragrafi. In questi casi inserire un menù può essere anche controproducente.
Cos’è un Anchor Text?
[ torna al menu ]
L’indice dei contenuti che ti permette di spostarsi da un paragrafo all’altro di un articolo non è altro che un insieme di anchor text.
Con anchor text (in italiano “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 menù interno per il tuo articolo?
[ torna al menu ]
Prima di creare un indice dei contenuti devi dividere il tuo articolo in paragrafi.
Il titolo che assegni a ciascun paragrafo sarà l’ancora legata alla voce del menù.
Per una questione SEO ti consiglio di utilizzare per i titoli il tag <h2> o <h3>.
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.
Nel corso degli anni ho provato diversi plugin per la realizzazione di un menù interno, purtroppo non ne ho trovato uno che non avesse difetti o creasse qualche piccolo problema. In più troppi plugin tendono ad appesantire e rallentare il sito, quindi se è possibile evitare di installarne uno è meglio.
Per questo per i miei articoli preferisco scrivere in HTML il codice dell’indice dei contenuti.
Se sei proprio a digiuno di HTML ti straconsiglio di impararlo, perché non solo ti aiuterà a capire come e dove inserire l’indice dei contenuti per gli articoli del tuo blog, ma ti permetterà di risolvere dei piccoli problemi con il tuo blog nel caso in cui si presentino.
Vediamo ora come realizzare in HTML un menù come quello che hai visto all’inizio dell’articolo.
Dopo delle righe introduttive, vai nell’editor HTML del tuo articolo cliccando su “Testo” e inserisci queste righe di codice:
<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> <li class="toclevel-1 tocsection-1"><a href="#titolo1"><span class="toctext">Titolo 1</span></a></li> <li class="toclevel-1 tocsection-2"><a href="#titolo2"><span class="toctext">Titolo2</span></a></li> <li class="toclevel-1 tocsection-3"><a href="#titolo3 "><span class="toctext">Titolo 3 </span></a></li> </ul> </div>
Come puoi vedere 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.
Ora conosci come realizzare indice dei contenuti per gli articoli del tuo blog.
Spero che ne farai buon uso, perché se non curi la leggibilità dei tuoi articoli rischi di far scappare via il tuo pubblico dal tuo blog invece di avvicinarlo e coinvolgerlo.
Digital Marketing Manager, Copywriter per vocazione, Fotografia, Food e Fashion come passione. Nel tempo libero mi piace ascoltare buone storie.
