Google: link ai capitoli di un articolo nello snippet della SERP

Analizzando i risultati della SERP di un sito che gestisco mi sono reso conto che un articolo a cui ho aggiunto un menù interno ha un comportamento particolare nello snippet che compare sul motore di ricerca, implementazione questa che Google ha introdotto nell'ultimo anno e che vediamo nel dettaglio in questo articolo.

Nel dettaglio Google quando va a mostrare lo snippet relativo all'articolo, prima del risultato relativo al contenuto del metatag description, inserisce un link ad un paragrafo presente nel contenuto e contrassegnato da un'ancora HTML in grassetto.

Grazie a questo sistema possiamo pensare di migliorare l'usabilità dei nostri risultati sulla SERP e conseguentemente il CTR relativo.

Come vedete nell'esempio il link è contrassegnato da una pre-label dal testo "passa a" seguita dalla voce del menù che è a tutti gli effetti un link all'ancora presente nell'articolo.

Google introduce un link alle voci di menù di un contenuto nello snippet mostrato sulla #SERP Condividi il Tweet

Mostrare il link alla voce di menù nello snippet

All'interno dell'articolo portato ad esempio ho realizzato un menù ai contenuti interni, grazie a delle ancore HTML ai singoli paragrafi, caratterizzati ognuno da un titolo.

Effettuando una ricerca su Google per la query esatta relativa al titolo del paragrafo il motore di ricerca per il dominio in oggetto trova una articolo dal titolo diverso ma che ha al suo interno un paragrafo dedicato. Il motore di ricerca per migliorare l'usabilità, utilizzando l'ancora segnaposto all'esatta posizione in cui l'utenza potrebbe trovare informazioni in merito alla parola chiave long tail, mostrando così un link "scorciatoia".

Come realizzare un menù in un articolo

Realizzare un menù interno ad un articolo, ai diversi paragrafi, è una buona pratica nel caso di contenuti molto lunghi e corposi e con il quale è possibile migliorare la user-experience dell'utenza.

Per farlo si possono utilizzare dei tool, ad esempio su Wordpress esiste un plugin che automaticamente genera dei menù che puntano ai diversi titoli H presenti nel contenuto, ma di mio preferisco utilizzare la vecchia maniera e realizzare il menù scrivendo da me il codice HTML.

Generare il menù

Per realizzare il menù utilizzo una semplice lista non numerata in HTML, contrassegnata dal tag <ul> e ogni elemento è un contraddistinto <li>. Indentando il codice HTML è possibile realizzare delle sotto voci secondo la classica logica dei tag indentati:
<ul>
<li>Voce 1</li>
<li>Voce 2</li>
<li>Voce 3
<ul>
<Sotto voce 1</li>
<Sotto voce 2</li>
</ul>
</li>
</ul>

Realizzare velocemente un menù con parecchie voci nidificate

Per non commettere errori nel generare menù con molte voci, di cui parecchie nidificate al secondo, terzo o quarto sotto livello utilizzo Office Word dove realizzo il menù e poi lo incollo nell'editor di Wordpress quando utilizzo il CMS in un sito dinamico, oppure su Dreamweaver (in modalità Design) quando devo realizzare solamente del codice HTML e prima di copiare tutto il codice in modalità Code.

Per realizzare un menù con Word è sufficiente premere il bottone relativo ai menù puntati (nell'immagine evidenziata dal box rosso contrassegnato 1) e incomincio a scrivere le diverse voci (3). Per scrivere voci indentate, dopo averle scritte, le seleziono e premo il tasto di indentazione (2) per quante volte è necessario nidificare le voci (4). Il punto elenco cambierà la sua icona in funzione del livello di indentazione.

Con OpenOffice questo metodo non funziona e se provate a copiaincollare il testo otterrete solamente del codice HTML molto sporco.

Inserire i link

Per realizzare i link nel menù è sufficente utilizzare il tag <a> e nell'attributo href="" inserire come valore il nome dell'ancora, contrassegnata dal carattere speciale #.

Per comprendere con semplicità un esempio potrebbe essere:
<li><a href="#voce1">Voce 1</a></li>
<li><a href="#voce2">Voce 2</a></li>

Inserire le ancore per identificare il punto di atterraggio dell'utenza

Dopo aver realizzato il menù vado ad inserire le ancore dove voglio far atterrare l'utenza.

L'ancora è un semplice link HTML, che in genere lascio con testo vuoto e che utilizza l'attributo name="". Il valore dell'attributo name è il valore dell'ancora che abbiamo visto nel paragrafo precedente contrassegnato dal carattere speciale #.

Riferendoci all'esempio precedente le ancore saranno le seguenti:

<a name="voce1"></a><h1>Voce 1</h1>
<a name="sottovoce1"></a><h2>Sottovoce 2</h2>