Home>Guide>Come aggiungere gli attributi prev e next

Come aggiungere gli attributi prev e next


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!

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" e rel="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



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Come creare un tema child per WordPress

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

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!

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)