AVVISO IMPORTANTE: Dato l'elevato numero di richieste, Eternal Curiosity non può accettare nuovi clienti, sia che si tratti di consulenze scritte che di ottimizzazione SEO diretta. Valutiamo solo casi eccezionali e ad alto budget. Per informazioni, vi invitiamo a scriverci a info@eternalcuriosity.it

Questo articolo apparteneva al vecchio blog (blog.danilopetrozzi.it), per cui le informazioni potrebbero non essere più aggiornate ed attendibili.

Guida per comprendere e implementare link rel=”prev” e rel=”next”

Nel primo post della serie dedicata allo studio dell’HTML5 ci eravamo soffermati sui metadati che compongono l’head. Tra questi, c’è anche l’elemento “link“, che può essere usato per richiedere una risorsa, come ad esempio un .css, oppure per linkare un collegamento esterno che in qualche modo è relazionato con la pagina (da qui il nome rel=””).

Oggi poneremo l’attenzione su un meta SEO molto importante che viene sottovalutato anche dai più bravi: sto parlando dei tag rel=”prev” e rel=”next”.

Scopo di prev e next: definizione ufficiale

La prima cosa da fare, è sentire cosa ci dice mamma W3C a riguardo. La definizione di questo due attributi è leggermente cambiata nel tempo, per cui vi fornisco la definizione ufficiale implementata nell’HTML5 (qui il paragrafo esatto):

Il “prev” è:

The prev keyword indicates that the document is part of a sequence, and that the link is leading to the document that is the previous logical document in the sequence.

Il “next è “:

The next keyword indicates that the document is part of a sequence, and that the link is leading to the document that is the next logical document in the sequence.

In pratica, prev e next indicano (ad esempio ai motori di ricerca) che la pagina in esame è parte di una sequenza e che i rispetti href di questi elementi puntano alla pagina logicamente precedente (prev) o successiva (next).

Definizione ufficiosa

Da un punto di vista più concreto, rel=”prev” e rel=”next” funzionano come un tradizionale pagination, ma è un indicazione per i motori di ricerca e non per gli utenti (ai quali può essere mostrata una semplice lista di link, sprovvista di tag aggiuntivi). Se io mi trovo all’interno di una sequenza (es. le varie pagine della categoria “Scarpe” di Ebay, ognuna composta da 20 prodotti) ogni pagina è pseudo-identificata da una posizione (la prima pagina delle “Scarpe” con i primi 20 prodotti, la seconda con le scarpe da 21 a 40, terza 41-60 e così via) e quindi è possibile “far presente” ai motori di ricerca questa sequenza logica.

Il fatto che alcune pagine siano “concatenate” oppure “parte della stessa sequenza”, può essere intuitivo per un cervello umano (grazie alla disposizione  grafica, grazie alle indicazioni testuali, ecc), ma non per un motore di ricerca, che rileva solo i dati, non li interpreta realmente (per ora 😀)

Oltre al caso delle varie pagine di categoria di un ecommerce, questi due tag dovrebbero essere usati sopratutto nel caso in cui ci sia una sequenza logica/semantica in corso. Se ad esempio io decidessi di parlare in modo approfondito di Google Webmaster Tools, molto probabilmente suddividerei tutto in 3 o 4 articoli, ognuno focalizzato su diverse aree del tool.

Di conseguenza, genererei 4 pagine differenti, con 4 URL differenti, con 4 title diversi, ma che sono logicamente/semanticamente correlate, in quanto parte della stessa sequenza. (è infatti logico che una volta letto il 1° articolo, si abbia la necessità/desiderio di leggere il 2°, e così via, fino ad arrivare all’ultimo).

Un esempio… mancato

Ero partito con l’idea di farvi vedere un esempio di qualità ma sono rimasto di sasso. Moz.com ha pubblicato da poco una guida completa sulle attività di link building, divisa in numerosi capitoli. Data la quantità enorme di informazioni, hanno suddiviso il topic in 7 capitoli, che ovviamente sono ultra-correlati tra di loro.

Ero sicuro al 101% che avrei trovato i tag rel=”prev” e rel=”next” nei loro codici, dato che avevano anche una table of contents, e altre accortezze che avrebbero facilitato l’operazione… e invece no, si sono completamente dimenticati di questo tag. Il bello è che ne hanno parlato più volte nel blog interno :

La struttura di quei 7 capitoli è l’ideale per implementare gli elementi prev e next, dato che è abbastanza difficile produrre un contenuto così voluminoso, correlato e ben linkato.. valli a capire quelli di Moz!

Sintassi

La sintassi di questi due elementi è veramente facile:

Cosa ne pensa Google

Google ha parlato dei due rel in numerose occasioni, dedicando loro addirittura post interi e video tutorial! Data questa enorme copertura, è plausibile che questi due elementi vengano utilizzati in modo intensivo dal motore di ricerca (sia per la crawlabilità e l’identificazione delle sequenze, sia come fattore di ranking [probabilmente]).

