In this video I want to show you how you can create a Rich Snippet for Products using Structured Data.
Links from the Video:
- Reference page for a Product
- Structured Data Generator
- Googles Structured Data Test Tool
In this video I want to demonstrate how to build a product snippet using structured data. This is for everyone who offers products on their sites maybe with WooCommerce or some other e-commerce solutions.
Hi and welcome back nice to have you in the fifth lesson of module 3 of my structured data training. I am Florian the developer SNIP, the Rich Snippets and Structured Data plugin for WordPress. If you want to use the plugin please feel free to follow the link that you can find in the description area.
In this video I want to show you how a product snippet is built. You hopefully took all the lessons from the previous modules. If not please jump back to the beginning or to a video where you think you need to refresh your knowledge. In this video it’s important that you have understood what structured data is and what Rich Snippets are. You need to know how and where you can find the right schema classes as well as their properties to create a product schema.
Let’s jump right!
How a Rich Snippet for a Product looks like
A markup for a product produces rich search results in the normal text search as well as on the image search results pages, says Google. However I never saw this on image search. Nevertheless what is more important is that users can see the price, the availability and the review ratings right on search results if they were included in this schema.
Read the references
As always: we open up the product page on Google’s reference to see how a Rich Snippet for a product may look like in search results; what you should do and should not do. And be really serious about that! If you do violate Google’s policies your site might get a penalty; and last but not least what properties are totally necessary and which ones are just recommended.
The product schema will be a little bit more complex as all the other schemas that I have showed to you in my structured data training. This is because the product schema needs a lot of properties that inherit a child schema. For example you will see later that the “offers” property will need one or more “Offer” schemas. However you should not be frightened about this. I will explain everything in full detail and with the tools I provide I’m sure you will understand everything.
But for now you should read through this document and then follow me to the next page. As always Google uses structured data from schema.org and on schema.org/Product you can find all properties that can be included for this schema type. However, as you could see on Google’s reference page, you don’t need every single property listed there. You only need the required ones to get a Rich Snippet in search results. However I highly recommend to add as much properties as you can. I will explain later why I recommend this procedure.
On schema.org a product is a CreativeWork which is a Thing. If you don’t know what I’m talking about right now please go back to module one of my structured data training. It will be explained in every detail how schema.org is structured. As you can see here a product has a few child schemas that you can also use. Search engines understand that all of them are children of the mother schema. So if you want to use the Car schema because you sell cars on your site, please feel free to use it. Search engines also have a deep understanding of all the schemas found on schema.org. So they understand that the Car schema is a product, too. As you can see the product schema and all of its child schemas can have thousands of properties. However you don’t need every single one to get a Rich Snippet in search results as I said before. But as always: you can add more if you can fill the properties properly. I’m sure that Google and other search engines will mark more and more properties as mandatory in the future because they did exactly that a lot during the last months. For now I will stick with the recommended ones.
Alright! Let’s get started!
In the video I will use the built-in generator in SNIP, my Rich Snippets and Structured Data plugin for WordPress. If you don’t use the plugin, please feel free to use the structured data generator on my website to follow the video instructions. The free generator does not have all the features the built-in generator has. So it might be that you get stuck at some point. Especially when it comes to Global Snippets that allow you to automate structured data generation.
Set up a Global Snippet
I am now logged-in to WordPress and you see the Global Snippets overview. SNIP comes shipped with predefined Global Snippets that can be used out-of-the-box for certain purposes. As you can see there is a product snippet that works with WooCommerce already. If you are working with WooCommerce, the chance is high that this Global Snippet fits your needs. If not you will see in this video how a product snippet is built step-by-step. To keep this video short I will show you everything by editing the existing snippet.
If you start with a new snippet you would search for “Product” in this field here. But you can also click on this button. The buttons here are just shortcuts that should save you some time when creating the most-used Global Snippets. As I’ve mentioned already: we need to look up which properties we need for the product.
For this I have opened up Google’s reference on a second tab. When we scroll down we see a few tables that describe which properties are required and which ones are recommended. If you only include the required properties Google’s Rich Snippet Test Tool will give you a warning on the properties that are recommended. Although the recommended properties produce a warning, if they are missing in a schema markup, they do not prevent a Rich Snippet from showing up in search results. However the red errors do as we will see later.
On this page we see that for the main schema – which is the product – the image and the name is required. Google recommends to add more if possible. So for example the aggregateRating – which is the average rating users gave your product – should be included. However, as I said before, it’s not always possible to include those properties. If you are not working with a rating plugin you may be not able to integrate this property. And this is totally fine as it’s just recommended. If the aggregateRating is missing, the popular stars in search results will not show up because there is no data that a search engine could use.
Add Schema properties
As you can see the predefined snippet uses a lot of that properties already. Not everything is needed but because WooCommerce and WordPress provides this data we are able to integrate it into the snippet as well. Let’s go through them quickly.
SNIP works with WooCommerce very well. It provides you with values that you can use out of the box. So the SKU – which is the stock keeping unit – is a value that WooCommerce collects when you set up a product.
Properties like MPN, GTIN8 and some others are not collected by WooCommerce directly. But you can collect it in a product attribute. That is a feature WooCommerce provides. SNIP has access to this data so you can add it here.
As we just saw on Google’s reference page: image and name are required properties. The image is an ImageObject which basically just uses the thumbnail URL and the width and the height. And I have defined the post title for the name attribute.
WooCommerce also has a built-in review system. So we can use this data to include the aggregateRating. That’s basically just the average rating that is printed out. The offers property includes multiple Offer schemas depending on the product. The offer schema itself prints the price, the priceCurrency and the availability of the item. The availability is only printed out if the stock-keeping functionality is active in WooCommerce.
I have chosen to include the post excerpt for the description.
The brand property inherits a Brand schema. It only has one property and that is the name. I have chosen to use a WooCommerce product attribute here as well.
The review property includes the latest comments from users who not only rated the plug-in but left a comment as well. Because we are working with WooCommerce we try to get as much information from the actual product page.
If you are not working with WooCommerce you can mark some of the properties overridable like this. It allows you later to override the values on each product page separately. If you want to know how this works in detail please go back to module 2 of my structured data training. The videos there explain in every detail how overriding of properties work.
Configure the product page
To see all this in action let’s take a look at the actual WooCommerce product. I’m using a side-by-side few here so that you can see what I’m talking about.
SNIP uses the title here for the name attribute here. Just as we defined that. The description – that you can find down below – which is internally the excerpt text – is defined here for the description.
The price here will be in the offers attribute in the final schema markup.
For the brand name I have added a product attribute right within WooCommerce. You can find it here with the value of WP-Buddy.
The other properties like NPM, GTIN8, etc. are also product attributes. However I don’t use them here as my plugin does not have such numbers. The end result will be that SNIP deletes those properties from the final markup because they are empty anyway.
Test the markup
Now let’s switch to Google Structured Data Test Tool. You would normally enter the URL to your product here. Because I’m on a local development server, that is not reachable from the internet, I need to include the code that SNIP generates manually. So I copy and paste the code here and run the test.
Understand the warnings
After the evaluation the test tool brings up three warnings. As always: orange warnings are not errors. They do not prevent you Rich Snippet from showing up in search results. You can easily recognize this because with an error you would get this – you wouldn’t get this preview button here. So let’s scroll down to see the warnings. In most cases warnings appear because we did not add data to the recommended properties that we saw on the reference page.
The test tool says that the three values are missing but I can easily clarify that: aggregateRating was deleted from SNIP because the product currently has no ratings. And if there are no ratings there’s nothing to include. Some customers argued that the rating could be included with a rating of zero but this doesn’t work as the test tool then prints an error which then results in the case that the Rich Snippet would not show up in search results. So in this case the best solution is to leave the warning as it is. SNIP will fill the property after the first user has rated the product.
For the review this is the same because no one has ever rated this product yet and therefore did not leave a comment there is nothing to include. Only the SKU field could be added but if you don’t want to add it: that’s totally fine!
If you get any red errors you need to fix them. In most cases the test tool gives you a hint on what you could do.
Preview the Rich Snippet
After that you can click on the preview button on top. But beware: the preview at this point in time is not very accurate. In my case it doesn’t even show the title of the product. Probably the preview should only be used to give you a clue.
Let’s sum everything up what we have learned in this video.
- At the time of the making of this video the product snippet shows up the price, the availability and – if this information was found in the snippet – the number of reviews as well as the review rating.
- I have explicitly mentioned the Car schema in this video but the product schema has a lot more child schemas that you can also use. Search engines understand that Car is a product because they know everything about schema.org, too.
- To find the right properties use Googles reference pages to learn more what you should and should not do. Use schema.org to integrate more properties. I totally recommend to use as many properties as possible.
- Automate as much as you can by setting up a Global Snippet as shown in this video using SNIP, my Rich Snippets and Structured Data plugin.
In the next video I will show you how to create a snippet for local businesses. That is especially interesting for everyone who runs a local store. See you later!