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.
Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo
Hai trovato interessante l’articolo? Allora ti consiglio di leggere:
Come creare un tema child per WordPress
Ecco una guida per creare un tema child, il metodo migliore per apportare tutte le modifiche e personalizzazioni al tema principale del tuo WordPress.
Come leggere un file CSV con PHP
Stai cercando un modo per leggere un file CSV tramite PHP per poterne lavorare il contenuto? Ecco un tutorial per imparare a farlo in modo semplice e veloce!