Già nel settembre 2011, sul Webmaster Central Blog di Google, è stato pubblicato un post intitolato Pagination with rel=“next” and rel=“prevcon il quale Google spiega a cosa servono prev/next e come dovrebbero essere implementati.

Sull’argomento, inoltre, è intervenuta anche Maile Ohye con un video ufficiale presente nel supporto per Webmaster di Google:

Citando letteralmente il supporto di Google:

Utilizza gli elementi link rel=”next” e rel=”prev” per indicare la relazione tra gli URL dei componenti. Questo tipo di markup consente a Google di capire che vorresti che considerasse queste pagine come pagine in sequenza logica, il che consente di consolidare le relative proprietà di collegamento e in genere di indirizzare gli utenti alla prima pagina

In che modo gestire i due tag

Una sequenza di pagine può essere formata da 2+n elementi. (il numero minimo è logicamente 2)

Quando c’è una sequenza, sicuramente è presente il primo elemento e l’ultimo. Se la sequenza è maggiore di due, ci sono altri elementi tra i due.

Markup in base alle situazioni

Il markup dei due elementi, varia in base alla pagina su cui si trova:

  • Se mi trovo sulla prima pagina: bisogna indicare solo un rel=”next” che punta alla pagina successiva. Dato che l’elemento è il primo della sequenza, non c’è alcun “prev”.
  • Se mi trovo sull’ultima pagina: bisogna indicare solo un rel=”prev” che punta alla pagina precedente. Dato che l’elemento è l’ultimo della sequenza, non c’è alcun “next”.
  • Se mi trovo in una pagina che non è né prima né ultima: devi indicare un rel=”prev” e un rel=”next” dato che sicuramente c’è una pagina precedente e una successiva all’interno della sequenza.

Esempio

Se la categoria “Scarpe” di Ebay è composta da 4 pagine, allora il markup sarà così:

  • Sulla pagina1:  <link rel=”next” href=”pagina2″>
  • Sulla pagina2:  <link rel=”prev” href=”pagina1″>  <link rel=”next” href=”pagina3″>
  • Sulla pagina3:  <link rel=”prev” href=”pagina2″>  <link rel=”next” href=”pagina4″>
  • Sulla pagina4:  <link rel=”prev” href=”pagina3″>

Chiaro?

Come implementare prev/next con il minimo sforzo

Se usi WordPress, alcuni plugin come WordPress SEO by Yoast inseriscono (in certi casi) i tag prev/next. Ad esempio nelle sottopagine delle categorie, il pagination viene gestito in automatico da Yoast con questi due elementi.

WordPress SEO, però, non può “capire” se c’è una sequenza di articoli o di pagine in cui va inserito questo markup, ed è quindi inutile in quel caso (che è forse il più utile).

Come fare per implementare in modo rapido e intuitivo il markup? Beh… PHP!

Se la quantità di pagine/post “sequenziati” è bassa, puoi creare un unico blocco PHP da inserire nell’head. Se hai bisogno di un sistema più complesso, devi programmare qualcosa di più usabile, oppure devi affidarti a plugin esterni.

Vediamo il codice PHP che gestisce tutto il markup nel caso delle solite 4 pagine di Ebay di prima:

Che cosa avviene nel codice?

Lo script, per prima cosa, preleva l’URL della pagina che stai guardando (con REQUEST_URI). Successivamente controlla se l’URL combacia con uno degli elementi della sequenza e in caso affermativo, tramite array_search va a determinare in quale posizione della sequenza si trova l’url in esame. Se l’URL è il primo, allora inserisce solo un next, se l’URL è l’ultimo inserisce solo un prev, altrimenti se è “fra i due”, inserisce sia un prev che un next.

Se domani pubblico una nuova pagina chiamata pagina5? Che cosa devo modificare? Bisogna semplicemente aggiungere una riga in più nell’array iniziale:

Conclusione

I tag prev e next sono estremamente importanti, sopratutto in ottica SEO. Il fatto di poter comunicare ai motori di ricerca un’informazione così importante come la sequenzialità di alcune pagine/post/categorie, è molto utile, sopratutto per siti di grosse dimensioni e per gli ecommerce.

Finora vi ho parlato solo dei due tag prev/next ma ci sono numerosi altri elementi che possono essere utilizzati. (ad esempio: c’è un rel=”” specifico per indiciare il sommario della sequenza, se c’è, tipo la table of contents di Moz.com)

Spero che il focus su questo meta vi sia stato utile 😉

 

Danilo petrozzi

Ciao! Io sono Danilo Petrozzi, il fondatore di Eternal Curiosity. Oltre a essere un senior SEO Specialist e un Web Developer, è dall'età di 9 anni che mi appassiono a qualsiasi cosa ruoti intorno al web e all'informatica in generale.

Lascia un commento