Headless Wix eCommerce SEO: product pages, schema and image optimisation

Building eCommerce on headless Wix gives you complete control over product page SEO. This lesson covers how to build product pages that outperform standard Wix stores in search results, with proper schema markup, optimised images and perfect page structure.

Product Page Architecture for Maximum SEO Impact

Your headless product page template controls every element that Google evaluates. The URL structure, heading hierarchy, image optimisation, internal linking and structured data are all under your direct control. This means you can implement SEO strategies that are impossible on standard Wix eCommerce.

URL Structure for Headless Product Pages

Design your URL hierarchy to reflect your category structure. Use patterns like /products/category/product-name rather than flat /products/product-name URLs. This gives Google clear signals about your site architecture and helps category pages build topical authority.

Product Schema Markup from Wix API Data

The Wix eCommerce API returns all the data you need to build comprehensive Product schema: name, description, price, currency, availability, images, SKU, brand and reviews. Map these API fields directly to Schema.org Product properties for rich results in Google.

How to implement Product schema markup from Wix API data

• In your product page component, import the Wix stores and reviews modules: import { products } from "@wix/stores"; import { reviews } from "@wix/reviews"; at the top of your file.
• Fetch the full product object including all variant data by calling products.getProductBySlug(slug) and await the result in your server component or getStaticProps function.
• Fetch aggregate review data separately using reviews.queryReviews({ filter: { entityId: product._id } }) and calculate the average rating and total review count from the results.
• Map the product name from product.name to the JSON-LD name field, and map product.description (stripping HTML tags) to the JSON-LD description field.
• Build the Offer object using product.priceData.price as price, product.priceData.currency as priceCurrency, and map product.stock.inStock to the availability field as either https://schema.org/InStock or https://schema.org/OutOfStock.
• Add an AggregateRating object to the schema using the calculated average and total count from the Wix Reviews API, ensuring ratingValue is between 1 and 5.
• Include the product SKU from product.sku and the brand name from product.brand (if populated) as separate top-level fields in the Product schema object.
• Add an image array to the schema containing each Wix Media CDN URL from product.media.items, formatted with the /v1/fill/ parameters for optimal quality.
• Serialise the complete schema object to a JSON string and inject it as <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> inside your page head.
• Validate the implemented schema by pasting the page URL into the Google Rich Results Test at search.google.com/test/rich-results and confirm the Product rich result shows price, availability and rating.

Image Optimisation with Wix Media CDN

Wix Media Manager provides a powerful image CDN with on-the-fly resizing, format conversion and quality optimisation. In your headless frontend, use the Wix image URL parameters to serve WebP images at the exact dimensions needed for each viewport, dramatically improving LCP scores.

Internal Linking Strategy for Product Pages

• Link from each product to its parent category page
• Display related products with keyword-rich anchor text
• Include breadcrumb navigation with BreadcrumbList schema
• Link to buying guides and blog content that references the product
• Cross-link between product variants and complementary products

Handling Product Variants Without Duplicate Content

When products have colour, size or material variants, decide whether each variant gets its own URL or shares a single canonical page. For SEO, give variants their own URLs only if people search for the specific variant (e.g., "red leather sofa"). Otherwise, use a single canonical URL with client-side variant selection.

How to Implement Product Schema on a Headless Wix eCommerce Site

Walk through this complete implementation guide to add validated Product schema to every product page on your headless Wix store.

End-to-end Product schema implementation for headless Wix eCommerce

• In your Wix dashboard, navigate to your Store Manager and confirm that every product has a name, description, price, stock status and at least one image. Incomplete product data produces incomplete schema that fails Google validation.
• Create a utility file at lib/schema-builders.ts in your Next.js project. This file will contain reusable functions that accept Wix API product objects and return correctly structured Schema.org JSON-LD objects.
• Write a buildProductSchema function that accepts a Wix product object and returns a typed Schema.org Product object, mapping product.name to name, product.description to description, and product.priceData.price to offers.price.
• Add the Offer sub-object to your schema builder, setting priceCurrency from product.priceData.currency and availability from product.stock.inStock using the Schema.org URLs https://schema.org/InStock and https://schema.org/OutOfStock respectively.
• Install the Wix Reviews API by running npm install @wix/reviews, then add a fetchProductReviews function to your schema builder that queries reviews by product ID and calculates the average rating and review count for the AggregateRating field.
• Add the AggregateRating sub-object to buildProductSchema using the calculated average and count from the reviews query. Only include this object if ratingCount is greater than zero to avoid validation errors.
• Map the product image array from product.media.items to the image field in your schema, constructing full CDN URLs using the Wix media base URL plus each image ID with /v1/fill/w_800,h_600,q_85,enc_auto/ parameters.
• In your product page component, call buildProductSchema with the fetched product object, then inject the result using a Next.js Script component with strategy="afterInteractive" or as an inline script in the page head using dangerouslySetInnerHTML.
• Deploy a test product page to a preview URL, then paste the URL into the Google Rich Results Test at search.google.com/test/rich-results. Verify that the Product result shows with price, availability and rating highlighted in green.
• Add BreadcrumbList schema alongside the Product schema by building a breadcrumb array that reflects your URL hierarchy (Home > Category > Product) and injecting it as a second JSON-LD script block on the same page.
• Monitor Google Search Console > Search Results > filter by Rich Results after 2-3 weeks of indexing. Confirm that product pages show impression data with rich result features active, indicating Google is reading and displaying your schema.