20/06/2016 Search Engine Intelligence 2 8438
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.

snippet link ancoraCome 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

menu nidificato wordPer 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>

Condividi:
pino

Nato con la passione per l'informatica da mamma Access e papà ASP nel 2002 rinnego repentinamente la mia paternità facendomi adottare da papà PHP e mamma SQL.
Allevo HTML e correlati fiori in CSS mentre vedo i frutti del mio orticello SEO crescere grazie alla passione e alla dedizione della coltura biodinamica; perchè il biologico è fin troppo artificiale.
Realizzo siti internet a tempo pieno, nei restanti momenti mi occupo di redigere articoli per questo sito e saltuariamente far esperimento nel mare che è internet.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *


Commenti
Gabriele Carniani
Rispondi 29-06-2016 12:08
Gabriele Carniani
Pino ciao Grazie per l'ottimo post Dopo averlo letto Ho iniziato a mettere l'indice nei post del mio sito internet Domanda Lo snippet si aggiorna da solo? O bisogna fare qualcosa Tipo Ad esempio Tramite search console Grazie ancora A presto
Pino
Rispondi 29-06-2016 13:50
Pino
Ciao Gabriele, lo snippet si "aggiorna" da solo o meglio si modifica automaticamente quando trova una corrispondenza.
Approfondimenti correlati
Scopri di piùLeggi di piùScopri di più

Ricerche correlate: Google effettua esperimenti di stile

Ieri Alessio mi ha fatto notare che il motore di ricerca Google sta effettuando delle prove sulla SERP, modificando l'aspetto…

Scopri di piùLeggi di piùScopri di più

Immagini featured nella SERP mobile per query informazionali

In questi giorni Alessio, mi ha fatto notare come lui e altri consulenti SEO abbiano riscontrato delle immagini associate agli…

Scopri di piùLeggi di piùScopri di più

Google: aggiornamento in SERP per query competitive e ricerche locali

Da fine agosto (di mio me ne sono accorto a partire dai primi di settembre) Google ha effettuato un drastico…

Scopri di piùLeggi di piùScopri di più

Come funziona un motore di ricerca

Si stima che nel World Wide Web sono presenti più di 10 miliardi di pagine. Un’immensità d’informazioni, potenzialmente infinite, dove…

Scopri di piùLeggi di piùScopri di più

AMP, le pagine “accelerate” tra i risultati di ricerca di Google

Abbiamo visto in passato sulle pagine di questo sito cos'è AMP, come configurarlo su Wordpress e come compaiono i risultati…

Scopri di piùLeggi di piùScopri di più

Link-building: una attività (ancora) fondamentale nella SEO

Pur se gli ingegneri di Google ci dicono che la link-building diverrà sempre meno un fattore di ranking, a fronte…