Come aggiungere gli attributi prev e next

Quando si costruisce un sito web, capita spesso di avere dei contenuti suddivisi in pagine: ad esempio, in un blog quasi sicuramente gli articoli verranno paginati, così come succede nella maggior parte degli e-commerce alle pagine di categoria. Nei casi più estremi, addirittura capita di trovare un singolo articolo suddiviso in più pagine.
Ma forse ti starai chiedendo: ma questo contesto, come va gestito a livello SEO? Che ripercussioni potrebbe avere sul posizionamento?
- Leggi l'articolo, ti bastano solo 1 minuto, 19 secondi
Sei di fretta? Scarica il PDF e consultalo quando vuoi!
Sommario
1 Utilizzo degli attributi rel="prev" e rel="next" |
2 Un esempio pratico |
3 Sintassi degli attributi |
4 Gli attributi rel="prev" e rel="next" in WordPress |
5 In conclusione |
6 Commenti |
Utilizzo degli attributi rel="prev" e rel="next"
Una delle best practice che Google suggerisce quando si parla di contenuti suddivisi in pagine, è l’utilizzo degli attributi HTML rel="prev"
e rel="next"
, per suggerire al crawler del motore di ricerca quali possano essere le relazioni tra le pagine suddivise e quale possa essere la sequenza logica di lettura.
I vantaggi principali nell’utilizzo di questi elementi sono sicuramente:
- Migliore indicizzazione, dal momento che (semplificando al massimo) i contenuti suddivisi vengono percepiti dal motore di ricerca come una unica pagina;
- Migliore esperienza utente, dal momento che il motore di ricerca sceglierà quale delle pagine che costituiscono un insieme unico può rispondere al meglio a ciò che l’utente ha cercato.
Un esempio pratico
Per fissare il concetto, proviamo a metterlo in pratica in un esempio reale: ipotizza di avere un e-commerce con la categoria “Smartphone” in cui ci sono 70 prodotti. Ora, se il tuo sito è impostato per visualizzare 20 prodotti per pagina, avresti una situazione del genere:
– https://www.nomedominio.it/shop/categoria/smartphone/pagina/1/ (con 20 prodotti)
– https://www.nomedominio.it/shop/categoria/smartphone/pagina/2/ (con 20 prodotti)
– https://www.nomedominio.it/shop/categoria/smartphone/pagina/3/ (con 20 prodotti)
– https://www.nomedominio.it/shop/categoria/smartphone/pagina/4/ (con 10 prodotti)
In questo contesto, bisognerebbe indicare al motore di ricerca le relazioni tra queste pagine, così da consolidarne i collegamenti ed indirizzare gli utenti alla migliore di esse in base alla ricerca effettuata dall’utente.
Sintassi degli attributi
Ma dove vanno posizionati gli attributi rel="prev"
e rel="next"
e soprattutto come vanno indicati? Beh, la domanda è sicuramente pertinente! Tante chiacchiere, ma poi? Come si fa?
La sintassi degli attributi rel="next"
e rel="prev"
è piuttosto semplice:
<link rel="prev" href="{link_della_pagina_precedente}"> <link rel="next" href="{link_della_pagina_successiva}">
e vanno posizionati all’interno della sezione indicata dal tag HTML <head>
, indicando negli attributi href
i link della pagina rispettivamente precedente e successiva rispetto a quella attuale.
Quindi, sempre per essere pragmatici, la nostra situazione precedente darà:
https://www.nomedominio.it/shop/categoria/smartphone/pagina/1/
<link rel=”next” href=”https://www.nomedominio.it/shop/categoria/smartphone/pagina/2/”>
https://www.nomedominio.it/shop/categoria/smartphone/pagina/2/
<link rel=”prev” href=”https://www.nomedominio.it/shop/categoria/smartphone/pagina/1/”>
<link rel=”next” href=”https://www.nomedominio.it/shop/categoria/smartphone/pagina/3/”>
https://www.nomedominio.it/shop/categoria/smartphone/pagina/3/
<link rel=”prev” href=”https://www.nomedominio.it/shop/categoria/smartphone/pagina/2/”>
<link rel=”next” href=”https://www.nomedominio.it/shop/categoria/smartphone/pagina/4/”>
https://www.nomedominio.it/shop/categoria/smartphone/pagina/4/
<link rel=”prev” href=”https://www.nomedominio.it/shop/categoria/smartphone/pagina/3/”>
Naturalmente, avrai notato che nella prima pagina, manca il riferimento alla pagina precedente, mentre nell’ultima, manca il riferimento alla pagina successiva.
Gli attributi rel="prev" e rel="next" in WordPress
Ma se volessi implementare gli attributi rel="prev"
e rel="next"
nelle pagine di archivio in WordPress, è possibile?
Certo, e farlo risulta anche molto semplice!
WordPress mette a disposizione due funzioni molto utili per lo scopo: get_previous_posts_link()
e get_next_posts_link()
che si occupano di recuperare e restituire il link alla pagina precedente e successiva di un elenco di post, rispetto a quello attuale.
Quindi, è sufficiente editare il file:
wp-content/themes/{nome_del_tema}/functions.php
che trovi nello spazio FTP del tuo sito ed inserire il codice:
// Aggiunge gli attributi rel prev & next add_action( 'wp_head', function() { global $paged; if ( get_previous_posts_link() ) { echo '<link rel="prev" href="' . get_pagenum_link( $paged - 1 ) . '" />' . "\n"; } if ( get_next_posts_link() ) { echo '<link rel="next" href="' . get_pagenum_link( $paged + 1 ) . '" />' . "\n"; } } );
Nota l’utilizzo delle funzioni get_previous_posts_link()
e get_next_posts_link()
: sono state adoperate solamente per verificare se esiste un eventuale link alla pagina precedente (o successiva); in caso affermativo, viene utilizzata la funzione get_pagenum_link()
che recupera il link di un determinato numero di pagina, in caso di presenza del paginatore.
C’è da considerare, per chiarire le idee, che la variabile $paged richiamata ed utilizzata, contiene proprio il numero di pagina attuale, nel caso in cui l’utente sia in una pagina di archivio con paginatore.
In conclusione
L’utilizzo degli attributi rel="prev"
e rel="next"
possono essere molto utili in fase di ottimizzazione ai fini dell’indicizzazione, in quanto danno un’importante indicazione del flusso logico-sequenziale dei contenuti. Perché ho sottolineato indicazione? Proprio perché lo stesso Google ci dice che:
rel="prev"
erel="next"
sono suggerimenti per Google, non istruzioni categoriche
Ricorda infine che sebbene gli attributi rel="prev"
e rel="next"
accettino sia link in forma assoluta sia in forma relativa, è preferibile e si consiglia l’utilizzo della prima.