unhead@betaUse defineProduct() with offers, aggregateRating, and review properties to enable product rich results. Google can display price, availability, ratings, and review counts directly in search results.
defineProduct creates Product Schemas whilst handling relations for you.
Note that some fields may already be inferred, see Schema.org Params
import { defineProduct, useSchemaOrg } from '@unhead/schema-org/solid-js'
useSchemaOrg([
defineProduct({
name: 'Schema.org Book',
description: 'Discover how to use Schema.org',
image: [
'https://example.com/photos/16x9/photo.jpg'
],
offers: [
{ price: 50 },
],
})
])
For optimal product markup, include as much information as possible:
import { defineProduct, useSchemaOrg } from '@unhead/schema-org/solid-js'
useSchemaOrg([
defineProduct({
name: 'Premium Ergonomic Office Chair',
description: 'High-quality office chair with lumbar support and adjustable height.',
image: [
'https://example.com/images/chair-front.jpg',
'https://example.com/images/chair-side.jpg',
'https://example.com/images/chair-back.jpg'
],
sku: 'CHAIR-123',
mpn: 'ERGO-2023-BLK',
gtin13: '9780123456789',
brand: {
name: 'ErgoComfort'
},
offers: {
price: 299.99,
priceCurrency: 'USD',
priceValidUntil: '2023-12-31',
url: 'https://example.com/chair-ergonomic',
availability: 'https://schema.org/InStock',
itemCondition: 'https://schema.org/NewCondition'
},
aggregateRating: {
ratingValue: 4.7,
reviewCount: 89
},
review: [
{
author: 'Jane Doe',
datePublished: '2023-01-15',
reviewBody: 'This chair has dramatically improved my posture and comfort throughout the workday.',
reviewRating: {
ratingValue: 5
}
},
{
author: 'John Smith',
datePublished: '2023-02-20',
reviewBody: 'Excellent build quality, but took some time to adjust properly.',
reviewRating: {
ratingValue: 4
}
}
]
})
])
For products with multiple variants (color, size, etc.), use the following approach:
import { defineProduct, useSchemaOrg } from '@unhead/schema-org/solid-js'
useSchemaOrg([
defineProduct({
name: 'Cotton T-Shirt',
description: 'Comfortable 100% cotton t-shirt, available in multiple colors and sizes.',
image: [
'https://example.com/images/tshirt-main.jpg',
'https://example.com/images/tshirt-red.jpg',
'https://example.com/images/tshirt-blue.jpg'
],
offers: [
{
name: 'Small Red T-Shirt',
price: 19.99,
priceCurrency: 'USD',
sku: 'TSHIRT-S-RED',
availability: 'https://schema.org/InStock',
url: 'https://example.com/tshirt-small-red'
},
{
name: 'Medium Red T-Shirt',
price: 19.99,
priceCurrency: 'USD',
sku: 'TSHIRT-M-RED',
availability: 'https://schema.org/InStock',
url: 'https://example.com/tshirt-medium-red'
},
{
name: 'Small Blue T-Shirt',
price: 19.99,
priceCurrency: 'USD',
sku: 'TSHIRT-S-BLUE',
availability: 'https://schema.org/OutOfStock',
url: 'https://example.com/tshirt-small-blue'
}
]
})
])
For the availability property, use one of these Schema.org values:
https://schema.org/InStock: Item is in stockhttps://schema.org/OutOfStock: Item is out of stockhttps://schema.org/PreOrder: Item is available for pre-orderhttps://schema.org/Discontinued: Item has been discontinuedhttps://schema.org/BackOrder: Item is on backorder and will be available laterhttps://schema.org/InStoreOnly: Item is available only in physical storeshttps://schema.org/OnlineOnly: Item is available only onlinehttps://schema.org/SoldOut: Item is sold outFor category or collection pages that list multiple products, use the CollectionPage type:
import { defineWebPage, useSchemaOrg } from '@unhead/schema-org/solid-js'
useSchemaOrg([
defineWebPage({
'@type': 'CollectionPage',
'name': 'Office Furniture Collection',
'description': 'Browse our collection of high-quality office furniture.'
})
])
For shopping cart and checkout pages, you can use specific page types:
import { defineWebPage, useSchemaOrg } from '@unhead/schema-org/solid-js'
// For a shopping cart page
useSchemaOrg([
defineWebPage({
'@type': 'CheckoutPage',
'name': 'Your Shopping Cart',
'description': 'Review and edit your shopping cart items before checkout.'
})
])
// For a checkout page
useSchemaOrg([
defineWebPage({
'@type': 'CheckoutPage',
'name': 'Checkout',
'description': 'Complete your purchase securely.'
})
])
For eCommerce sites, it's important to establish your brand's identity. This can be done using Organization or LocalBusiness depending on whether your store has a physical location.
See the Identity guide for more details.
// Organization Example
import { defineOrganization, useSchemaOrg } from '@unhead/schema-org/solid-js'
useSchemaOrg([
defineOrganization({
name: 'My eCommerce Store',
logo: 'https://example.com/logo.png',
sameAs: [
'https://facebook.com/mystore',
'https://instagram.com/mystore',
'https://twitter.com/mystore'
],
contactPoint: [
{
'@type': 'ContactPoint',
'telephone': '+1-555-123-4567',
'contactType': 'customer service',
'areaServed': 'US',
'availableLanguage': ['English', 'Spanish']
}
]
})
])
// LocalBusiness Example
import { defineLocalBusiness, useSchemaOrg } from '@unhead/schema-org/solid-js'
useSchemaOrg([
defineLocalBusiness({
'name': 'My Retail Store',
'image': 'https://example.com/store-front.jpg',
'@type': 'ClothingStore',
'address': {
streetAddress: '123 Main St',
addressLocality: 'Anytown',
addressRegion: 'CA',
postalCode: '12345',
addressCountry: 'US'
},
'telephone': '+1-555-123-4567',
'priceRange': '$$',
'openingHoursSpecification': [
{
dayOfWeek: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday'
],
opens: '09:00',
closes: '17:00'
},
{
dayOfWeek: ['Saturday'],
opens: '10:00',
closes: '16:00'
}
]
})
])
For a typical eCommerce site, consider implementing this schema structure:
This comprehensive structure helps search engines understand your eCommerce site and can improve visibility for your products in search results.