You see them in search results a lot: product listings with added metadata, like price, availability, reviews and specifications. However, not every site offering the same product has the same rich snippets. This could have two reasons. One, Google doesn’t deem the site important enough to show additional metadata. Or two, the site hasn’t been enhanced with Schema.org data. In this article, we’ll focus on Schema.org data for product listings. Already have Schema.org for your products? Learn how to handle your sale prices!
Structured data for rich snippets
The information in rich snippets doesn’t just magically appear; you have to add in the data to give Google the chance to add it to the results. Even then, it’s up to Google if your data is visible or not. Google uses structured data to include the extra data in the search results. The markup for structured data is taken from an open initiative called Schema.org. This data format is developed by several search engines to make sure data can be consistently interpreted by them. You can add all kinds of stuff, like product information, ratings and reviews, or information about your local business. Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »
To implement structured data, you need to offer search engines the correct markup. Microdata, RDFa, and JSON-LD are the most important technologies used to work with structured data. JSON-LD is a lightweight data format that’s easy to read for both humans and machines and appears to be favored by Google these days. Remember, Bing still doesn’t support it.
Rich snippets for a Sony camera on BHPhotoReview.com
An example product
There are two kinds of product information you can show in search results. A product page describes a single product, while a shopping aggregate page describes a list with a single product along with different sellers that offer that product.
Your landing page should contain a Schema.org Product type; this is the product you are selling. It should also contain a nested Offer type; this type describes how the product is sold. The data should be present in the HTML code and not be rewritten in JavaScript.
There are a couple of guidelines you need to follow to work with product markup. For instance, you must use it only for individual products, not a product category. You cannot use it for adult related products, and the name of a reviewer must be a valid name or team.
Example code
The code below describes an example product. In this code, you see different parts of Schema.org code, plus the way JSON-LD presents these. Some highlights:
- type: Describes what kind of product it is
- name, image and description: These are quite obvious
- brand: The brand of the product
- thing: A thing is the most generic type of item
- aggerateRating: A nested aggregate rating of the product
- ratingValue: Is the average rating of the product
- reviewCount: The total number of reviews
- offers: This an indication that the product is for sale
- offer: An offer to provide a service or sell a product
- priceCurrency and price: These are quite obvious
- review: A written review of the product, plus rating
- type: The Schema.org type is a review, of course
- author: Who wrote it? Has to be a real name
- datePublished: When was it published?
- description: The body text of the review
- name: The title of the review
- reviewRating: What grade did it get (1-5)
- bestRating: Five is the max
- ratingValue: The rating the reviewer gave
- worstRating: One is the lowest
Other things you can add to your page are, among other things, availability, different kinds of product identification, like SKU, model, color, height, depth and a highPrice and lowPrice.
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "Yoast SEO for WordPress",
"image": "https://cdn-images.yoast.com/uploads/2010/10/Yoast_SEO_WP_plugin_FB.png",
"description": "Yoast SEO is the most complete WordPress SEO plugin. It handles the technical optimization of your site & assists with optimizing your content.",
"brand": {
"@type": "Thing",
"name": "Yoast"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.7",
"reviewCount": "7514"
},
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "69.00"
},
"review": {
"@type": "Review",
"author": "Hank Jones",
"datePublished": "2016-11-01",
"description": "Yoast SEO is a great plugin.",
"name": "Awesome!",
"reviewRating": {
"@type": "Rating",
"bestRating": "5",
"ratingValue": "5",
"worstRating": "1"
}
}
}
</script>
Ratings and reviews
We’ve been talking about ratings and reviews in a previous article. There is a small, but important difference between a rating and a review. A rating is a value a product gets on a scale from one to five. A review uses the same scale, but also adds a written explanation text to the rating.
In the code example above, we’ve added a rating and reviews section. This kind of information can be picked up by Google and shown in the search results, right beside your product listing.
Keep the following in mind when working with reviews and ratings. You should clearly refer to a specific product or service. The reviews and ratings must be visible to users from the marked-up page. Use it only for a particular product, not a category. You can only use a valid name for a reviewer, so no ‘Black Friday sale: $50 off’. Plus, ratings have to use the five-point scale.
Temporary price drops in Schema.org
Let’s say you are running a Black Friday sale, and you want it to appear in the search results. Normally, you’d change the price in your Schema.org data and wait for Google’s crawlers to pick it up. However, there is another way to get temporary price/data changes in the results.
To do this, you can use Schema.org/Offer and Schema.org/PriceSpecification. Specify the correct price and the date when the price starts (priceValidFrom) and ends (priceValidUntil). Once you have written your code, you always have to make sure your structured data is valid. To check this, you can use the Structured Data Testing Tool.
If you want to update your price now, you could hit Fetch and Render in Google Search Console and Submit to index. Now, you just have to cross your fingers and hope Google picks it up as soon as possible.
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "An excellent product",
"image": "http://www.example.com/example.jpg",
"description": "You really should buy this excellent product, because it's excellent.",
"mpn": "567896",
"brand": {
"@type": "Thing",
"name": "Excellent product"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"reviewCount": "5657"
},
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "99.99",
"priceValidFrom": "2016-11-28",
"priceValidUntil": "2016-11-29",
"itemCondition": "http://schema.org/NewCondition",
"availability": "http://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "Maker of excellent products"
}
}
}
</script>
This is only the beginning
We’ve only shown you the tip of the iceberg. There’s a lot more you can do with Schema.org, and there’s a ton of terms you can add to make your listings even richer. Schema.org is a treasure trove of structured data vocabulary. On pending.schema.org, you can find upcoming terms.
Remember that you should never provide incorrect metadata for Google. So whatever you do, don’t forget to test your code with the Structured Data Testing Tool!
I’d also recommend adding the number of products in the cart to the cart icon. It will help me remember that added products to the cart already ;)
