@thg-altitude/schemaorg 1.0.36 → 1.0.38

package/index.js

@@ -7,6 +7,7 @@ import ProductCollection from './src/components/ProductCollection.astro'
 import WebSite from './src/components/WebSite.astro'
 import EnhancedProductList from './src/components/EnhancedProductList.astro'
 import Recipe from './src/components/Recipe.astro'
+import FAQ from './src/components/FAQ.astro'
 
 export {
     Product,
@@ -17,5 +18,6 @@ export {
     ProductCollection,
     WebSite,
     EnhancedProductList,
+    FAQ,
     Recipe
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thg-altitude/schemaorg",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/components/CollectionPage.astro

@@ -1,9 +1,16 @@
 ---
+interface Props {
+  name: string;
+  description: string;
+}
+
+const { name, description } = Astro.props as Props;
+
 let schema = {
-    "@context": "https://schema.org",
-    "@type": "CollectionPage",
-    "name": Astro.props.name,
-    "description": Astro.props.description,
+  "@context": "https://schema.org",
+  "@type": "CollectionPage",
+  "name": name,
+  "description": description,
 };
 ---
 

package/src/components/EnhancedProduct.astro

@@ -29,7 +29,10 @@ const {
   suggestedGender,
   beauty_targetAge,
   gender,
-  weight
+  weight,
+  colorVariantPages,  // Array of {url, sku, color} for sibling color pages
+  currentColor,       // The color of the current page (used to filter variants)
+  baseProductGroupID, // Optional: explicit base product group ID without color suffix
 } = Astro.props;
 
 // Use the enhanced mapping function to extract data from the full product data
@@ -126,20 +129,64 @@ function convertToISO8601(dateString) {
 }
 
 function generateProductSchema() {
-  const hasMultipleVariants = variants && variants.length > 1;
+  // Helper: extract the color value from a variant's choices
+  function getVariantColor(variant) {
+    if (!variant?.choices) return null;
+    const colorChoice = variant.choices.find(c =>
+      c.optionKey === 'Color' || c.optionKey === 'Colour' || c.optionKey === 'color' ||
+      c.optionKey === 'colour' || c.optionKey === 'Shade' || c.optionKey === 'shade' ||
+      c.colour
+    );
+    if (colorChoice) {
+      return colorChoice.title || colorChoice.key || colorChoice.colour || null;
+    }
+    return null;
+  }
+
+  // Filter variants to only include those matching the current page's color
+  // The currentColor prop must be explicitly passed by the calling code
+  // e.g. currentColor="Blush" to filter to only Blush variants
+  // If not provided, all variants are included (backwards compatible)
+  let filteredVariants = variants;
+  let excludedVariants = []; // Variants filtered out (other colors) - used for URL-only references
+  if (currentColor && variants && variants.length > 0) {
+    const filtered = variants.filter(v => {
+      const variantColor = getVariantColor(v);
+      if (!variantColor) return true; // Include variants without color info
+      return variantColor.toLowerCase() === currentColor.toLowerCase();
+    });
+    // Collect excluded variants (other colors) for URL-only hasVariant entries
+    excludedVariants = variants.filter(v => {
+      const variantColor = getVariantColor(v);
+      if (!variantColor) return false; // Don't include variants without color info
+      return variantColor.toLowerCase() !== currentColor.toLowerCase();
+    });
+    // Fallback: if filtering removed everything, use all variants
+    if (filtered.length > 0) {
+      filteredVariants = filtered;
+    }
+  }
+
+  const hasMultipleVariants = filteredVariants && filteredVariants.length > 1;
   let variantsArray = [];
 
-  if (variants && variants.length > 0 && currency) {
+  if (filteredVariants && filteredVariants.length > 0 && currency) {
     if (hasMultipleVariants) {
       // Create individual Product objects for each variant
-      variantsArray = variants
+      variantsArray = filteredVariants
         .filter((variant) => variant?.sku && variant?.price?.price?.amount)
         .map((variant) => {
-          // Build variant name with attributes from choices in logical order
-          let variantName = name;
+          // Build variant name from base name (without color suffix) + variant's color + size
+          // e.g. "MP Women's Tempo Twist Front Sports Bra" + "Blush" + "XL"
+          // = "MP Women's Tempo Twist Front Sports Bra Blush XL"
+          const hasColorData = filteredVariants.some(v => getVariantColor(v));
+          const baseName = hasColorData && name
+            ? name.replace(/\s*-\s*[^-]+$/, '')
+            : name;
+          let variantName = baseName;
           const attributes = [];
           
-          // Extract properties in preferred order: Amount + Weight + Flavor + Size + Color + Material
+          // Extract properties in preferred order: Amount + Weight + Flavor + Color + Size + Material
           if (variant.choices && variant.choices.length > 0) {
             // Amount (only if explicitly marked as Amount, not weight-related)
             const amountChoice = variant.choices.find(c =>
@@ -165,6 +212,10 @@ function generateProductSchema() {
             );
             if (flavorChoice && flavorChoice.title) attributes.push(flavorChoice.title);
             
+            // Color - add from variant's actual color data
+            const variantColor = getVariantColor(variant);
+            if (variantColor) attributes.push(variantColor);
+            
             // Size (excluding weight-related sizes and already processed weight)
             const sizeChoice = variant.choices.find(c =>
               c.optionKey === 'Size' &&
@@ -176,20 +227,13 @@ function generateProductSchema() {
             );
             if (sizeChoice && sizeChoice.title) attributes.push(sizeChoice.title);
             
-            // Color
-            const colorChoice = variant.choices.find(c => c.optionKey === 'Color' || c.optionKey === 'Colour' || c.colour);
-            if (colorChoice) {
-              if (colorChoice.title) attributes.push(colorChoice.title);
-              else if (colorChoice.colour) attributes.push(colorChoice.colour);
-            }
-            
             // Material
             const materialChoice = variant.choices.find(c => c.optionKey === 'Material');
             if (materialChoice && materialChoice.title) attributes.push(materialChoice.title);
           }
           
           if (attributes.length > 0) {
-            variantName = `${name} ${attributes.join(' ')}`;
+            variantName = `${baseName} ${attributes.join(' ')}`;
           }
           
           return {
@@ -347,14 +391,18 @@ function generateProductSchema() {
         });
     } else {
       // Single variant - create offers array as before
-      offersArray = variants
+      offersArray = filteredVariants
         .filter((variant) => variant?.sku && variant?.price?.price?.amount)
         .map((variant) => {
-          // Build variant name with attributes from choices in logical order
-          let variantName = name;
+          // Build variant name from base name + variant's color + size
+          const hasColorData = filteredVariants.some(v => getVariantColor(v));
+          const baseName = hasColorData && name
+            ? name.replace(/\s*-\s*[^-]+$/, '')
+            : name;
+          let variantName = baseName;
           const attributes = [];
           
-          // Extract properties in preferred order: Amount + Weight + Flavor + Size + Color + Material
+          // Extract properties in preferred order: Amount + Weight + Flavor + Color + Size + Material
           if (variant.choices && variant.choices.length > 0) {
             // Amount (only if explicitly marked as Amount, not weight-related)
             const amountChoice = variant.choices.find(c =>
@@ -380,6 +428,10 @@ function generateProductSchema() {
             );
             if (flavorChoice && flavorChoice.title) attributes.push(flavorChoice.title);
             
+            // Color - add from variant's actual color data
+            const variantColor = getVariantColor(variant);
+            if (variantColor) attributes.push(variantColor);
+            
             // Size (excluding weight-related sizes and already processed weight)
             const sizeChoice = variant.choices.find(c =>
               c.optionKey === 'Size' &&
@@ -391,20 +443,13 @@ function generateProductSchema() {
             );
             if (sizeChoice && sizeChoice.title) attributes.push(sizeChoice.title);
             
-            // Color
-            const colorChoice = variant.choices.find(c => c.optionKey === 'Color' || c.optionKey === 'Colour' || c.colour);
-            if (colorChoice) {
-              if (colorChoice.title) attributes.push(colorChoice.title);
-              else if (colorChoice.colour) attributes.push(colorChoice.colour);
-            }
-            
             // Material
             const materialChoice = variant.choices.find(c => c.optionKey === 'Material');
             if (materialChoice && materialChoice.title) attributes.push(materialChoice.title);
           }
           
           if (attributes.length > 0) {
-            variantName = `${name} ${attributes.join(' ')}`;
+            variantName = `${baseName} ${attributes.join(' ')}`;
           }
           
           return {
@@ -457,33 +502,70 @@ function generateProductSchema() {
   const reviewsArray = generateReviewsSchema();
 
   if (name && sku) {
-    const hasMultipleVariants = variants && variants.length > 1;
+    const hasMultipleVariants = filteredVariants && filteredVariants.length > 1;
+    
+    // Compute the base product group ID by stripping color suffix from SKU
+    // e.g. "16919878-fudge" -> "16919878", "16919878-rose-red" -> "16919878"
+    // If baseProductGroupID prop is provided, use that instead
+    const computedProductGroupID = baseProductGroupID || sku.toString().replace(/-[a-zA-Z].*$/, '');
     
     if (hasMultipleVariants) {
-      // Determine what properties vary between variants
+      // Build URL-only entries for other color variants (from excluded variants or colorVariantPages)
+      let otherColorUrlEntries = [];
+      if (colorVariantPages && colorVariantPages.length > 0) {
+        // Use explicitly provided color variant page URLs
+        otherColorUrlEntries = colorVariantPages
+          .filter(p => p?.url && (!currentColor || !p.color || p.color.toLowerCase() !== currentColor.toLowerCase()))
+          .map(p => ({
+            "url": p.url.startsWith('http') ? p.url : `${url}${p.url}`
+          }));
+      } else if (excludedVariants.length > 0) {
+        // Auto-generate URL-only entries from filtered-out variants (other colors)
+        // Use /p/{sku} format which redirects to the correct color page
+        // Deduplicate by color to get one URL per color (using first variant of each color)
+        const seenColors = new Set();
+        otherColorUrlEntries = excludedVariants
+          .filter(v => {
+            if (!v?.sku) return false;
+            const color = getVariantColor(v);
+            if (color && seenColors.has(color.toLowerCase())) return false;
+            if (color) seenColors.add(color.toLowerCase());
+            return true;
+          })
+          .map(v => ({
+            "url": `${url}/p/${v.sku}`
+          }));
+      }
+
+      // Determine what properties vary between the filtered variants (this page's color only)
       const variesBy = [];
       
-      // Check what attributes exist across variants based on choices using correct schema.org properties
-      if (variants.some(v => v.choices && v.choices.some(c => c.optionKey === 'Weight' || (c.title && (c.title.includes('kg') || c.title.includes('lb') || /\d+\s*g\b/.test(c.title)))))) {
+      // Check what attributes exist across filtered variants using correct schema.org properties
+      if (filteredVariants.some(v => v.choices && v.choices.some(c => c.optionKey === 'Weight' || (c.title && (c.title.includes('kg') || c.title.includes('lb') || /\d+\s*g\b/.test(c.title)))))) {
         variesBy.push("https://schema.org/weight");
       }
-      if (variants.some(v => v.choices && v.choices.some(c => c.optionKey === 'Size' && c.title && !c.title.includes('kg') && !c.title.includes('g') && !c.title.includes('lb')))) {
+      if (filteredVariants.some(v => v.choices && v.choices.some(c => c.optionKey === 'Size' && c.title && !c.title.includes('kg') && !c.title.includes('g') && !c.title.includes('lb')))) {
         variesBy.push("https://schema.org/size");
       }
-      if (variants.some(v => v.choices && v.choices.some(c => c.optionKey === 'Color' || c.optionKey === 'Colour' || c.colour))) {
+      // Add color to variesBy if we have other color variants (from colorVariantPages or excluded variants)
+      if (colorVariantPages && colorVariantPages.length > 0) {
+        variesBy.push("https://schema.org/color");
+      } else if (excludedVariants.length > 0) {
+        variesBy.push("https://schema.org/color");
+      } else if (filteredVariants.some(v => v.choices && v.choices.some(c => c.optionKey === 'Color' || c.optionKey === 'Colour' || c.colour))) {
         variesBy.push("https://schema.org/color");
       }
-      if (variants.some(v => v.choices && v.choices.some(c => c.optionKey === 'Material'))) {
+      if (filteredVariants.some(v => v.choices && v.choices.some(c => c.optionKey === 'Material'))) {
         variesBy.push("https://schema.org/material");
       }
       // For non-standard properties like flavour, use additionalProperty
-      if (variants.some(v => v.choices && v.choices.some(c => c.optionKey === 'Flavour' || c.optionKey === 'Flavor' || c.optionKey === 'Taste'))) {
+      if (filteredVariants.some(v => v.choices && v.choices.some(c => c.optionKey === 'Flavour' || c.optionKey === 'Flavor' || c.optionKey === 'Taste'))) {
         if (!variesBy.includes("https://schema.org/additionalProperty")) {
           variesBy.push("https://schema.org/additionalProperty");
         }
       }
       // Check for Shade/Colour variations (Look Fantastic style) - now uses color property
-      if (variants.some(v => v.choices && v.choices.some(c =>
+      if (filteredVariants.some(v => v.choices && v.choices.some(c =>
           c.optionKey === 'Shade' || c.optionKey === 'shade' ||
           c.optionKey === 'Colour' || c.optionKey === 'colour' ||
           c.optionKey === 'Color' || c.optionKey === 'color'))) {
@@ -492,12 +574,17 @@ function generateProductSchema() {
         }
       }
 
+      // Strip color suffix from ProductGroup name (e.g. "Sports Bra - Blush" -> "Sports Bra")
+      // Only strip when variants have color data, indicating the name suffix is a color
+      const hasColorVariants = filteredVariants.some(v => getVariantColor(v));
+      const productGroupName = hasColorVariants && name
+        ? name.replace(/\s*-\s*[^-]+$/, '')
+        : name;
+
       const productGroupSchema = {
         "@type": "ProductGroup",
-        "@id": pageUrl,
-        url: pageUrl,
-        name: name,
-        productGroupID: sku.toString(),
+        name: productGroupName,
+        productGroupID: computedProductGroupID,
         ...(gtin13 && { gtin13: gtin13.toString() }),
         ...(description && { description }),
         ...(imageUrl && { image: imageUrl }),
@@ -508,7 +595,12 @@ function generateProductSchema() {
           },
         }),
         ...(variesBy.length > 0 && { variesBy }),
-        hasVariant: variantsArray,
+        hasVariant: [
+          ...variantsArray,
+          // Add URL-only references to other color variants as hasVariant entries
+          // Uses colorVariantPages if provided, otherwise auto-generates from excluded variants
+          ...otherColorUrlEntries
+        ],
         ...(reviewsCount > 0 &&
           reviewsAverage && {
             aggregateRating: {
@@ -555,7 +647,7 @@ function generateProductSchema() {
           }
           
           // Add flavour as additionalProperty for ProductGroup level
-          const flavourValues = variants?.map(v =>
+          const flavourValues = filteredVariants?.map(v =>
             v.choices?.find(c => c.optionKey === 'Flavour' || c.optionKey === 'Flavor' || c.optionKey === 'Taste')?.title
           ).filter(Boolean);
           
@@ -578,8 +670,6 @@ function generateProductSchema() {
       // Single product schema as before
       const productSchema = {
         "@type": "Product",
-        "@id": pageUrl,
-        url: pageUrl,
         sku: sku.toString(),
         name: name,
         ...(gtin13 && { gtin13: gtin13.toString() }),

package/src/components/FAQ.astro

@@ -0,0 +1,43 @@
+---
+interface Props {
+  faqs: { title: string; body: string }[];
+}
+
+interface faqQA {
+  "@type": "Question";
+  name: string;
+  acceptedAnswer: {
+    "@type": "Answer";
+    text: string;
+  };
+}
+
+const { faqs } = Astro.props as Props;
+
+const validFaqs = faqs.reduce((acc, faq) => {
+  if (faq?.title && faq?.body) {
+    acc.push({
+      "@type": "Question",
+      name: faq.title,
+      acceptedAnswer: {
+        "@type": "Answer",
+        text: faq.body,
+      },
+    });
+  }
+  return acc;
+}, [] as faqQA[]);
+---
+
+{
+  validFaqs.length > 0 && (
+    <script
+      type="application/ld+json"
+      set:html={JSON.stringify({
+        "@context": "https://schema.org",
+        "@type": "FAQPage",
+        mainEntity: validFaqs,
+      })}
+    />
+  )
+}

package/src/components/Product.astro

@@ -22,57 +22,149 @@ if (!suggestedAge && Astro.props.productContent?.propertyNameToValueMap?.beauty_
 }
 
 let url = import.meta.env.DEV
-    ? Astro.url.origin
-    : `${Astro.request.headers.get(
-        'X-forwarded-Proto'
-      )}://${Astro.request.headers.get('X-forwarded-Host')?.split(', ')[0]}`
+  ? Astro.url.origin
+  : `${Astro.request.headers.get(
+    'X-forwarded-Proto'
+  )}://${Astro.request.headers.get('X-forwarded-Host')?.split(', ')[0]}`
+// New props for multi-page color variant support
+const colorVariantPages = Astro.props.colorVariantPages;  // Array of {url, sku, color} for sibling color pages
+const currentColor = Astro.props.currentColor;             // The color of the current page
+const baseProductGroupID = Astro.props.baseProductGroupID; // Optional: explicit base product group ID
+
+// Helper: extract the color value from a variant
+function getVariantColor(variant) {
+  if (!variant) return null;
+  // Check direct color property
+  if (variant.color) return variant.color;
+  // Check choices array
+  if (variant.choices && Array.isArray(variant.choices)) {
+    const colorChoice = variant.choices.find(c =>
+      c.optionKey === 'Color' || c.optionKey === 'Colour' || c.optionKey === 'color' ||
+      c.optionKey === 'colour' || c.optionKey === 'Shade' || c.optionKey === 'shade'
+    );
+    if (colorChoice) {
+      return colorChoice.title || colorChoice.key || colorChoice.colour || null;
+    }
+  }
+  return null;
+}
+
+// Filter variants to only include those matching the current page's color
+// The currentColor prop must be explicitly passed by the calling code
+// e.g. currentColor="Blush" to filter to only Blush variants
+// If not provided, all variants are included (backwards compatible)
+let filteredVariants = Astro.props.variants;
+let excludedVariants = []; // Variants filtered out (other colors) - used for URL-only references
+if (currentColor && Array.isArray(Astro.props.variants) && Astro.props.variants.length > 0) {
+  const filtered = Astro.props.variants.filter(v => {
+    const variantColor = getVariantColor(v);
+    if (!variantColor) return true; // Include variants without color info
+    return variantColor.toLowerCase() === currentColor.toLowerCase();
+  });
+  // Collect excluded variants (other colors) for URL-only hasVariant entries
+  excludedVariants = Astro.props.variants.filter(v => {
+    const variantColor = getVariantColor(v);
+    if (!variantColor) return false; // Don't include variants without color info
+    return variantColor.toLowerCase() !== currentColor.toLowerCase();
+  });
+  // Fallback: if filtering removed everything, use all variants
+  if (filtered.length > 0) {
+    filteredVariants = filtered;
+  }
+}
+
+// Compute the base product group ID by stripping color suffix from SKU
+// e.g. "16919878-fudge" -> "16919878", "16919878-rose-red" -> "16919878"
+const computedProductGroupID = baseProductGroupID || (Astro.props.sku ? Astro.props.sku.toString().replace(/-[a-zA-Z].*$/, '') : '');
+
 // Check if we have multiple variants to determine if we need ProductGroup
-const hasMultipleVariants = Astro.props.variants && Astro.props.variants.length > 1;
+const hasMultipleVariants = filteredVariants && filteredVariants.length > 1;
+
+let reviewsArray: {}[] = []
+Astro.props.reviews?.forEach((review)=>{
+  reviewsArray.push({
+    "@type": "Review",
+    itemReviewed: {
+      "@id": Astro.props.sku?.toString() || "",
+      name: Astro.props.name || "",
+    },
+    reviewRating: {
+      "@type": "Rating",
+      bestRating: "5",
+      ratingValue: review?.elements?.[0]?.score,
+    },
+    author: {
+      "@type": "Person",
+      name: stripHtml(review?.authorName),
+    },
+    datePublished: review?.posted,
+    reviewBody: stripHtml(review?.elements?.[1]?.value),
+  });
+});
+
+let aggregateRating;
+if (Astro.props.reviewsCount > 0) {
+  aggregateRating = {
+    "@type": "AggregateRating",
+    "bestRating": 5,
+    "worstRating": 1
+  };
+  
+  if (Astro.props.reviewsAverage) aggregateRating.ratingValue = Astro.props.reviewsAverage;
+  if (Astro.props.reviewsCount) aggregateRating.reviewCount = Astro.props.reviewsCount;
+}
 
 let variantsArray = []
 let offersArray = []
+let schema;
 
 if (hasMultipleVariants) {
-  // Create individual Product objects for each variant
-  if (Array.isArray(Astro.props.variants)) {
-    Astro.props.variants.forEach((variant) => {
+  // Create individual Product objects for each variant (filtered to current color only)
+  if (Array.isArray(filteredVariants)) {
+    // Strip color from base name for variant name construction
+    const hasColorData = filteredVariants.some(v => getVariantColor(v));
+    const baseName = hasColorData && Astro.props.name
+      ? Astro.props.name.replace(/\s*-\s*[^-]+$/, '')
+      : (Astro.props.name || "");
+
+    filteredVariants.forEach((variant) => {
       if (variant && typeof variant === 'object' && variant.sku) {
-        // Build variant name with attributes in logical order: Name + Weight + Flavor + Size + Color + Material
-        let variantName = Astro.props.name || "";
+        // Build variant name from base name + variant's color + size
+        let variantName = baseName;
         const attributes = [];
-        
+
         // Check for amount/quantity first
         if (variant.amount) attributes.push(variant.amount);
         
         // Check for weight in different possible property names
         if (variant.weight) attributes.push(variant.weight);
-        else if (variant.size && variant.size.includes('kg')) attributes.push(variant.size);
-        else if (variant.size && variant.size.includes('g')) attributes.push(variant.size);
+        else if (variant.size?.includes('kg') || variant.size?.includes('g')) attributes.push(variant.size);
         
         // Check for flavor in different possible property names
-        if (variant.flavor) attributes.push(variant.flavor);
-        else if (variant.flavour) attributes.push(variant.flavour);
-        else if (variant.taste) attributes.push(variant.taste);
+        if (variant.flavor || variant.flavour || variant.taste) attributes.push(variant.flavor || variant.flavour || variant.taste);
         else if (variant.name && variant.name !== Astro.props.name) {
           // If variant has its own name that's different from product name, use it as flavor
           const variantSpecificName = variant.name.replace(Astro.props.name, '').trim();
           if (variantSpecificName) attributes.push(variantSpecificName);
         }
         
+        // Add color from variant's actual data
+        const variantColor = getVariantColor(variant);
+        if (variantColor) attributes.push(variantColor);
+        
         // Add other attributes
         if (variant.size && !variant.size.includes('kg') && !variant.size.includes('g')) attributes.push(variant.size);
-        if (variant.color) attributes.push(variant.color);
         if (variant.material) attributes.push(variant.material);
         
-        if (attributes.length > 0 && Astro.props.name) {
-          variantName = `${Astro.props.name} ${attributes.join(' ')}`;
+        if (attributes.length > 0 && baseName) {
+          variantName = `${baseName} ${attributes.join(' ')}`;
         }
 
         const variantObj = {
           "@type": "Product",
           "sku": variant.sku.toString()
         };
-        
+
         if (variantName) variantObj.name = variantName;
         if (Astro.props.description) variantObj.description = Astro.props.description;
         // Try multiple possible locations for variant image and extract URL string
@@ -137,10 +229,7 @@ if (hasMultipleVariants) {
         const additionalProperties = [];
         
         // Handle flavour as additionalProperty since it doesn't exist in schema.org
-        let flavorValue = null;
-        if (variant.flavor) flavorValue = variant.flavor;
-        else if (variant.flavour) flavorValue = variant.flavour;
-        else if (variant.taste) flavorValue = variant.taste;
+        const flavorValue = variant.flavor || variant.flavour || variant.taste || null;
         if (flavorValue) {
           additionalProperties.push({
             "@type": "PropertyValue",
@@ -169,10 +258,95 @@ if (hasMultipleVariants) {
       }
     });
   }
+
+  // Determine what properties vary between filtered variants
+  const propertyChecks = [
+    { prop: 'weight', url: 'https://schema.org/weight' },
+    { prop: 'size', url: 'https://schema.org/size' },
+    { prop: 'material', url: 'https://schema.org/material' },
+  ];
+
+  // Check what attributes exist across filtered variants
+  // For non-standard properties like amount and flavour, we use additionalProperty
+  const variesBy = propertyChecks
+    .filter(({ prop }) => filteredVariants?.some(v => v?.[prop]))
+    .map(({ url }) => url);
+
+  // Add color to variesBy if we have other color variants (from colorVariantPages or excluded variants)
+  if (colorVariantPages && colorVariantPages.length > 0) {
+    if (!variesBy.includes("https://schema.org/color")) {
+      variesBy.push("https://schema.org/color");
+    }
+  } else if (excludedVariants.length > 0) {
+    if (!variesBy.includes("https://schema.org/color")) {
+      variesBy.push("https://schema.org/color");
+    }
+  } else if (filteredVariants?.some(v => v?.color)) {
+    variesBy.push("https://schema.org/color");
+  }
+
+  // Check for flavor with multiple possible property names - treat as additionalProperty
+  if (filteredVariants?.some(v => v && (v.flavor || v.flavour || v.taste))) {
+    if (!variesBy.includes("https://schema.org/additionalProperty")) {
+      variesBy.push("https://schema.org/additionalProperty");
+    }
+  }
+
+  // Check for shade/colour in variant.choices (Look Fantastic structure) - now uses color property
+  if (filteredVariants?.some(v => v && v.choices && Array.isArray(v.choices) &&
+      v.choices.some(c => c.optionKey === 'Shade' || c.optionKey === 'shade' ||
+                        c.optionKey === 'Colour' || c.optionKey === 'colour' ||
+                        c.optionKey === 'Color' || c.optionKey === 'color'))) {
+    if (!variesBy.includes("https://schema.org/color")) {
+      variesBy.push("https://schema.org/color");
+    }
+  }
+
+  // Build URL-only entries for other color variants (from excluded variants or colorVariantPages)
+  let otherColorUrlEntries = [];
+  if (colorVariantPages && colorVariantPages.length > 0) {
+    // Use explicitly provided color variant page URLs
+    otherColorUrlEntries = colorVariantPages
+      .filter(p => p?.url && (!currentColor || !p.color || p.color.toLowerCase() !== currentColor.toLowerCase()))
+      .map(p => ({
+        "url": p.url.startsWith('http') ? p.url : `${url}${p.url}`
+      }));
+  } else if (excludedVariants.length > 0) {
+    // Auto-generate URL-only entries from filtered-out variants (other colors)
+    // Use /p/{sku} format which redirects to the correct color page
+    // Deduplicate by color to get one URL per color (using first variant of each color)
+    const seenColors = new Set();
+    otherColorUrlEntries = excludedVariants
+      .filter(v => {
+        if (!v?.sku) return false;
+        const color = getVariantColor(v);
+        if (color && seenColors.has(color.toLowerCase())) return false;
+        if (color) seenColors.add(color.toLowerCase());
+        return true;
+      })
+      .map(v => ({
+        "url": `${url}/p/${v.sku}`
+      }));
+  }
+
+  schema = {
+    "@type": "ProductGroup",
+    "@context": "https://schema.org",
+    "productGroupID": computedProductGroupID,
+    "hasVariant": [
+      ...variantsArray,
+      // Add URL-only references to other color variants as hasVariant entries
+      // Uses colorVariantPages if provided, otherwise auto-generates from excluded variants
+      ...otherColorUrlEntries
+    ]
+  };
+
+  if (variesBy.length > 0) schema.variesBy = variesBy;
+
 } else {
   // Single variant - create offers array as before
-  if (Array.isArray(Astro.props.variants)) {
-    Astro.props.variants.forEach((variant) => {
+  if (Array.isArray(filteredVariants)) {
+    filteredVariants.forEach((variant) => {
       if (variant && typeof variant === 'object' && variant.sku) {
         const offerObj = {
           "@type": "Offer",
@@ -189,242 +363,97 @@ if (hasMultipleVariants) {
       }
     });
   }
-}
-
-let reviewsArray = []
-if (Astro.props.reviews && Array.isArray(Astro.props.reviews)) {
-  Astro.props.reviews.forEach((review)=>{
-    if (review && typeof review === 'object') {
-      const reviewObj = {
-        "@type": "Review",
-        "itemReviewed": {
-          "@id": Astro.props.sku ? Astro.props.sku.toString() : "",
-          "name": Astro.props.name || ""
-        },
-        "reviewRating": {
-          "@type": "Rating",
-          "bestRating": "5"
-        },
-        "author": {
-          "@type": "Person"
-        }
-      };
-      
-      if (review?.elements?.[0]?.score) reviewObj.reviewRating.ratingValue = review.elements[0].score;
-      if (review?.authorName) reviewObj.author.name = stripHtml(review.authorName);
-      if (review?.posted) reviewObj.datePublished = review.posted;
-      if (review?.elements?.[1]?.value) reviewObj.reviewBody = stripHtml(review.elements[1].value);
-      
-      reviewsArray.push(reviewObj);
-    }
-  });
-}
 
-let aggregateRating = undefined;
-if (Astro.props.reviewsCount > 0) {
-  aggregateRating = {
-    "@type": "AggregateRating",
-    "bestRating": 5,
-    "worstRating": 1
-  };
-  
-  if (Astro.props.reviewsAverage) aggregateRating.ratingValue = Astro.props.reviewsAverage;
-  if (Astro.props.reviewsCount) aggregateRating.reviewCount = Astro.props.reviewsCount;
-}
-
-let schema;
-
-if (hasMultipleVariants) {
-  // Determine what properties vary between variants
-  const variesBy = [];
-  
-  // Check what attributes exist across variants - ensure variants is an array
-  if (Array.isArray(Astro.props.variants)) {
-    if (Astro.props.variants.some(v => v && v.weight)) variesBy.push("https://schema.org/weight");
-    if (Astro.props.variants.some(v => v && v.size)) variesBy.push("https://schema.org/size");
-    if (Astro.props.variants.some(v => v && v.color)) variesBy.push("https://schema.org/color");
-    if (Astro.props.variants.some(v => v && v.material)) variesBy.push("https://schema.org/material");
-    
-    // Check for flavor with multiple possible property names - treat as additionalProperty
-    if (Astro.props.variants.some(v => v && (v.flavor || v.flavour || v.taste))) {
-      if (!variesBy.includes("https://schema.org/additionalProperty")) {
-        variesBy.push("https://schema.org/additionalProperty");
-      }
-    }
-    
-    // Check for shade/colour in variant.choices (Look Fantastic structure) - now uses color property
-    if (Astro.props.variants.some(v => v && v.choices && Array.isArray(v.choices) &&
-        v.choices.some(c => c.optionKey === 'Shade' || c.optionKey === 'shade' ||
-                          c.optionKey === 'Colour' || c.optionKey === 'colour' ||
-                          c.optionKey === 'Color' || c.optionKey === 'color'))) {
-      if (!variesBy.includes("https://schema.org/color")) {
-        variesBy.push("https://schema.org/color");
-      }
-    }
-  }
-
-  schema = {
-    "@type": "ProductGroup",
-    "@context": "https://schema.org",
-    "@id": Astro.props.sku ? Astro.props.sku.toString() : "",
-    "url": `${url}${Astro.props.url || ""}`,
-    "productGroupID": Astro.props.sku ? Astro.props.sku.toString() : "",
-    "hasVariant": variantsArray
-  };
-  
-  if (Astro.props.name) schema.name = Astro.props.name;
-  if (Astro.props.description) schema.description = Astro.props.description;
-  if (Astro.props.image) {
-    schema.image = import.meta.env.IMAGE_PROXY_URL
-      ? `${import.meta.env.IMAGE_PROXY_URL}?url=${Astro.props.image}&format=webp&width=1500&height=1500&fit=cover`
-      : Astro.props.image;
-  }
-  if (Astro.props.brand) {
-    schema.brand = {
-      "@type": "Brand",
-      "name": Astro.props.brand
-    };
-  }
-  if (variesBy.length > 0) schema.variesBy = variesBy;
-  
-  // Handle custom properties as additionalProperty (schema.org compliant)
-  const additionalProperties = [];
-  if (suggestedGender) {
-    additionalProperties.push({
-      "@type": "PropertyValue",
-      "name": "suggestedGender",
-      "value": suggestedGender
-    });
-  }
-  if (suggestedAge) {
-    additionalProperties.push({
-      "@type": "PropertyValue",
-      "name": "suggestedAge",
-      "value": suggestedAge
-    });
-  }
-  if (Astro.props.beauty_targetAge) {
-    additionalProperties.push({
-      "@type": "PropertyValue",
-      "name": "targetAge",
-      "value": Astro.props.beauty_targetAge
-    });
-  }
-  if (Astro.props.gender) {
-    additionalProperties.push({
-      "@type": "PropertyValue",
-      "name": "GenderType",
-      "value": Astro.props.gender
-    });
-  }
-  
-  // Add flavour as additionalProperty for ProductGroup level
-  if (Array.isArray(Astro.props.variants)) {
-    const flavourValues = Astro.props.variants.map(v => {
-      if (v && typeof v === 'object') {
-        return v.flavor || v.flavour || v.taste;
-      }
-      return null;
-    }).filter(Boolean);
-    
-    if (flavourValues.length > 0) {
-      // If multiple unique flavours, list them all; if single flavour, just that one
-      const uniqueFlavours = [...new Set(flavourValues)];
-      additionalProperties.push({
-        "@type": "PropertyValue",
-        "name": "flavour",
-        "value": uniqueFlavours.length === 1 ? uniqueFlavours[0] : uniqueFlavours.join(', ')
-      });
-    }
-  }
-  
-  if (additionalProperties.length > 0) {
-    schema.additionalProperty = additionalProperties;
-  }
-  if (aggregateRating) schema.aggregateRating = aggregateRating;
-  if (reviewsArray.length > 0) schema.review = reviewsArray;
-} else {
   // Single product schema as before
   schema = {
     "@type": "Product",
     "@context": "https://schema.org",
-    "@id": Astro.props.sku ? Astro.props.sku.toString() : "",
     "sku": Astro.props.sku ? Astro.props.sku.toString() : "",
     "offers": offersArray
   };
-  
-  if (Astro.props.name) schema.name = Astro.props.name;
-  if (Astro.props.description) schema.description = Astro.props.description;
-  if (Astro.props.image) {
-    schema.image = import.meta.env.IMAGE_PROXY_URL
-      ? `${import.meta.env.IMAGE_PROXY_URL}?url=${Astro.props.image}&format=webp&width=1500&height=1500&fit=cover`
-      : Astro.props.image;
-  }
-  if (Astro.props.brand) {
-    schema.brand = {
-      "@type": "Brand",
-      "name": Astro.props.brand
-    };
+}
+
+// Extract duplicate code
+if (Astro.props.name) {
+  // Strip color suffix from ProductGroup name (e.g. "Sports Bra - Blush" -> "Sports Bra")
+  // Only strip when it's a ProductGroup and variants have color data
+  const hasColorVariants = hasMultipleVariants && filteredVariants?.some(v => getVariantColor(v));
+  if (hasColorVariants) {
+    schema.name = Astro.props.name.replace(/\s*-\s*[^-]+$/, '');
+  } else {
+    schema.name = Astro.props.name;
   }
+}
+if (Astro.props.description) schema.description = Astro.props.description;
+if (Astro.props.image) {
+  schema.image = import.meta.env.IMAGE_PROXY_URL
+    ? `${import.meta.env.IMAGE_PROXY_URL}?url=${Astro.props.image}&format=webp&width=1500&height=1500&fit=cover`
+    : Astro.props.image;
+}
+if (Astro.props.brand) {
+  schema.brand = {
+    "@type": "Brand",
+    "name": Astro.props.brand
+  };
+}
+
+// Handle custom properties as additionalProperty (schema.org compliant)
+const additionalProperties: {"@type":string, name:string, value:string}[] = [];
+if (suggestedGender) {
+  additionalProperties.push({
+    "@type": "PropertyValue",
+    "name": "suggestedGender",
+    "value": suggestedGender
+  });
+}
+if (suggestedAge) {
+  additionalProperties.push({
+    "@type": "PropertyValue",
+    "name": "suggestedAge",
+    "value": suggestedAge
+  });
+}
+if (Astro.props.beauty_targetAge) {
+  additionalProperties.push({
+    "@type": "PropertyValue",
+    "name": "beauty_targetAge",
+    "value": Astro.props.beauty_targetAge
+  });
+}
+if (Astro.props.gender) {
+  additionalProperties.push({
+    "@type": "PropertyValue",
+    "name": "gender",
+    "value": Astro.props.gender
+  });
+}
+
+// Add flavour as additionalProperty for single product
+if (Array.isArray(Astro.props.variants)) {
+  const flavourValues: string[] = Astro.props.variants.map(v => {
+    if (v && typeof v === 'object') {
+      return v.flavor || v.flavour || v.taste;
+    }
+    return null;
+  }).filter(Boolean);
   
-  // Handle custom properties as additionalProperty (schema.org compliant)
-  const additionalProperties = [];
-  if (suggestedGender) {
+  if (flavourValues.length > 0) {
+    // If multiple unique flavours, list them all; if single flavour, just that one
+    const uniqueFlavours = [...new Set(flavourValues)];
     additionalProperties.push({
       "@type": "PropertyValue",
-      "name": "suggestedGender",
-      "value": suggestedGender
+      "name": "flavour",
+      "value": uniqueFlavours.length === 1 ? uniqueFlavours[0] : uniqueFlavours.join(', ')
     });
   }
-  if (suggestedAge) {
-    additionalProperties.push({
-      "@type": "PropertyValue",
-      "name": "suggestedAge",
-      "value": suggestedAge
-    });
-  }
-  if (Astro.props.beauty_targetAge) {
-    additionalProperties.push({
-      "@type": "PropertyValue",
-      "name": "beauty_targetAge",
-      "value": Astro.props.beauty_targetAge
-    });
-  }
-  if (Astro.props.gender) {
-    additionalProperties.push({
-      "@type": "PropertyValue",
-      "name": "gender",
-      "value": Astro.props.gender
-    });
-  }
-  
-  // Add flavour as additionalProperty for single product
-  if (Array.isArray(Astro.props.variants)) {
-    const flavourValues = Astro.props.variants.map(v => {
-      if (v && typeof v === 'object') {
-        return v.flavor || v.flavour || v.taste;
-      }
-      return null;
-    }).filter(Boolean);
-    
-    if (flavourValues.length > 0) {
-      // If multiple unique flavours, list them all; if single flavour, just that one
-      const uniqueFlavours = [...new Set(flavourValues)];
-      additionalProperties.push({
-        "@type": "PropertyValue",
-        "name": "flavour",
-        "value": uniqueFlavours.length === 1 ? uniqueFlavours[0] : uniqueFlavours.join(', ')
-      });
-    }
-  }
-  
-  if (additionalProperties.length > 0) {
-    schema.additionalProperty = additionalProperties;
-  }
-  if (aggregateRating) schema.aggregateRating = aggregateRating;
-  if (reviewsArray.length > 0) schema.review = reviewsArray;
 }
 
+if (additionalProperties.length > 0) {
+  schema.additionalProperty = additionalProperties;
+}
+if (aggregateRating) schema.aggregateRating = aggregateRating;
+if (reviewsArray.length > 0) schema.review = reviewsArray;
+
 ---
 
 <script type="application/ld+json" set:html={JSON.stringify(schema, (key, value) => {