Next.js E-commerce
Come creare la navigazione a faccette in Next.js senza una trappola di scansione SEO
Crea filtri di categoria utili in Next.js controllando URL canonici, normalizzazione dei parametri, paginazione, combinazioni scansionabili e risultati vuoti.
I filtri possono creare milioni di URL tecnicamente validi da un catalogo modesto. Di solito solo un piccolo sottoinsieme scelto consapevolmente merita di diventare una landing page per la ricerca.
Separa la gerarchia dallo stato dei filtri
Trail Supply usa route di categoria stabili come /women/jackets. Colore, taglia, grado di impermeabilità, fascia di prezzo e ordinamento affinano quell'insieme. La gerarchia delle categorie comunica il catalogo; la maggior parte degli stati dei filtri aiuta l'acquirente all'interno della categoria.
Elenca ogni filtro, valore ammesso, impostazione predefinita e interazione. Decidi quali combinazioni hanno domanda di ricerca distinta, prodotti sufficienti, scorte stabili e contenuti esplicativi unici. Queste possono diventare landing page selezionate; le altre rimangono stati applicativi utili ma non indicizzabili.
Normalizza gli URL con parametri
Usa un nome di parametro per filtro, valori normalizzati in minuscolo, un ordine stabile e nessun parametro con valore predefinito. Rifiuta filtri e valori sconosciuti. Reindirizza forme equivalenti degli URL alla rappresentazione normalizzata quando migliora la coerenza.
Un parser dei filtri deve restituire stato applicativo tipizzato e un URL normalizzato, senza passare searchParams arbitrari alle query del database. Limita numero e complessità dei valori per proteggere database e superficie di scansione.
const filters = filterSchema.parse({
color: searchParams.color,
size: searchParams.size,
sort: searchParams.sort ?? "featured",
});
const normalized = buildFilterUrl("/women/jackets", filters);Renderizza i risultati filtrati sul server
Leggi searchParams nella pagina, valida i filtri, interroga i prodotti sul server e renderizza numero dei risultati, filtri attivi, link ai prodotti e paginazione nella risposta iniziale. I Client Components possono aggiornare i filtri tramite navigazione senza gestire la query del catalogo.
Usa stati di caricamento e risultati vuoti stabili. Un filtro non valido non deve diventare una categoria vuota con risposta di successo. Restituisci una risposta o reindirizza secondo la politica di normalizzazione e offri un percorso utile per rimuovere i filtri quando una combinazione valida non ha risultati.
Scegli esplicitamente le combinazioni indicizzabili
Mantieni una lista di combinazioni ammesse o un catalogo di landing page basato sui contenuti, per esempio per giacche impermeabili da donna. Una combinazione indicizzabile richiede URL canonico, titolo, H1, descrizione, link interni e risultati stabili sufficienti propri. Va esaminata come ogni altra pagina di contenuti.
Non dedurre l'indicizzabilità solo perché una combinazione restituisce attualmente prodotti. Le variazioni delle scorte possono renderla vuota domani e combinazioni diverse possono rispondere allo stesso intento. I team di prodotto e ricerca devono essere responsabili insieme dell'insieme approvato.
Allinea URL canonici, robots, link e sitemap
Per una landing page approvata, imposta un URL canonico che punti alla pagina stessa, rendila indicizzabile, collegala da pagine centrali pertinenti e includila nella sitemap. Per gli stati ordinari dei filtri, applica coerentemente la politica scelta per canonical e robots ed evita link scansionabili verso combinazioni illimitate.
Un blocco in robots.txt impedisce la scansione e può impedire ai crawler di vedere una direttiva canonical o noindex sulla pagina bloccata. Scegli il controllo in base all'obiettivo reale. Le regole robots non ripuliscono un generatore di URL che continua a produrre link senza fine.
Gestisci paginazione e ordinamento
Assegna ai risultati paginati delle categorie URL stabili e link normali, così utenti e crawler possono raggiungere i prodotti nelle pagine successive. Non impostare tutte le pagine come canoniche rispetto alla prima se contengono link a prodotti diversi. L'ordinamento di solito cambia l'ordine, non la risorsa, e normalmente non deve creare una landing page di ricerca separata.
Mantieni stabile la paginazione quando cambiano i filtri. Torna alla prima pagina dopo un nuovo filtro, rifiuta le pagine fuori intervallo con uno stato significativo e assicurati che l'URL canonico rappresenti lo stato normalizzato effettivamente renderizzato.
Misura il comportamento dei crawler e il costo del server
Esamina i log delle richieste per parametri inattesi, combinazioni vuote ripetute, paginazione profonda e carico sul database dovuto ai bot. Confronta gli URL della sitemap con quelli indicizzati e scoperti. Un divario crescente spesso rivela discovery accidentale o landing page poco utili.
Memorizza in cache categorie e landing page approvate con tag mirati, ma limita le query di filtri arbitrarie e proteggi il database. I log dell'ambiente di esecuzione Adios mantengono il comportamento delle richieste associato al rilascio che le serve, aiutando il team a collegare un picco di scansioni alla modifica di route o link che lo ha generato.
Verifica la politica prima della promozione
Crea una tabella di URL normali, equivalenti, approvati, vuoti, non validi, ordinati, paginati e fuori intervallo. Verifica stato finale, reindirizzamento, URL canonico, valore robots, H1, risultati, link interni e presenza nella sitemap. Così una politica SEO vaga diventa un insieme di aspettative eseguibili.
Distribuisci la candidata in un'anteprima Adios ed esegui le verifiche della tabella sulla compilazione di produzione. Esamina i log per carichi di query inattesi e verifica la route di controllo dello stato. Promuovi la modifica di instradamento solo quando il comportamento normalizzato è corretto; altrimenti il dominio personalizzato canonico rimane sull'ultima versione sana.