SEO de produtos Next.js: metadados, esquema e variantes

Escolha o modelo de produto canônico

Trail Supply vende Alpine Shell em azul e vermelho e vários tamanhos. As características do produto são comuns; cor e tamanho são opções de compra. A página canônica é /products/alpine-shell. Parâmetros podem restaurar a seleção do usuário, mas não se tornam automaticamente produtos indexáveis separados.

Crie URLs de variantes apenas quando houver valor independente e durável: conteúdo, imagens, demanda e descoberta interna próprios. Documente a regra antes de implementar e alinhe redirecionamentos, links, sitemap, metadados e dados estruturados.

Renderizar todas as informações do produto

Carregue o produto publicado e as variantes à venda em um Server Component. Renderize nome, descrição, preço ou faixa, detalhes de material e caimento, disponibilidade, imagens, informações de frete ou devolução, trilha de navegação e produtos relacionados. Use Client Components para seleção e interação com o carrinho.

Chame notFound para um produto desconhecido. Para um descontinuado, avalie se informações históricas, links de substituição e utilidade para suporte justificam manter a página com sucesso. Evite um template vazio com status de sucesso que apenas informa que o item acabou.

Gerar metadados a partir dos dados resolvidos

Use a mesma consulta memoizada de produto em generateMetadata e na página. Crie título e descrição específicos, URL canônica e cartão de imagem do produto. Um registro ausente ou não publicado não deve expor seu título nos metadados antes de a página retornar recurso não encontrado.

Defina metadataBase no layout raiz e use URLs estáveis de imagens com dimensões reais. Os títulos devem distinguir o produto sem acrescentar todas as palavras-chave de variantes e categorias. Alinhe o significado do H1 visível ao título dos metadados.

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const product = await getProduct(slug);
  if (!product) return { title: "Product not found" };

  return {
    title: product.name,
    description: product.seoDescription,
    alternates: { canonical: "/products/" + product.slug },
    openGraph: { images: [product.primaryImage.url] },
  };
}

Criar uma experiência de imagem estável

Armazene largura, altura, alt, variante associada e ordenação de cada imagem. Use next/image com sizes responsivos para o navegador reservar espaço e buscar o recurso adequado. Priorize apenas a imagem principal inicialmente visível.

Mudar a cor pode atualizar a galeria sem alterar a URL canônica. A renderização inicial no servidor deve mostrar a variante padrão ou uma variante solicitada válida; parâmetros inválidos devem usar um fallback previsível, não produzir galerias vazias.

Gerar dados Product e Offer

Gere JSON-LD Product a partir do registro usado pela página. Inclua nomes reais, imagens, SKU ou identificadores, marca e ofertas compatíveis com as opções visíveis de compra. Use URL de disponibilidade e moeda apropriadas. Não publique resenhas ou avaliações agregadas sem dados reais visíveis que as sustentem.

Para variantes, use o modelo de oferta ou grupo compatível com a página real. Fixar o menor preço no código pode enganar se a variante selecionada custar mais. Se a página mostra uma faixa, mantenha dados estruturados e checkout consistentes com ela.

const offers = product.variants
  .filter((variant) => variant.active)
  .map((variant) => ({
    "@type": "Offer",
    sku: variant.sku,
    price: variant.price.amount,
    priceCurrency: variant.price.currency,
    availability: variant.inStock
      ? "https://schema.org/InStock"
      : "https://schema.org/OutOfStock",
  }));

Criar relações entre categorias e trilhas de navegação

Inclua links para Alpine Shell na categoria canônica de jaquetas, em guias editoriais relevantes e em recomendações selecionadas. Use textos de link descritivos e trilhas visíveis. Gere JSON-LD BreadcrumbList a partir da mesma hierarquia canônica.

O sitemap ajuda na descoberta, mas não substitui a arquitetura do site. Produtos importantes devem ser acessíveis por links comuns. Exclua dos sitemaps de produtos URLs redirecionadas, noindex, não publicadas e variantes não canônicas.

Testar estados de produtos com casos limites

Teste slug desconhecido, produto descontinuado, imagem ausente, uma variante indisponível, todas indisponíveis, preço alterado, parâmetro selecionado e slug renomeado. Compare HTML bruto e saída hidratada e valide o JSON-LD da resposta real.

A Adios permite que Trail Supply teste esses estados na compilação de produção por uma rota HTTPS gerada. Inspecione logs de compilação e execução, verifique a rota de saúde e promova a versão para o domínio canônico com TLS gerenciado.