E-commerce com Next.js
Como criar navegação facetada no Next.js sem uma armadilha de exploração para SEO
Crie filtros úteis de categorias no Next.js controlando URLs canônicas, normalização de parâmetros, paginação, combinações exploráveis e resultados vazios.
Filtros podem gerar milhões de URLs tecnicamente válidas a partir de um catálogo modesto. Em geral, apenas um subconjunto pequeno e escolhido deliberadamente merece ser uma página de destino de busca.
Separar a hierarquia do estado do filtro
Trail Supply usa rotas duráveis de categorias como /women/jackets. Cor, tamanho, grau de impermeabilidade, faixa de preço e ordenação refinam esse conjunto. A hierarquia das categorias organiza o catálogo; a maior parte dos filtros existe para ajudar o comprador dentro da categoria.
Liste cada filtro, valor permitido, padrão e interação. Defina quais combinações têm demanda de busca própria, produtos suficientes, estoque estável e conteúdo explicativo exclusivo. Elas podem virar páginas de destino selecionadas; as demais continuam como estados úteis e não indexáveis da aplicação.
Normalizar URLs de parâmetros
Use um nome de parâmetro por filtro, valores normalizados em minúsculas, ordem estável e nenhum parâmetro com valor padrão. Rejeite filtros e valores desconhecidos. Redirecione formatos equivalentes de URL para a representação normalizada quando isso melhorar a consistência.
O parser de filtros deve retornar estado tipado da aplicação e uma URL normalizada, sem passar searchParams arbitrários para consultas ao banco. Limite a quantidade de valores e a complexidade para proteger o banco e o volume de URLs exploráveis.
const filters = filterSchema.parse({
color: searchParams.color,
size: searchParams.size,
sort: searchParams.sort ?? "featured",
});
const normalized = buildFilterUrl("/women/jackets", filters);Renderizar os resultados filtrados no servidor
Leia searchParams na página, valide os filtros, consulte produtos no servidor e renderize quantidade de resultados, filtros ativos, links de produtos e paginação na resposta inicial. Client Components podem atualizar os filtros pela navegação sem controlar a consulta do catálogo.
Use estados estáveis de carregamento e vazio. Um filtro inválido não deve retornar uma categoria vazia com sucesso. Responda ou redirecione conforme a política de normalização e ofereça uma forma útil de limpar os filtros para combinações válidas sem resultados.
Escolha explicitamente combinações indexáveis
Mantenha uma lista de combinações permitidas ou um catálogo de páginas de destino com conteúdo para casos como jaquetas impermeáveis femininas. Uma combinação indexável precisa de URL canônica, título, H1, descrição, links internos e resultados estáveis suficientes. Revise-a como qualquer página de conteúdo.
Não considere uma combinação indexável só porque ela retorna produtos agora. Mudanças no estoque podem esvaziá-la amanhã, e várias combinações podem atender à mesma intenção. As equipes de produto e busca devem definir juntas o conjunto aprovado.
Alinhar URLs canônicas, robots, links e sitemaps
Para uma página de destino aprovada, faça a URL canônica apontar para ela mesma, permita a indexação, inclua links em páginas centrais relevantes e adicione-a ao sitemap. Para estados comuns de filtros, aplique consistentemente a política de canonical e robots escolhida e evite links exploráveis para combinações ilimitadas.
Bloquear em robots.txt impede a exploração e pode impedir que os robôs vejam canonical ou noindex na página bloqueada. Escolha o controle conforme o objetivo real. Regras robots não corrigem um gerador de URLs que continua produzindo links sem fim.
Lidar com paginação e ordenação
Dê aos resultados paginados URLs estáveis e links comuns para que usuários e robôs alcancem produtos mais adiante. Não faça a URL canônica de todas as páginas apontar para a primeira quando elas têm links de produtos diferentes. Ordenar normalmente muda a ordem, não o recurso, e não deve criar outra página de destino de busca.
Mantenha a paginação estável quando os filtros mudarem. Volte à primeira página após um novo filtro, rejeite páginas fora do intervalo com um status apropriado e faça a URL canônica representar o estado normalizado efetivamente renderizado.
Meça o comportamento de rastreamento e o custo do servidor
Inspecione os logs de requisições para encontrar parâmetros inesperados, combinações vazias repetidas, paginação profunda e carga no banco causada por bots. Compare URLs do sitemap com URLs indexadas e descobertas. Uma diferença crescente costuma indicar descoberta acidental ou páginas de destino pouco úteis.
Coloque categorias e páginas de destino aprovadas em cache com tags específicas, mas limite consultas arbitrárias de filtros e proteja o banco. Os logs de execução da Adios vinculam o comportamento das requisições à versão que as atende, ajudando a relacionar um pico de exploração à alteração de rotas ou links que o causou.
Teste a política antes da promoção
Monte uma tabela de URLs normais, equivalentes, aprovadas, vazias, inválidas, ordenadas, paginadas e fora do intervalo. Verifique status final, redirecionamento, URL canônica, valor robots, H1, resultados, links internos e presença no sitemap. Isso transforma uma política vaga de SEO em expectativas executáveis.
Implante a versão candidata em uma prévia Adios e execute a tabela de testes contra a compilação de produção. Inspecione os logs em busca de carga inesperada e verifique a rota de saúde. Promova a mudança de roteamento apenas quando a normalização estiver correta; caso contrário, o domínio canônico permanece na última versão saudável.