Come aggiungere un indice nei post con link ai capitoli

Come creare un indice nei post per poi linkare i vari capitoli e sezioni in cui viene suddiviso per una più semplice navigazione e per migliorare la SEO

Chi pubblica contenuti su un blog o un sito ha i suoi punti di riferimento in colleghi che sono riusciti a ottenere grandi risultati con la loro attività nel web, ed è normale cercare di imitarli, di copiarne lo stile e il tipo di approccio, per migliorare le performance del nostro sito come autorevolezza, traffico e magari pure con gratificazioni economiche.

Chi si occupa di tecnologia non può fare a meno di seguire Salvatore Aranzulla, che per sua stessa ammissione riesce a guadagnare anche un milione di euro. Le particolarità di Aranzulla sono parecchie e tutte da analizzare. Innanzitutto pubblica dei contenuti per persone che hanno conoscenze informatiche vicino allo zero. Un suo post dalle moltissime visualizzazioni fu quello dal titolo "Come spegnere l'iPhone".

Un'altra sua prerogativa è quella di un incipit del post in cui spiega a sommi capi di quello che parlerà, per poi immancabilmente invitare il lettore a mettersi tranquillo, prendersi 5 minuti di tempo e leggere il suo articolo perché si trova nel posto giusto per risolvere i suoi problemi.

I suoi post sono sempre piuttosto lunghi e sviscera tutte le possibili opzioni di un determinato argomento. Per aiutare il lettore nella navigazione del post, all'inizio dello stesso, inserisce un indice con i titoli degli argomenti. Tali titoli cono collegati con l'inizio del capitolo relativo. Può darsi che Google apprezzi particolarmente questo stile di presentare i contenuti. Per questa ragione in questo post illustrerò appunto come creare un indice all'inizio di un articolo, con i titoli dei vari capitoli o sezioni. L'indice avrà i collegamenti ai rispettivi capitoli, in modo da aiutare il lettore nella navigazione dei contenuti.

Ovviamente non mi prendo la responsabilità di affermare che scrivere articoli con questa struttura possa portare dei benefici in ambito SEO, però non vedo alcuna controindicazione a inserire indici con link all'inizio dei post.

INTRODUZIONE

Come detto in precedenza non è dimostrato che la creazione di un indice incida positivamente sul posizionamento di una pagina o di tutto un sito. Però è universalmente accettata l'opinione che inserire delle intestazioni all'interno dei post, con i tag <h2>, <h3>, <h4>, possa strutturare meglio i contenuti, e quindi avere un impatto positivo nell'algoritmo di Google. Le varie intestazioni saranno quindi i capitoli del post. Nel seguito dell'articolo vedremo appunto come creare dei collegamenti tra il titolo del capitolo nell'indice e il capitolo stesso.

Le intestazioni potranno avere tutte la stessa gerarchia oppure avere gerarchie diverse. Si potranno cioè creare dei capitoli a loro volta divisi in sezioni. L'elenco dell'indice sarà quindi nidificato come vedremo a fine post.

VIDEO TUTORIAL

Ho pubblicato sul mio Canale Youtube un video tutorial su come realizzare un indice con link su Blogger.

In seguito farò riferimento alla piattaforma Blogger, ma i codici potranno essere utilizzati in ogni pagina web.

CREARE LINK INTERNI A UNA PAGINA WEB

Come certo saprete ciascuna pagina web ha un suo URL univoco, che ci permette aprirla quando appunto tale indirizzo venga incollato nella barra del browser. Consideriamo per esempio questo URL

www.ideepercomputeredinternet.com/2015/07/blogger-responsive-template.html

Se voi lo incollate nel browser e andate su Invio, aprirete la corrispondente pagina web. Se adesso a quell'indirizzo web aggiungete la stringa #Gossip e quindi aprite questo URL

www.ideepercomputeredinternet.com/2015/07/blogger-responsive-template.html#Gossip

vi troverete sempre nella stessa pagina web, ma al top della stessa, visualizzerete il capitolo che ho inserito con un link virtuale denominato appunto Gossip. I codici da usare nell'indice e nel capitolo sono rispettivamente:

