Structured Data for Products – What, Why and How!

Introduction

If you have ever been asked why a competitors’ product is getting better results in search, the answer might lie with Structured Data markup. Getting your mark up right will give you eye-catching and impressive results with. 

  • Thumbnails
  • Snapshots of product details and
  • Review ratings.

These are called Rich Results and they seriously enhance your product’s appearance. It’s not surprising that these eye-catching results frequently increase your clickthough rate (CTR) and may also improve the rankings you receive for your marked up products and services. It can even seem like your product is half way to being sold before the visitor reaches your site!

This might sound too good to be true but Structured Data markup is something that everyone can use and for these Rich Snippets, you need to use JSON/LD markup. Start using this technology and you give yourself the chance to gain a serious competitive edge.

To remain competitive – and to have confidence that your products and services will continue to show up in the eye-catching search results such as carousels and other special results – you need to add JSON/LD structured data markup. If you need to persuade anyone in your team then just find them a page like the one below and ask them which results catch their eye first.

What is Nested Product Markup?

If you’re familiar with structured data, you will already know that the general rule is one markup type per page. The exciting opportunity with Product markup is that we can nest additional elements of markup within it..

In this example, we can see how the marked up listing for Brilliant Raccoon coffee really stands out in the SERPs with structured data. Get in the Mood Coffee is using Schema markup for all of their products and they provide full and accurate descriptions of their product. This is the key to their results.

Creating your own markup: In this blog I’m going to take you though add the most basic markup to your products and then I will show you how to nest the additional data types to enhance the information you provide to search engines. It’s easy to make slips with your data so, start with the basic markup first and be sure it’s error free before you add in the next portion. A steady, methodical approach is the golden bullet here.

Start with Basic Mark Up

Let’s look at the most basic type of schema.org/Product markup possible that can generate a rich result in Google.

The following code can generate both a Price and In Stock Rich Result. In some situations Google could also make use of the product image, so I certainly want to include that too.

<script type =”application/ld+json”>

{

 “@context” : “http://schema.org”,

 “@type” : “Product”,

 “name” : “My favourite product”,

“description” : “The best product in the world with all the best features.”,

 “gtin”:”ABC123″,

 “sku”:”XYZ789″,

 "url":"https://www.yourcompany.co.uk/bestproduct",

“image” : “https://www.yourcompany.co.uk/image/best_product_600.jpg”,

  “https://www.yourcompany.co.uk/image/best_product_800.jpg”,

  “https://www.yourcompany.co.uk/image/best_product_1200.jpg”,

],

 “offers” : {

     “@type” : “Offer”,

     “availability” : “http://schema.org/InStock”,

     “itemCondition” : “http://schema.org/NewCondition”,

     “seller” : {

         “@type” : “Organisation”,

         “name” : “Your Company”

     },

     “priceCurrency” : “GBP”,

     “url” : “https://www.yourcompany.co.uk/bestproduct”,

     “priceValidUntil” : “2021-02-05”,

     “price” : “29.99”

     }

 }

</script>

Images in Structured Data

This graphic (originally from Search Engine News) helps you to visualise the 3 different aspect ratios that Google requires from images:

It is excellent practice to include 3 product images in your Product markup, just like the example. The 3 images represent the three aspect ratios (1×1, 4×3 and 16×9 ) that Google asks for. You might need to invest some resources in doing this but it’s not too hard to do. It’s well worth the effort as you are more likely to see an image thumbnail in your rich snippet results on Google which really makes it stand out in the search results.

I used to get totally confused when Google asked for a high resolution image as well. However, don’t panic! In this context, Google’s definition is a minimum of 50k pixels when multiplying width x height. That’s not a very large image (250px x 250px = 62.5k) so your typical product image size will be perfectly adequate. These images should be very similar to the visible product image shown on the page but, because they don’t need to be downloaded by website visitors, they can be higher resolution without slowing your page loading.

Should I Add a Brand to my Markup?

Although you don’t have to provide brand information, you’ll see a warning in Google’s Structured Data Markup Tool if you don’t.  You’ll probably see one in Google Search Console too. Brand is very simple to add and people believe that it helps Google make the connection between the Product and a Brand conceptually. Even if you don’t gain any rich results, this could be very useful if you want your site to be associated with important brands that act as a magnet for search traffic.

<script type=”application/ld+json”>

