SEO Structured Data for Products

The SEO Structured Data for Products package generates structured data about your site’s products based on schema.org requirements. Inserting this data into a product page’s <head> section allows Google to provide rich search results for that page.

Setup

Wix Platform

Fill in Required Data

Google requires certain information about your site and products in order to produce rich search results. The package collects these details from various databases across your site. Follow the steps below to make sure all the information you need is available.

Fill in the following fields in your site’s Dashboard:
Make sure that the collection containing your products has fields with the following keys and types and is read-only. If you don’t have a collection containing your products, create one.

Key	Field Type
title (usually automatically generated)	Text
description	Text
sku	Text
images	Media Gallery
price	Text
priceValidUntil	Text (YYYY-MM-DD)

Set Up Dynamic Product Pages

Google produces rich search results based on pages that display individual products. These pages can be easily set up in Wix by creating dynamic pages based on the collection that contains your product details.

Create a dynamic page based on the collection holding your product data. The page is set up to generate URLs based on a product’s Title by default.
Add the following code to your dynamic page. Substitute ’#myDynamicDataset’ with the ID of the dataset on your page:

    import wixSeo from 'wix-seo';
    import { buildSchema } from '@velo/seo-structured-data-product-backend';
    import wixLocation from 'wix-location';

    $w.onReady(async function () {
        const schemaPromise = new Promise((resolve, reject) => {
            $w('#dynamicDataset').onReady(async () => {
                const siteBaseUrl = wixLocation.baseUrl;
                const currentItem = $w('#myDynamicDataset').getCurrentItem();
                const schema = await buildSchema(currentItem, siteBaseUrl);
                resolve(schema);
            });
        });
        const resolvedSchema = await schemaPromise;
        if (resolvedSchema) {
            wixSeo.setStructuredData([resolvedSchema]);
        }
    });

js | Copy Code

This code uses the package to generate the structured data for a product and writes it to the product’s page using the wix-seo API. The call to wix-seo is outside of the Promise in the code because it cannot be called within the dataset's onReady() function.

Configurations

The config.js file allows you to set the following options:

addedLabels: By default, the structured data generated by the package only contains the minimum information required by Google. You can include optional product schema values that exist in your product collection by adding their names to the addedLabels array.
authorName: You can define the site author’s name by setting this variable. If you don’t, the package will default to your site’s contact email address.

Note: You can use Google's rich search result test to confirm that you have set up the package correctly.

Package Content

Backend Files

This package contains the following backend files. Note that only exported functions that you can use in your site are listed here.

schemaBuilder.jsw

The code in this file collects information from across your site and generates structured product data that meets Google’s requirements for producing rich search results.

To use the function below in your code, import it with the following syntax:

import {buildSchema} from '@velo/seo-structured-data-product';

Copy Code

This file contains the following function:

buildSchema()
Arranges several chunks of site data together into complete structured data about a product.
Syntax:
async function buildSchema(item: object, baseUrl: string): Promise<json>
Parameters:
- baseUrl: The base url of your site.
- item: An object containing a product’s data.
Returns:
A JSON object containing complete structured data about a product.

Example Return Object:

{
    @context: "https://schema.org/",
    @type: "Product",
    name: "Test product",
    image: [
        0: "<link to image>",...
        ],
    description: "Hey I'm testing product schema",
    sku: "111111",
    brand: {
        @type: "Brand",
        name: "Products R Us"
        },
    author: {
        @type: "Person",
        name: "Steven"
        },
    offers: {
        @type: "Offer",
        url: "https://somesite.wixsite.com/some-site-name/products/test-product",
        priceCurrency: "EUR",
        price: 100,
        priceValidUntil: "20-11-2021",
        itemCondition: "https://schema.org/UsedCondition",
        availability: "https://schema.org/InStock"
        }
}

js | Copy Code

constants.js

The code in this file contains constant variables that are used in schemaBuilder.jsw.

config.js

The code in this file contains user-definable variables that are used in schemaBuilder.jsw.

Change Notes

1.0 Initial version.