SEO produit Next.js : métadonnées, schéma et variantes

Choisir le modèle de produit canonique

Trail Supply vend Alpine Shell en bleu et rouge, en plusieurs tailles. La présentation du produit est commune ; couleur et taille sont des choix d’achat. Sa page canonique est /products/alpine-shell. Des paramètres peuvent restaurer une sélection pour l’utilisateur, sans devenir automatiquement des produits indexables distincts.

Ne créez des URL de variantes que si elles ont une valeur indépendante durable : contenu, images, demande et découverte interne distincts. Définissez la règle avant l’implémentation, puis alignez redirections, liens internes, sitemap, métadonnées et données structurées.

Rendre toutes les informations utiles du produit

Chargez le produit publié et ses variantes achetables dans un Server Component. Rendez le nom, la description, le prix ou sa plage, les détails de matière et de coupe, l’explication de disponibilité, les images, les informations de livraison ou de retour, le fil d’Ariane et les produits associés. Utilisez les Client Components pour la sélection et le panier.

Appelez notFound pour un produit inconnu. Pour un produit retiré, décidez si ses informations historiques, liens de remplacement et intérêt pour l’assistance justifient de conserver une page avec statut de succès. Évitez une page vide réussie indiquant simplement que le produit n’existe plus.

Générer des métadonnées à partir de données résolues

Utilisez la même requête produit mémoïsée pour generateMetadata et la page. Construisez un titre et une description précis, l’URL canonique du produit et son visuel. Un enregistrement absent ou non publié ne doit pas révéler de titre dans les métadonnées avant une réponse introuvable.

Définissez metadataBase à la racine et utilisez des URL d’images stables avec leurs dimensions réelles. Le titre doit distinguer le produit sans ajouter chaque mot-clé de variante et de catégorie. Gardez le H1 visible et le titre des métadonnées cohérents dans leur sens.

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

Offrir un affichage stable des images

Stockez avec chaque image sa largeur, sa hauteur, son texte alt, son association à une variante et son ordre de tri. Utilisez next/image avec des tailles responsives pour réserver l’espace et demander une ressource adaptée. Ne priorisez que l’image principale visible avant défilement.

Changer la couleur peut modifier la galerie sans changer l’URL canonique. Le rendu initial serveur doit montrer la variante par défaut ou demandée valide ; les paramètres invalides doivent se rabattre de façon prévisible plutôt que produire une galerie vide.

Générer les données Product et Offer

Construisez le JSON-LD Product depuis le même enregistrement que la page. Incluez les vrais noms, images, SKU ou identifiants produit, marque et offres correspondant aux choix d’achat visibles. Utilisez la bonne URL de disponibilité et la bonne devise. N’émettez pas d’avis ou de notes agrégées sans données réelles visibles.

Pour les variantes, représentez le modèle d’offre ou de groupe correspondant à la page réelle. Un prix minimal codé en dur peut tromper si la variante sélectionnée coûte davantage. Si la page affiche une plage, gardez la représentation structurée et le paiement cohérents avec elle.

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

Relier les catégories et le fil d’Ariane

Reliez Alpine Shell depuis sa catégorie canonique de vestes, les guides éditoriaux pertinents et les recommandations choisies. Utilisez un texte de lien descriptif et un fil d’Ariane visible. Générez le JSON-LD BreadcrumbList depuis cette même hiérarchie canonique.

Un sitemap aide la découverte sans remplacer l’architecture du site. Les produits importants doivent être accessibles par des liens classiques. Excluez des sitemaps produits les URL redirigées, noindex, non publiées et les variantes non canoniques.

Tester les états limites du produit

Testez un slug inconnu, un produit retiré, une image absente, une variante indisponible, toutes les variantes indisponibles, un prix modifié, une sélection par paramètre et un slug renommé. Comparez le HTML brut au résultat hydraté et validez le JSON-LD depuis la réponse réelle.

Adios permet à Trail Supply de tester ces états sur la compilation de production via une route HTTPS générée. Consultez les journaux de compilation et d’exécution, vérifiez la santé, puis promouvez la version vers le domaine canonique personnalisé avec TLS géré.