Generatore di paginazione in HTML e CSS

Generatore di paginazione in HTML e CSS: a cosa serve

Crea la paginazione del blog, del negozio o della lista di risultati: inserisci il totale delle pagine, quella corrente, quante vicine mostrare e il formato dell’indirizzo, come /blog/pagina/{n} o ?page={n}. Scegli tra gli stili quadrato, tondo e minimalista e il colore di evidenza.

Il codice usa nav con aria-label, aria-current=page sulla pagina corrente e veri link a href, che Google può seguire per trovare gli elementi delle pagine successive. Ogni numero ha un’area di tocco di 44 px e sullo smartphone i testi di precedente e successiva diventano solo le frecce.

Come si usa

1. Inserisci il totale delle pagine e quella corrente.
2. Scegli indirizzo, stile e colore.
3. Copia il codice nel sito.

Quando usarlo

• Blog con molti post.
• Lista dei prodotti del negozio.
• Risultati di ricerca.

Domande frequenti

Perché usare link e non pulsanti?

Ogni pagina della lista deve avere un indirizzo proprio, come /blog/pagina/2 o ?page=2, in un normale link a href. Così Google può seguire i link e trovare gli elementi delle pagine successive, e la persona può aprire una pagina in un’altra scheda o condividere l’indirizzo.

Come funzionano i puntini di sospensione?

Con molte pagine, la paginazione mostra la prima, l’ultima e alcune vicine a quella corrente, e mette … al posto di quelle escluse. Scegli tu quante vicine compaiono per lato.

Devo mettere rel=prev e rel=next?

Non per Google, che ha smesso di usare queste indicazioni nel 2019. Non danneggiano e altri sistemi possono ancora leggerle, quindi lo strumento mette rel nei link di precedente e successiva.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili