SEO de productos en Next.js: metadatos, schema y variantes

Elige el modelo canónico del producto

Trail Supply vende Alpine Shell en azul y rojo, con varias tallas. La descripción del producto es común; el color y la talla son selecciones de compra. Su página canónica es /products/alpine-shell. Los parámetros de consulta pueden restaurar una selección para los usuarios, pero no se convierten automáticamente en productos indexables separados.

Crea URL de variantes solo cuando una variante tenga un valor independiente y duradero: contenido, imágenes, demanda y vías de descubrimiento interno propios. Define la regla antes de implementarla y alinea después las redirecciones, los enlaces internos, las entradas del sitemap, los metadatos y los datos estructurados.

Renderiza toda la información del producto

Carga el producto publicado y las variantes que se pueden comprar en un Server Component. Renderiza el nombre, la descripción, el precio o intervalo de precios, los detalles de material y ajuste, la explicación de disponibilidad, las imágenes, la información de envío o devolución, las rutas de navegación y los productos relacionados. Usa Client Components para la selección y la interacción con el carrito.

Llama a notFound cuando el producto no exista. Para un producto descatalogado, decide si la información histórica, los enlaces a sustitutos y su utilidad para dar soporte justifican mantener una página con estado de éxito. Evita una plantilla vacía con estado de éxito que solo indique que el artículo ya no está disponible.

Genera los metadatos a partir de los datos resueltos

Usa la misma consulta de producto memoizada para generateMetadata y la página. Crea un título y una descripción específicos, una URL canónica del producto y una tarjeta con su imagen. Un registro inexistente o no publicado no debe exponer un título a través de los metadatos antes de que la página devuelva el estado de contenido no encontrado.

Configura metadataBase en la raíz y usa URL de imágenes estables con dimensiones reales. Los títulos de producto deben distinguir el artículo sin añadir todas las palabras clave de variantes y categorías. Mantén el H1 visible y el título de los metadatos alineados semánticamente.

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

Ofrece una experiencia estable con las imágenes

Guarda con cada recurso la anchura y la altura de la imagen, el texto alternativo, la variante asociada y el orden de presentación. Usa next/image con sizes adaptables para que el navegador pueda reservar espacio y solicitar un recurso adecuado. Da prioridad solo a la imagen principal que aparece antes de desplazarse por la página.

Cambiar el color puede actualizar la galería sin cambiar la URL canónica. El renderizado inicial del servidor debe mostrar la variante predeterminada o la variante válida solicitada, mientras que los parámetros de selección inválidos deben recurrir a una alternativa predecible, en lugar de producir galerías vacías.

Genera los datos de Product y Offer

Genera el JSON-LD de Product a partir del mismo registro que usa la página. Incluye nombres reales, imágenes, SKU o identificadores de producto, la marca y ofertas que coincidan con las opciones de compra visibles. Usa la URL de disponibilidad y la moneda adecuadas. No publiques reseñas ni valoraciones agregadas si no hay datos reales y visibles que las respalden.

Para las variantes, representa el modelo de oferta o grupo que corresponda a la página real. Un único precio mínimo fijado en el código puede resultar engañoso cuando la variante seleccionada que se muestra cuesta más. Si la página muestra un intervalo de precios, mantén la representación estructurada y el proceso de pago coherentes con ese intervalo.

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

Relaciona las categorías y las rutas de navegación

Enlaza a Alpine Shell desde su categoría canónica de chaquetas, las guías editoriales pertinentes y las recomendaciones de productos seleccionadas. Usa textos de enlace descriptivos y rutas de navegación visibles. Genera el JSON-LD de BreadcrumbList a partir de esa misma jerarquía canónica.

Un sitemap facilita el descubrimiento, pero no sustituye la arquitectura del sitio. Los productos importantes deben ser accesibles mediante enlaces normales. Excluye de los sitemaps de productos las URL redirigidas, con noindex, no publicadas y de variantes no canónicas.

Prueba los casos límite del producto

Prueba un slug desconocido, un producto descatalogado, una imagen ausente, una variante no disponible, todas las variantes no disponibles, un precio modificado, un parámetro de consulta de selección y un slug renombrado. Compara el HTML sin procesar con la salida hidratada y valida el JSON-LD de la respuesta real.

Adios permite a Trail Supply probar esos estados en la compilación de producción mediante una ruta HTTPS generada. Inspecciona los registros de compilación y del entorno de ejecución, verifica la ruta de comprobación de estado y promueve la versión al dominio personalizado canónico con TLS gestionado.