Come sempre, se sei in cerca di plugin, hai sbagliato sito: qui, infatti, scoprirai come creare una tabella dei contenuti con WordPress senza usare plugin.
Negli articoli come essere in prima pagina su Google e come aumentare il CTR, abbiamo visto l’importanza dei rich snippet e oggi vedremo come ottenerne alcuni grazie ad un “escamotage” che ti permetterà di creare una TOC con WordPress.
ATTENZIONE: questo articolo ti permette di realizzare una tabella dei contenuti dinamica ideale per me che utilizzo l’editor a blocchi Gutenberg e lo schema di colori #3333cc, #8033cc e #eaeaf9.
Se utilizzi un altro schema di colori o preferisci stili di elenchi diversi, dovrai effettuare qualche piccola modifica.
Alla fine, quello che otterrai è un indice come questo che vedi qui sotto.
Perché utilizzare l’indice
Ci sono siti e blog con un livello di autorevolezza tale che non potranno MAI essere superati nella SERP… soprattutto se, come me, gestisci un blog da 36.71 euro l’anno.
Strappare la prima posizione a questi giganti è impossibile.
Non cercare di piegare il cucchiaio, è impossibile. Cerca solo di capire la verità: il cucchiaio non esiste.
Matrix
Esiste, però, un modo per scalzare Aranzulla, YouTube, WhatsApp e gli altri colossi del Web: gli snippet.
Non esistono però solamente i featured snippet, ossia gli snippet in evidenza di Google che, inserendo il tuo articolo nella parte superiore della pagina dei risultati di ricerca (SERP), fanno schizzare il click-through rate.
Gli snippet ti permettono di aumentare le visualizzazioni perché ti distinguono dagli altri creatori di contenuti anche quando il tuo articolo compare in posizioni minori.
Come creare una tabella dei contenuti con WordPress
Tutto ciò di cui hai bisogno per creare una TOC è sfruttare gli header e le ancore e aggiungere un pizzico di CSS aggiuntivo.
Con il rilascio della versione 5.0 di WordPress, il 6 dicembre 2018, TinyMCE è andato in pensione e ha lasciato il posto a Gutenberg: l’editor a blocchi.
Ed è proprio grazie a Gutenberg che possiamo realizzare una tabella dei contenuti senza utilizzare plugin in pochi semplici clic.
Come creare una tabella dei contenuti con WordPress senza usare plugin
Tutto quello che devi fare è dividere il tuo articolo in H2, H3, H4 e H5 (sempre ammesso che tu utilizzi questo ultimo header) e assegnare a ogni headers un “nome”.
Seleziona il blocco con l’header cliccandoci sopra col tasto sinistro del mouse.
Ora clicca (sempre col tasto sinistro del mouse) sui tre pallini che trovi sulla destra del blocco evidenziato e poi su Modifica come HTML.
A questo punto non ti resta da fare altro che aggiungere il codice <span id=”nome-che-vuoi-dare”> prima del testo e chiudere il blocco con </span>.
Hai appena inserito un’ancora al tuo header.
L’ultima operazione che devi compiere è realizzare una lista (l’indice) che contenga tutti gli header che hai inserito e linkare ogni voce alla rispettiva ancora.
Vai nel punto dove devi inserire l’indice, e aggiungi il blocco HTML personalizzato strutturandolo in questo modo:
Indice dell'articolo
<ul>
<li>
<a href="#stesso-nome-utilizzato-per-lo-span">Header H2</a>
</li>
<li>
<a href="#stesso-nome-utilizzato-per-lo-span">Header H2</a>
<ul>
<li>
<a href="stesso-nome-utilizzato-per-lo-span">Header H3</a>
</li>
</ul>
</li>
<li>
<a href="#stesso-nome-utilizzato-per-lo-span">Header H2</a>
<ul>
<li>
<a href="stesso-nome-utilizzato-per-lo-span">Header H3</a>
</li>
<ul>
<li>
<a href="#stesso-nome-utilizzato-per-lo-span">Header H4</a>
</li>
</ul>
</ul>
</li>
</ul>
La tabella dei contenuti è completa e puoi passare ora ai miglioramenti visivi.
Per realizzare qualcosa che dia uno stile alla tua TOC, però, devi prima darle un “nome” che potrai utilizzare per effettuare le modifiche a mano via CSS.
Torna nell’HTML personalizzato appena creato e definisci la tabella:
<div class="toc">
Tabella dei contenuti appena creata
</div>Ora che l’hai definita, puoi iniziare a lavorare di CSS aggiuntivo per renderla più accattivante.
Creare una tabella dei contenuti con mostra/nascondi
Il primo suggerimento che ti do è quello di rendere a scomparsa la tua tabella dei contenuti.
Per farlo, ti sarà sufficiente aggiungere del codice nella sezione CSS aggiuntivo.
Abbandoniamo quindi l’HTML personalizzato e spostiamoci sul CSS aggiuntivo.
Dal pannello di amministrazione di WordPress (la colonna di sinistra), clicca su Aspetto, Personalizza e infine su CSS aggiuntivo e inserisci il seguente codice:
details {
position: relative;
max-width: calc(100% - 20px);
}
details summary {
cursor: pointer;
list-style-type: none;
padding-left: 20px;
}
details summary:after {
content: "[mostra]";
position: absolute;
top: 0;
right: 0;
color: #33c;
}
details[open] summary:after {
content: "[nascondi]";
}
details summary > * {
display: inline;
}
details summary::-webkit-details-marker {
background: none;
color: transparent;
display: none;
}Stili di elenchi
Se ti piace lo stile di elenchi che utilizzo in questo sito, questo è il CSS aggiuntivo che dovrai inserire per ottenrlo:
div.toc details > ul {
padding-top: 20px;
}
div.toc ul li {
list-style-type: disc;
}
div.toc ul ul li {
list-style-type: circle;
}
div.toc ul ul ul li {
list-style-type: square;
}
div.toc ul ul ul ul li {
list-style-type: disclosure-closed;
}
div.toc ul ul ul ul li::marker {
font-size: 0.7em;
}Codice CSS completo
Al termine dei vari passaggi, questo è il codice completo che dovresti trovarti nel CSS aggiuntivo, se hai deciso di impostare il tuo indice identico a quello utilizzato in questo sito (schema di colori compreso):
div.toc {
background-color: #eaeaf9;
padding: 20px;
margin-bottom: 1em;
box-shadow: 0 0 10px #808080;
}
div.toc details > ul {
padding-top: 20px;
}
div.toc ul li {
list-style-type: disc;
}
div.toc ul ul li {
list-style-type: circle;
}
div.toc ul ul ul li {
list-style-type: square;
}
div.toc ul ul ul ul li {
list-style-type: disclosure-closed;
}
div.toc ul ul ul ul li::marker {
font-size: 0.7em;
}
details {
position: relative;
max-width: calc(100% - 20px);
}
details summary {
cursor: pointer;
list-style-type: none;
padding-left: 20px;
}
details summary:after {
content: "[mostra]";
position: absolute;
top: 0;
right: 0;
color: #33c;
}
details[open] summary:after {
content: "[nascondi]";
}
details summary > * {
display: inline;
}
details summary::-webkit-details-marker {
background: none;
color: transparent;
display: none;
}La TOC, però, apparirà in tutta la sua bellezza solamente quando avrai inserito nell’HTML dell’indice anche il codice che permette il comando mostra/nascondi.
Torna all’interno dell’articolo, riprendi l’HTML personalizzato e completalo aggiungendo i comandi <details open=””> e <summary>.
<div class="toc">
<details open="">
<summary>Indice dell'articolo</summary>
<ul>
<li>
<a href="#stesso-nome-utilizzato-per-lo-span">Header H2</a>
</li>
<li>
<a href="#stesso-nome-utilizzato-per-lo-span">Header H2</a>
<ul>
<li>
<a href="stesso-nome-utilizzato-per-lo-span">Header H3</a>
</li>
</ul>
</li>
<li>
<a href="#stesso-nome-utilizzato-per-lo-span">Header H2</a>
<ul>
<li>
<a href="stesso-nome-utilizzato-per-lo-span">Header H3</a>
</li>
<ul>
<li>
<a href="#stesso-nome-utilizzato-per-lo-span">Header H4</a>
</li>
</ul>
</ul>
</li>
</ul>
</details>
</div>Quando traffico con l’HTML, ho sempre timore di aver fatto qualche casino, quindi, prima di pubblicare, faccio dare una controllata al mio lavoro dal tool gratuito HTML Formatter.
Come creare una tabella dei contenuti con plugin
Personalmente, come ben saprai, detesto i plugin e, molto probabilmente, sono l’ultima persona al mondo in grado di dare consigli su come creare una tabella dei contenuti con WordPress usando estensioni.
Nei centinaia di siti WordPress di esperti SEO che ho monitorato, però, devo dire che ho notato che sono in molti ad utilizzare LuckyWP Table of Contents.
Estremamente facile da utilizzare e infinitamente customizzabile, direi che questo plugin, anche nella versione gratuita, ti permette di realizzare una tabella dei contenuti performante e esteticamente carina.