- Definieren Sie Storefront-Template-Typen. Kategorieseiten, Produktlistenseiten, PDPs, Brand-Seiten, Kampagnenseiten und Guides erhalten jeweils eigene Standards für Metadaten, Schema und Internal Links.
- Systematische Metadaten. Mit der Next.js Metadata API lassen sich Title, Description, Canonical und Alternates konsistent pro Route generieren. Das macht SEO für PDPs und Produktlistenseiten über Tausende URLs hinweg deutlich besser steuerbar. Die Next.js-Dokumentation beschreibt generateMetadata() als zentrale API für routebasierte Metadaten.
- Typisierte Sitemaps. Trennen Sie Commerce-Sitemaps nach Typ und Markt: Kategorien, Produkte, Editorial, Kampagnen. Next.js unterstützt Sitemap-Generierung ebenfalls über seine Metadata-File-Conventions.
- Kuratiertes Internal Linking. Kategorie → Unterkategorie → Product Listing Page → PDP sowie PDP → relevante Guides oder Alternativen sollten bewusst gestaltet und nicht generischen Blöcken überlassen werden. In größeren Storefronts wirkt sich das direkt auf Crawl-Pfade, Auffindbarkeit und die Relevanz von Money Pages aus.
- Performance ist das Gate. Google empfiehlt starke Core Web Vitals für Suche und Nutzererlebnis, und die Search Console zeigt reale Felddaten. Für Commerce sollten Template-Gruppen wie Kategorien und PDPs getrennt überwacht werden.
- Ziele: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 auf p75.
import type { Metadata } from "next";
type ProductPageProps = {
params: Promise<{
locale: "en" | "de";
slug: string;
}>;
};
async function getProduct(slug: string, locale: "en" | "de") {
return {
name:
locale === "de"
? "Performance Laufschuhe"
: "Performance Running Shoes",
metaTitle:
locale === "de"
? "Performance Laufschuhe – Leicht, stabil & schnell"
: "Performance Running Shoes – Lightweight, Stable & Fast",
metaDescription:
locale === "de"
? "Leichte Laufschuhe mit reaktionsfreudiger Dämpfung für tägliches Training und schnelle Einheiten."
: "Lightweight running shoes with responsive cushioning for daily training and faster sessions.",
};
}
export async function generateMetadata({
params,
}: ProductPageProps): Promise<Metadata> {
const { locale, slug } = await params;
const product = await getProduct(slug, locale);
const path =
locale === "de"
? `https://www.beispiel.com/de/shop/${slug}/`
: `https://www.beispiel.com/en/shop/${slug}/`;
const dePath = `https://www.beispiel.com/de/shop/${slug}/`;
const enPath = `https://www.beispiel.com/en/shop/${slug}/`;
return {
title: product.metaTitle,
description: product.metaDescription,
alternates: {
canonical: path,
languages: {
"de-DE": dePath,
"en-US": enPath,
"x-default": enPath,
},
},
openGraph: {
title: product.metaTitle,
description: product.metaDescription,
url: path,
type: "website",
},
};
}
