feat: Add ProductSeo component for improved SEO

Introduces a new ProductSeo component to handle SEO metadata and structured data for product pages. Refactors product/[id].vue to use ProductSeo, removing inline SEO logic for better maintainability and consistency.

Author: zackha

app/components/ProductSeo.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+type ProductInfo = {
+  name: string;
+  sku?: string;
+  shortDescription?: string;
+  description?: string;
+  image?: { sourceUrl?: string };
+};
+
+const props = defineProps({
+  info: { type: Object as PropType<ProductInfo>, required: true },
+});
+
+const stripHtml = (html?: string) =>
+  (html ?? '')
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+const { site } = useAppConfig() as any;
+const siteName: string = site?.name || 'NuxtCommerce';
+
+const route = useRoute();
+const url = useRequestURL();
+const { locales, locale } = useI18n();
+const localePath = useLocalePath();
+
+const canonical = `${url.origin}${url.pathname}`;
+
+const img = useImage();
+const baseImage: string = props.info.image?.sourceUrl || '/images/placeholder.jpg';
+const ogSrc = img.getSizes(baseImage, { width: 1200, height: 630 }).src;
+const twSrc = img.getSizes(baseImage, { width: 1600, height: 900 }).src;
+const absolutize = (u?: string) => (!u ? '' : u.startsWith('http') ? u : `${url.origin}${u}`);
+const ogImage = absolutize(ogSrc);
+const twitterImage = absolutize(twSrc);
+
+const rawDescription = props.info.shortDescription && stripHtml(props.info.shortDescription) ? stripHtml(props.info.shortDescription) : stripHtml(props.info.description);
+const description = rawDescription?.slice(0, 160) || '';
+
+const alternates = computed(() => {
+  const items: Array<{ href: string; hreflang: string }> = [];
+  const codes = (locales.value as any[]).map(l => ({ code: l.code, iso: l.iso }));
+  for (const l of codes) {
+    const localizedPath = localePath(route.fullPath, l.code);
+    items.push({ href: `${url.origin}${localizedPath}`, hreflang: l.iso || l.code });
+  }
+  items.push({ href: `${url.origin}${localePath(route.fullPath, locale.value)}`, hreflang: 'x-default' });
+  return items;
+});
+
+const productSchema = computed(() => {
+  const images = [ogImage].filter(Boolean);
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: props.info.name,
+    description,
+    image: images,
+    sku: props.info.sku || undefined,
+    brand: { '@type': 'Brand', name: siteName },
+  };
+});
+
+useSeoMeta({
+  title: props.info.name,
+  description,
+  ogTitle: props.info.name,
+  ogDescription: description,
+  ogType: 'article',
+  ogImage,
+  ogUrl: canonical,
+  ogSiteName: siteName,
+  twitterTitle: props.info.name,
+  twitterDescription: description,
+  twitterCard: 'summary_large_image',
+  twitterImage,
+});
+
+useHead({
+  htmlAttrs: { lang: locale.value },
+  link: [{ rel: 'canonical', href: canonical }, ...alternates.value.map(a => ({ rel: 'alternate', href: a.href, hreflang: a.hreflang }))],
+  script: [{ type: 'application/ld+json', innerHTML: JSON.stringify(productSchema.value) }],
+});
+</script>
+
+<template>
+  <slot />
+</template>

app/pages/product/[id].vue

@@ -58,60 +58,11 @@ const calculateDiscountPercentage = computed(() => {
   return Math.round(((salePriceValue - regularPriceValue) / regularPriceValue) * 100);
 });
 
-const { name } = useAppConfig();
-const url = useRequestURL();
-const canonical = url.origin + url.pathname;
-const image = computed(() => product.value?.image?.sourceUrl);
-const plainDescription = computed(() => {
-  const raw = product.value?.description?.replace(/<[^>]+>/g, '');
-  return raw ? raw.slice(0, 160) : '';
-});
-
-useHead(() => {
-  const title = product.value?.name || name;
-  const description = plainDescription.value;
-  const img = image.value;
-  const keywords = [product.value?.name, product.value?.allPaStyle?.nodes?.[0]?.name, name].filter(Boolean).join(', ');
-
-  return {
-    title,
-    ogTitle: title,
-    description,
-    ogDescription: description,
-    ogImage: img,
-    ogUrl: canonical,
-    canonical,
-    ogType: 'product',
-    twitterTitle: title,
-    twitterDescription: description,
-    twitterImage: img,
-    keywords,
-  };
-});
-
-const productSchema = computed(() => ({
-  '@context': 'https://schema.org',
-  '@type': 'Product',
-  name: product.value?.name,
-  description: plainDescription.value,
-  image: image.value ? [image.value] : [],
-  sku: product.value?.sku,
-  brand: { '@type': 'Brand', name: name },
-}));
-
-useHead(() => ({
-  script: [
-    {
-      type: 'application/ld+json',
-      children: JSON.stringify(productSchema.value),
-    },
-  ],
-}));
-
 const { handleAddToCart, addToCartButtonStatus } = useCart();
 </script>
 
 <template>
+  <ProductSeo v-if="product?.name" :info="product" />
   <ProductSkeleton v-if="!product.name" />
   <div v-else class="justify-center flex flex-col lg:flex-row lg:mx-5">
     <ButtonBack />