{

   “@context”:”http://schema.org”,

   “@type”:”Product”,

   “name”:”Partied out Panda Coffee”,

   “description”:”Partied out Panda® is a pleasing gourmet blend of high quality Arabica beans. This makes a smooth coffee with a medium body. Relax and be soothed by her warm mild tones and friendly aura. (Fully recyclable packaging).”,

       “sku”:”partied-out-panda-coffee”,

   “url”:”https://getinthemoodstore.com/coffee/partied-out-panda-coffee”,

   “image”:[“https://gitm.fra1.digitaloceanspaces.com/Partied-out-Pandar-bag-front-16-9.jpg?mtime=20210222131219&focal=none”,

     “https://gitm.fra1.digitaloceanspaces.com/Partied-out-Pandar-bag-front-SQ.jpg?mtime=20210222131220&focal=none”,

     “https://gitm.fra1.digitaloceanspaces.com/Partied-out-Pandar-bag-front-4-3.jpg?mtime=20210222131219&focal=none”

         ],

   “brand”:{“@type”:”Brand”,

      “name”:”Get in the Mood”,

      “logo”:”https://gitm.fra1.digitaloceanspaces.com/get-in-the-mood-logo.png?mtime=20201021225006&focal=none”,

      “url”:”https://getinthemoodstore.com/”

      },

   “offers”:{

      “@type”:”Offer”,

      “name”:”Ground”,

      “price”:6.5,

      “priceCurrency”:”GBP”,

      “sku”:”partied-out-panda-ground”,

      “gtin”:”5060352920093″,

      “availability”:”https://schema.org/InStock”,

      “itemCondition”:”https://schema.org/NewCondition”

      } 

} </script>

You can see here that the snippet relating to brand is pretty straightforward to add so I always do this when the information is available.

Nesting Aggregate Ratings

The next most important markup I want to add for a product is Aggregate Ratings. Obviously you need to be collecting review data to get this information and it is possible that your review system will include an option to write your structured data automatically. If it creates error-free structured data for you than that’s a definite bonus. If not, you will want to write your own summary count of your individual review information.

<script type=”application/ld+json”>

{

   “@context”:”http://schema.org”,

   “@type”:”Product”,

   “name”:”Partied out Panda Coffee”,

   “description”:”Partied out Panda® is a pleasing gourmet blend of high quality Arabica beans. This makes a smooth coffee with a medium body. Relax and be soothed by her warm mild tones and friendly aura. (Fully recyclable packaging).”,

       “sku”:”partied-out-panda-coffee”,

   “url”:”https://getinthemoodstore.com/coffee/partied-out-panda-coffee”,

   “image”:[“https://gitm.fra1.digitaloceanspaces.com/Partied-out-Pandar-bag-front-16-9.jpg?mtime=20210222131219&focal=none”,

     “https://gitm.fra1.digitaloceanspaces.com/Partied-out-Pandar-bag-front-SQ.jpg?mtime=20210222131220&focal=none”,

     “https://gitm.fra1.digitaloceanspaces.com/Partied-out-Pandar-bag-front-4-3.jpg?mtime=20210222131219&focal=none”

         ],

   “offers”:{

      “@type”:”Offer”,

      “name”:”Ground”,

      “price”:6.5,

      “priceCurrency”:”GBP”,

      “sku”:”partied-out-panda-ground”,

      “gtin”:”5060352920093″,

      “availability”:”https://schema.org/InStock”,

      “itemCondition”:”https://schema.org/NewCondition”

      }     ,

   “aggregateRating”:{

      “@type”:”AggregateRating”,

      “ratingValue”:”4.9″,

      “reviewCount”:”12″

      }

} </script>

You can see the bold highlighted section of code I added to show the Aggregate Review Ratings for this product. This is the markup that can generate a Star Rating Rich Result in Google Search Results and it’s important that the reviews are specific to the product that is featured in this mark up.

Google will generate a warning for this code asking you to provide the individual review markup as well. You might find it difficult to do this, depending on the review software you’re using. I usually write the code by hand if this becomes a problem because I’m aiming to get the review code embedded within the /Product markup if possible.

Note: Watch out for the commas between the sections of the code. Getting these commas wrong causes about 50% of my markup errors and can take forever to troubleshoot in the Google Rich Results checker. If you are better than me at using your commas in the right places from the outset it will save you a huge amount of grief!

Nesting Product Markup with Aggregate Ratings and Reviews

As someone who had no track record in writing code, I felt pretty intimidated by the idea of writing Schema, let alone tackling nested Schema. However, I wanted to provide clients with a solution so I dived in.

When you add individual reviews, you need to use square brackets []. You use these brackets when you have a list of items (multiple) such as the three images in the code above. You will spot square brackets in the @type Review below and you’ll see that the reviews are enclosed within the []. They indicate the start and end of a list.

