Come creare un indice negli articoli di WordPress
Hai in mente di creare un indice da inserire negli articoli del tuo blog di WordPress? Ti indichiamo come creare un indice per facilitare la lettura di articoli lunghi e andare velocemente all’argomento interessato. WordPress non ha inserito questa funzione nel suo editor come invece facilmente troviamo in software di elaborazioni testi come Word attraverso la funzione “Crea sommario”. Per questo articolo “Come creare un indice negli articoli di WordPress” abbiamo pensato a questo indice per facilitare la tua lettura:
Primo passo: quando creare un indice dei contenuti
Ti piace scrivere articoli per il tuo blog? Ti piacerebbe avviare un’attività di Content Writer o di Copywriter? Abbiamo pensato a questo articolo che ti tornerà utile ogni volta avrai la necessità di inserire un indice negli articoli del tuo blog WordPress.
Avrai letto dell’importanza delle conoscenze del SEO quando scrivi contenuti per il tuo blog. Sicuramente tu scrivi su un blog on line per essere letto dalla maggior parte di coloro che cercano informazioni su Google. Per questo devi considerare almeno delle regole basi del SEO per raggiungere il tuo scopo.
Una di queste regole o buon pratiche tiene conto della presenza di un indice dei contenuti interno all’articolo del tuo blog di WordPress. In effetti, analizzando il contenuto del tuo articolo, Google riconosce l’indice o il menù di navigazione dato che è formattato come una struttura di link navigabili che riconducono ai titoli dell’articolo. Questi link vengono associati a delle keywords nel campo di ricerca.
Bisogna anche dire che è una buona norma inserire un indice all’articolo del tuo blog WordPress quando i contenuti sono molto lunghi, come ad esempio guide o tutorial, anche se l’articolo è diviso su più pagine del sito, così da migliorare la lettura. Altrimenti l’inserimento di un sommario risulterebbe essere controproducente.
Secondo passo: formattare i titoli dei contenuti
Una volta che hai scritto i contenuti dell’articolo da inserire nel tuo blog WordPress devi formattare i titoli dei paragrafi e dei sotto paragrafi assegnando <H2> ai Titoli 2 e <H3> ai Titoli 3. Questo lo fai facilmente utilizzando l’Editor di WordPress e l’anchor test.
Cos’è un Anchor Text?
L’anchor text, testo d’ancoraggio, è il testo che una volta cliccato ti consente di essere reindirizzato verso un’altra pagina. Una specie di collegamento ipertestuale che ti permette di spostarti tra contenuti interni o esterni all’articolo. L’indice dei contenuti che vuoi creare non è altro che un insieme di anchor text che “puntano” a uno specifico paragrafo dell’articolo.
Un tipo di anchor text del Titolo è il title tag, cioè l’ancora che riporta il titolo del paragrafo della pagina alla quale “linka”.
Terzo passo: come creare un indice dei contenuti
Abbiamo visto che bisogna formattare i Titoli attraverso i tag <H2> o <H3>, anche in ottica SEO, una volta suddiviso il testo in paragrafi.
Per precisione bisogna anche dire, soprattutto per gli utilizzatori di WordPress, che esistono vari Plugin che aiutano ad elaborare il testo attraverso nuove funzionalità. Ma il mio consiglio è sempre quello di installare meno plugin possibili, o almeno i più essenziali, per non rischiare di appesantire il sito o avere problemi di sicurezza.
Per questo consiglio di modificare l’articolo attraverso il codice HTML anche se non hai delle conoscenze. Quando si tratta di codice HTML consiglio sempre di fare riferimento al tutorial di W3Schools che ti aiuterà a comprendere i vari passaggi. Anche se scritta in inglese è di facile comprensione soprattutto per i facili esempi che riporta e dove puoi modificare per vedere immediatamente gli effetti desiderati.
Realizzare un indice con l’HTML
Vediamo ora come realizzare in HTML un menù come quello che hai visto all’inizio dell’articolo.
Vai nell’editor HTML del tuo articolo cliccando su “Modifica come HTML” e inserisci il seguente codice:
<div id="tmenu" style="position: relative; top: -100px;"> </div> <div id="toc" class="toc" style="width: 500px; padding: 10px; border: 2px solid #aaa; background-color: #9c9c9c; font-size: 100%;"> <div id="toctitle" style="text-align: left; font-size: 16px;"><strong>Indice:</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">Titolo 2</span></a></li> <li class="toclevel-1 tocsection-3"><a href="#titolo3"><span class="toctext">Titolo 3 </span></a></li> </ul> </div>
Puoi modificare il codice HTML a tuo piacimento:
- width per modificare la larghezza;
- padding per modificare la distanza intorno al testo;
- background-color per modificare il colore dello sfondo in esadecimale;
- text-align per l’allineamento del testo “Indice”;
- font-size per la dimensione del carattere;
- Titolo1,2,3,.. inserisci i Titoli dei vari paragrafi.
Successivamente, con la stessa procedura devi inserire al posto dei titoli dei paragrafi il seguente codice:
<div id="titolo1" style="position: relative; top: -100px;"></div> <h2>Nome del titolo del paragrafo</h2>
E sotto il titolo del paragrafo il seguente codice che ti permette di tornare all’indice:
<small>[<a href="#tmenu">torna all'indice</a>]</small>
Potrai personalizzare il tuo indice o sommario ogni volta che vorrai ricordanti di modificare il codice HTML.