<a href="#Gossip">Responsive Gossip Blogger Templates</a> nell'indice
<h2 id="Gossip"> Template per blog di Gossip </h2> nel capitolo

Si deve cioè inserire la stessa stringa nel collegamento e nell'ID della intestazione che può essere <h2>, <h3> ma anche un <div> o un <p>. Quando si clicca su quel link virtuale, si aprirà la stessa pagina, ma avendo al top della stessa, la riga in cui è stato inserito l'ID corrispondente. Il testo colorato di blu è puramente esemplificativo e determina il testo di ancoraggio nell'indice e il titolo della intestazione.

COME ORGANIZZARE L'INDICE

L'indice può essere inserito all'inizio, mentre si sta ancora scrivendo il post, oppure messo alla fine dopo che sono già stati creati i vari capitoli. Per rendere le cose più chiare ho aggiunto un indice a questo post.

L'indice l'ho creato con questo codice

<h2>INDICE DEL POST</h2>
<ol>
<li><a href="#csstrick"><b>CSS Trick</b></a></li>
<li><a href="#codemyui"><b>Code My UI</b></a></li>
<li><a href="#little"><b>Little Snippets</b></a></li>
<li><a href="#boot"><b>Bootsnipp Tag</b></a></li>
</ol>

mentre nelle intestazioni dei vari capitoli ho usato questi tag

<h2 id="csstrick">1) CSS TRICK</h2>
<h2 id="codemyui">2) CODE MY UI</h2>
<h2 id="little">3) LITTLE SNIPPETS</h2>
<h2 id="boot">4) BOOTSNIPP TAG</h2>

Ovviamente potrà essere aggiunto grassetto, tag di allineamento e altre classi CSS. L'importante è che ci sia corrispondenza tra le stringhe dei link e degli ID delle intestazioni. I link gli utenti di Blogger possono inserirli tramite l'Editor di Blogger, con la raccomandazione di togliere la spunta a Apri in altra finestra.

Se non si togliesse quella spunta, la pagina si aprirebbe nel capitolo linkato, ma in un'altra scheda del browser, vanificando lo scopo stesso dell'indice con link.

CREARE LINK ALL'INDICE

Quando il post è molto lungo si può pensare anche di linkare l'intestazione dell'indice, e di mettere tale link alla fine dell'articolo. In sostanza alla fine del post si può aggiungere in modalità HTML questa riga di codice

<h3><a href="#back">Torna all'indice</a></h3>

mentre nella intestazione dell'indice si può usare questo codice

<h2 id="back">INDICE</h2>

Chi cliccherà sopra al link virtuale Torna all'indice aprirà la pagina esattamente in quella posizione.

CREARE INDICI NIDIFICATI

Essendo l'indice un elenco con link e visto che gli elenchi possono essere nidificati, anche gli indici si possono creare in questo modo. Si tratta sempre di creare dei collegamenti tra la sezione e la corrispondente voce nell'indice.

L'indice viene quindi creato nidificato, ma la sintassi per aggiungere le stringhe ai vari capitoli principali e alle sezioni secondarie rimane la stessa. L'importante è usare delle stringhe univoche che non si ripetano.

CONCLUSIONE

La creazione di un indice con link è indubbiamente un aiuto per la consultazione di un post da parte dei lettori e ha una sua importanza, soprattutto in articoli molto lunghi, che si prestano a essere suddivisi in capitoli e sezioni.

Concludo con una avvertenza agli utenti di Blogger. Se create un indice con questa modalità, e poi modificate qualcosa nel post, andando su Scrivi, Blogger inserirà automaticamente dei link alla Bacheca, in aggiunta ai collegamenti virtuali che avete configurato. In questo modo l'indice smetterà funzionare. Per modificare un post con l'indice, bisogna quindi tornare sempre su HTML e togliere i link aggiunti da Blogger.

Prima di aggiornare il post vanno quindi eliminati i link aggiunti da Blogger mostrati nello screenshot precedente.

Pubblicato il 05/04/19 - aggiornato il | 1 commento :