In fact, this product has a number of customer reviews and they are using review software which posts new reviews frequently. To keep things simple, I”m only going to show a couple of examples to keep the code shorter but you can easily expand the list (watching out for the pesky commas of course).

<script type=”application/ld+json”>

{

   “@context”:”http://schema.org”,

   “@type”:”Product”,

   “name”:”Partied out Panda Coffee”,

   “description”:”Partied out Panda® is a pleasing gourmet blend of high quality Arabica beans. This makes a smooth coffee with a medium body. Relax and be soothed by her warm mild tones and friendly aura. (Fully recyclable packaging).”,

       “sku”:”partied-out-panda-coffee”,

   “url”:”https://getinthemoodstore.com/coffee/partied-out-panda-coffee”,

   “image”:[“https://gitm.fra1.digitaloceanspaces.com/Partied-out-Pandar-bag-front-16-9.jpg?mtime=20210222131219&focal=none”,

     “https://gitm.fra1.digitaloceanspaces.com/Partied-out-Pandar-bag-front-SQ.jpg?mtime=20210222131220&focal=none”,

     “https://gitm.fra1.digitaloceanspaces.com/Partied-out-Pandar-bag-front-4-3.jpg?mtime=20210222131219&focal=none”

         ],

   “offers”:{

      “@type”:”Offer”,

      “name”:”Ground”,

      “price”:6.5,

      “priceCurrency”:”GBP”,

      “sku”:”partied-out-panda-ground”,

      “gtin”:”5060352920093″,

      “availability”:”https://schema.org/InStock”,

      “itemCondition”:”https://schema.org/NewCondition”

      }     ,

   “aggregateRating”:{

      “@type”:”AggregateRating”,

      “ratingValue”:”4.9″,

      “reviewCount”:”12″

      },

   “review”: [

      {“@type”: “Review”,

      “author”: “Samantha B”,

      “datePublished”: “2021-01-26”,

      “description”: “I purchased various different packets for friends – so we can virtually have a coffee morning. I haven’t physically tasted the product myself but both orders were processed efficiently and arrived promptly at 2 addresses. I will wait to hear what the taste tests are like.”,

      “name”: “Friends Gifts”,

      “reviewRating”: {

         “@type”: “Rating”,

         “bestRating”: “5”,

         “ratingValue”: “5”,

         “worstRating”: “1” }

      },

      {“@type”: “Review”,

      “author”: “Anonymous”,

      “datePublished”: “2021-01-20”,

      “description”: “This coffee does not disappoint! It tastes as it sounds, smooth and mellow. In my opinion I like how this coffee does not have an after bite to it. It doesn’t make me feel like I have to drink a gallon of water after drinking a mug of this. It smells amazing when your brewing it which is a big plus. I like to drink my coffee with oat milk as well as cows milk and it tastes just as good with either added in.”,

      “name”: “Delicious”,

      “reviewRating”: {

         “@type”: “Rating”,

         “bestRating”: “5”,

         “ratingValue”: “5”,

         “worstRating”: “1” }

      }

      ]

} </script>

This code set out above is all that you really require to generate a full Product Rich Result in Google. Although Google does not require you to markup ALL of your individual review content, it is best practice to markup what is actually displayed on the product page if possible. I generally keep all the reviews in the structured data because they are already written and it demonstrates to Google how your aggregate rating is achieved. Remember that on the product page, you don’t need to include every single review but you should include a link to the full review content for visitors to see if they wish. This means that if you’re claiming 12 reviews, or 200+ reviews, you display a quantity of reviews that works well with your page design and then add a “Show More Reviews” link so people can view the hidden reviews.

This is the basics of Product Markup with nested Ratings and Reviews. However, there is so much more you CAN do if you want to further enrich your results. At the moment there is an element of guesswork based on the warnings that Google includes in rich results testing tool. Wherever possible, I like to fix these because they hint at the way Google might use this code in future. One of my favourite resources for keeping up to date with changes is Sitebulb’s Change Alerts. They are watching for changes that Google’s AI might use in rich snippets in future.

Can I Add Shopping Information to my Product Markup?

The simple answer is “yes”. You can add either Organization or a Person to your product markup embedded within /Offer, but please be aware that Google does not currently support /LocalBusiness as a valid option which is frustrating if you want to attract people to your shop. However, the additional markup tells Google exactly where the product can be found and it is possible that they might use this data when someone is searching for a specific product Near Me.

<script type=”application/ld+json”>

