SEO dei prodotti in Next.js: metadati, schema e varianti

Scegli il modello canonico del prodotto

Trail Supply vende Alpine Shell in blu e rosso, con più taglie. Le informazioni del prodotto sono comuni; colore e taglia sono scelte d'acquisto. La pagina canonica è /products/alpine-shell. I parametri di query possono ripristinare una selezione per gli utenti, ma non diventano automaticamente prodotti separati indicizzabili.

Crea URL di variante solo se la variante ha un valore indipendente stabile: contenuti, immagini, domanda e discovery interna distinti. Scrivi la regola prima dell'implementazione, poi allinea reindirizzamenti, link interni, voci delle sitemap, metadati e dati strutturati.

Renderizza tutte le informazioni del prodotto

Carica prodotto pubblicato e varianti acquistabili in un Server Component. Renderizza nome, descrizione, prezzo o intervallo, dettagli di materiale e vestibilità, spiegazione della disponibilità, immagini, informazioni su spedizioni o resi, breadcrumb e prodotti correlati. Usa Client Components per selezione e interazione con il carrello.

Chiama notFound per un prodotto sconosciuto. Per un prodotto fuori catalogo, valuta se informazioni storiche, link a sostituti e utilità per l'assistenza giustificano una pagina con risposta di successo. Evita un template vuoto con stato di successo che si limiti a dire che l'articolo non esiste più.

Genera metadati dai dati risolti

Usa la stessa query memoizzata del prodotto per generateMetadata e per la pagina. Crea titolo e descrizione specifici, URL canonico del prodotto e scheda con la sua immagine. Un record mancante o non pubblicato non deve esporre il titolo nei metadati prima che la pagina restituisca contenuto non trovato.

Imposta metadataBase nel layout radice e usa URL stabili delle immagini con dimensioni reali. I titoli dei prodotti devono distinguere l'articolo senza aggiungere ogni parola chiave di variante e categoria. Mantieni H1 visibile e titolo dei metadati semanticamente coerenti.

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] },
  };
}

Crea un'esperienza stabile con le immagini

Conserva con ogni risorsa larghezza e altezza dell'immagine, testo alt, associazione alla variante e ordinamento. Usa next/image con sizes responsive, così il browser può riservare spazio e richiedere una risorsa appropriata. Dai priorità solo all'immagine principale visibile senza scorrere.

Cambiare colore può aggiornare la galleria senza cambiare l'URL canonico. Il rendering iniziale sul server deve mostrare la variante predefinita o quella valida richiesta; parametri di selezione non validi devono usare un fallback prevedibile, senza generare gallerie vuote.

Genera dati Product e Offer

Crea il JSON-LD Product dallo stesso record usato dalla pagina. Includi nomi reali, immagini, SKU o identificatori dei prodotti, marchio e offerte coerenti con le opzioni d'acquisto visibili. Usa URL di disponibilità e valuta appropriati. Non pubblicare recensioni o valutazioni aggregate senza dati reali e visibili che le sostengano.

Per le varianti, rappresenta il modello di offerta o gruppo corrispondente alla pagina reale. Fissare nel codice un solo prezzo minimo può ingannare quando la variante selezionata costa di più. Se la pagina mostra un intervallo, mantieni rappresentazione strutturata e checkout coerenti con quell'intervallo.

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",
  }));

Crea relazioni tra categorie e breadcrumb

Collega Alpine Shell dalla sua categoria canonica di giacche, da guide editoriali pertinenti e da consigli di prodotto selezionati. Usa testi dei link descrittivi e breadcrumb visibili. Genera JSON-LD BreadcrumbList dalla stessa gerarchia canonica.

Una sitemap facilita la scoperta, ma non sostituisce l'architettura del sito. I prodotti importanti devono essere raggiungibili tramite link normali. Escludi dalle sitemap dei prodotti gli URL reindirizzati, noindex, non pubblicati e quelli di varianti non canoniche.

Verifica i casi limite dei prodotti

Verifica slug sconosciuto, prodotto fuori catalogo, immagine mancante, una variante indisponibile, tutte le varianti indisponibili, prezzo modificato, parametro di selezione nella query e slug rinominato. Confronta l'HTML originale con l'output dopo l'idratazione e valida il JSON-LD nella risposta effettiva.

Adios permette a Trail Supply di verificare questi stati sulla compilazione di produzione dietro una route HTTPS generata. Esamina i log della compilazione e dell'ambiente di esecuzione, verifica la route di controllo dello stato e promuovi poi il rilascio sul dominio personalizzato canonico con TLS gestito.