{

   “@context”:”http://schema.org”,

   “@type”:”Product”,

   “name”:”Partied out Panda Coffee”,

   “description”:”Partied out Panda® is a pleasing gourmet blend of high quality Arabica beans. This makes a smooth coffee with a medium body. Relax and be soothed by her warm mild tones and friendly aura. (Fully recyclable packaging).”,

       “sku”:”partied-out-panda-coffee”,

   “url”:”https://getinthemoodstore.com/coffee/partied-out-panda-coffee”,

   “image”:[“https://gitm.fra1.digitaloceanspaces.com/_559x761_crop_center-center_none/Partied-out-Pandar-bag-front-worked_600.png?mtime=20201111141853&focal=none&tmtime=20201111141935”,

     ” https://gitm.fra1.digitaloceanspaces.com/_559x761_crop_center-center_none/Partied-out-Pandar-bag-front-worked_800.png?mtime=20201111141853&focal=none&tmtime=20201111141935″,

     ” https://gitm.fra1.digitaloceanspaces.com/_559x761_crop_center-center_none/Partied-out-Pandar-bag-front-worked_1200.png?mtime=20201111141853&focal=none&tmtime=20201111141935″

         ],

   “brand”:{“@type”:”Brand”,

      “name”:”Get in the Mood”,

      “logo”:”https://gitm.fra1.digitaloceanspaces.com/get-in-the-mood-logo.png?mtime=20201021225006&focal=none”,

      “url”:”https://getinthemoodstore.com/”

      },

   “offers”:{

      “@type”:”Offer”,

      “name”:”Ground”,

      “price”:6.5,

      “priceCurrency”:”GBP”,

      “sku”:”partied-out-panda-ground”,

      “gtin”:”5060352920093″,

      “availability”:”https://schema.org/InStock”,

      “itemCondition”:”https://schema.org/NewCondition”

      ,

      “offeredBy”: {

           “@type”: “Organization”,

           “@id”: “https://getinthemoodstore.com/”,

           “name”: “Get in the Mood Store”,

           “url” : “https://getinthemoodstore.com/”,

           “address”: {

               “@type”: “PostalAddress”,

              “addressLocality”: “London”,

              “addressRegion”: “London”,

               “postalCode”: “W1W 8DW”,

              “streetAddress”: “34-35 Eastcastle Street”

              },

           “contactPoint” : [

              { “@type” : “ContactPoint”,

              “telephone” : “++44 (0)1304 332096”,

              “contactType” : “customer service”,

              “contactOption” : “TollFree”,

              “areaServed” : “GB”     } ] }

      },

   “aggregateRating”:{

      “@type”:”AggregateRating”,

      “ratingValue”:”4.9″,

      “reviewCount”:”12″

      },

   “review”: [

      {“@type”: “Review”,

      “author”: “Samantha B”,

      “datePublished”: “2021-01-26”,

      “description”: “I purchased various different packets for friends – so we can virtually have a coffee morning. I haven’t physically tasted the product myself but both orders were processed efficiently and arrived promptly at 2 addresses. I will wait to hear what the taste tests are like.”,

      “name”: “Friends Gifts”,

      “reviewRating”: {

         “@type”: “Rating”,

         “bestRating”: “5”,

         “ratingValue”: “5”,

         “worstRating”: “1” }

      },

      {“@type”: “Review”,

      “author”: “Anonymous”,

      “datePublished”: “2021-01-20”,

      “description”: “This coffee does not disappoint! It tastes as it sounds, smooth and mellow. In my opinion I like how this coffee does not have an after bite to it. It doesn’t make me feel like I have to drink a gallon of water after drinking a mug of this. It smells amazing when your brewing it which is a big plus. I like to drink my coffee with oat milk as well as cows milk and it tastes just as good with either added in.”,

      “name”: “Delicious”,

      “reviewRating”: {

         “@type”: “Rating”,

         “bestRating”: “5”,

         “ratingValue”: “5”,

         “worstRating”: “1” }

      }

      ]

} </script>

This markup code is getting a bit long but it is possible to add more information. For example, in the case of this coffee company, I don’t actually add information about physical locations but I do use different “offer” types to markup beans or ground and different coffees in their gift packs. Depending on the attributes that are important in relation to your product, we might add colour, depth, height, width, weight, material and more. Even if this extra data does not improve your rich snippets, it is read and understood by Google and it has the potential to get your product included in long-tailed keyword searches based on these attributes.

Ready to Have a Go?

Of course you are! Whatever the challenges of nesting JSON LD, the rewards can be great. I’ve pushed myself hard to learn these techniques but it’s been well worth the effort. If you need a hand, just send me an email or give me a call on 07974 193176.