Schedule mark-up for web shops

eMany members will be familiar with the yellow stars in Google written about earlier in this blog. Images of videos and the price or stock status of a product are also examples of extra additions that are shown in search results. To benefit from these so-called "Rich snippets", you will have to give search engines a hand. You do this by adding extra codes (structured data mark-up) to your website. This allows search engines not only to read what is written but also to understand what is meant.

An example of rich snippets

Rich snippets are the extra additions that Google shows in search results. These can ensure a higher CTR (click through rate) and thus more visitors to your webshop.

Example of Schema markup in search results

Rich snippets have existed in Google since May 12, 2009 .

What is structured data?

Structured data is the collective name for name-value data that you add as extra code to your website. Together with the content on your site, it helps search engines identify, classify and index information. There are several methods of clarifying content for search engines. For example, the HTML5 specification of structured data is called " Microdata." Other well-known structured data formats are RDFa and JSON-LD . It is wise not to include the same structured data in different formats, as this can cause confusion for search engines.

An example of structured data

Imagine you sell vacuum cleaners in your web shop. Now you have a page about a specific vacuum cleaner with the name, price, image, a short description and some product features. Your HTML code then looks something like this:

<div> <h1>Philips FC8477 PowerPro Compact</h1> <div>Now for €1,150.99</div> <img src="/images/-FC8477-powerpro-compact.jpg" /> <div>The Philips FC8477 PowerPro Compact is an inexpensive bagless vacuum cleaner with an output of 750 watts. This vacuum cleaner is especially suitable for low-pile carpet.</div> <div>Brand: Philips</div> <div>Color: Black</div> </div> </div>

When you add microdata to this, the source code will look like this:

<div itemscope itemtype="https://schema.org/Product" > < h1 itemprop="name ">Philips FC8477 PowerPro Compact</h1> <div itemprop="offers" itemscope itemtype="https://schema.org/Offer" > Now for <span itemprop="priceCurrency" content="EUR ">€</span> <span itemprop="price" content="1150.99 ">1,150.99</span> </div> <img itemprop="image " src="/images/-FC8477-powerpro-compact.jpg" /> <div itemprop="description ">The Philips FC8477 PowerPro Compact is an economical bagless vacuum cleaner with an output of 750 watts. This vacuum cleaner is especially suitable for low-pile carpets.</div> <div>Brand: <span itemprop="brand ">Philips</span></div> <div>Color: <span itemprop="color ">Black</span></div> </div>

If you look at the additional codes (highlighted in green), you will see item type="schema.org/Product " at the top and item type="schema.org/Offer " later. This indicates that this page is about a vacuum cleaner that can be sold at a certain price. In this way, this example clarifies the name, price, currency, product image, description, brand and color of the vacuum cleaner.

What about schema mark-up?

Schema.org is the main standard for structured data mark-up. It stems from a 2011 collaboration between Google, Bing & Yahoo. Meanwhile, Russia's Yandex also supports schema.org. You can think of schema.org as a large library of all the possible clarifications you can add to a website. Schema mark-up is implementable with all popular structured data formats (Microdata, RDFa, JSON-LD). There are different "schemas" each with its own purpose. For example, there are schemas for products , people , companies , reviews , events etc. Some of these schemas can be defined more specifically. For example, if you have a shoe store, you can indicate it as Local Business , but also as Store or even ShoeStore . It is important that you define a schema as specifically as possible so that the search engines can better understand what you are talking about. So always review the full list of schemas when adding schema mark-up to your website.

The advantages of schema mark-up

As an online store, you naturally want to know what implementing schema mark-up will get you. There are three SEO benefits to implementation:

1. You significantly increase the chances of rich snippets being displayed for your website. This can result in higher CTRs and thus more visitors to your website. A 2011 case study at Independer.nl measured a result of 28% higher CTRs by getting review snippets in search results.
2. Search engines better understand the content on your website and can distinguish between pages whose topics overlap. In a 2015 case study, this even led to recovery of search traffic on a website that had been downgraded due to rollout of some Panda updates.
3. Because search engines better understand your content, your website can be shown on searches you were not previously associated with.

Using schema mark-up is best practice for presenting content to search engines. So although it is not used by Google as a ranking factor , you can definitely benefit from it.

Relevant e-commerce schema mark-up

For e-commerce websites, there is a tremendous amount to label with schema mark-up. Listed below are the most important possibilities. Although this list is fairly comprehensive, there may well be additional markup available for your specific industry.

Basic schema mark-up for products

• The name
• The brand
• The product category
• The model
• The color(s)
• The height , width , depth and weight
• The warranty period and the content of the warranty promise
• Product image (can be more extensive, see here )
• The price
• Currency in which the price is displayed
• Whether or not in stock and the stock status in numbers
• The serial number
• The SKU , EAN (GTIN) and/or item code

Optional schedule mark-up for products

• The condition of the product
• The number of products within this offer
• Additional offer(s) in conjunction with this product
• The duration of the offer or pricing
• Order volume to obtain a specific price/stipend
• Accessories or spare parts
• Related products (for example, products from the same series)
• Similar products
• Product is a variant of
• Product is the successor of
• Product manufacturer
• Delivery area
• Delivery methods
• Accepted payment methods
• The processing time until the product is shipped
• Reference to official source or extended description (Wikipedia) of the item

Review markup

The review mark-up helps in getting yellow stars in Google.

• The item being reviewed
• The total number of reviews
• The total review score
• The average review score

If you are using a review system that does not use a 5-point scale, also indicate the lowest possible rating and highest possible rating .

Formatting individual reviews

• The title of the review
• The review text
• The review score
• The person who wrote the review
• Date the review was written
• Images of the reviews

Scheme mark-up regarding the organization

This mark-up is generally only added on the contact page and/or in the footer. Although it is also used for local businesses (schema local business), it never hurts to add it.

• The name of the organization
• The legal name of the organization
• The name of the parent company
• The website
• The address
  • Street
  • Postal code
  • City
  • Country
• The geographical location
  • Location company longitude
  • Company location latitude
• Email address
• Phone Number
• Opening Hours
• The company logo
• VAT number
• Other scheme mark-up

In addition to the possibilities mentioned above, there are a number of situations where additional markup can be interesting. Blog - this is interesting when you have a lively blog on your webshop where there is actual interaction with your target audience and/or multiple people write on it. Medical - when you provide medical products or information, additional formatting is available. Games , movies or music - Within these categories a lot of additional formatting is available for. Books or Audiobooks - Additional formatting is also available for products that are available in multiple languages . As you have seen, there are a huge number of possibilities with Schema mark-up. When you start implementing, it is wise to first determine what data is most important on your website. That way you avoid spending time, money or energy implementing unnecessary markup.

Adding schema markup

There are two ways to add structured data to your website. One is by adding schema mark-up to the code of your website or the other is by using the Google Data Highlighter .

Implementation in your website

As a web shop, you often have to rely on an external programmer to add structured data directly to the code of your website. Unlike a lot of other functions, there are often no plugins or extra modules available for this. However, there are tools that can help generate the code. In practice, however, the extra layout will have to be added to existing software by someone who understands programming in your shop system.

Different implementation methods

As indicated earlier, schema markup can be implemented in three structured data formats. These are Microformats, RDFa and JSON-LD. Google prefers JSON-LD . That said, the format choice is mostly determined based on your CMS system or your programmer's preference. The method that is technically easiest should be leading here.

Practical examples

We have implemented many of the schema mark-up discussed in this article at the webshop premium-hookahs.com . The source code of mainly the product pages are a good example. Here the emphasis is on the markup around the product and the markup around the reviews. Our own website can also be used as an example. Here you can see how many things regarding the organization with microdata (note the itemprop element) are implemented. Especially the source code of the contact page shows this well. In addition, you can see that "SameAs" in the footer has also been used to indicate which pages are all about the same object. So this can be either internal within your website or external on Wikipedia, for example.

Implementation via Google Search Console

Google offers an alternative to the (difficult) technical implementation of structured data on your website. They do this through the Data Highlighter which is available under the heading "Search Formatting" -> "Highlight Data" in Google Search Console . This tool allows you to highlight sections on your website with the appropriate formatting directly in a visual interface. Google is also able to detect patterns in this so this method can also be applied to larger web shops. Although this is a great alternative, there are several limitations that often require a programmer for full implementation. The limitations of the Data Highlighter

1. The Data Highlighter is a Google tool. Other search engines cannot use this data.
2. The Data Highlighter is limited in functionality. As a result, only about 50% of the formatting discussed in this blog can be applied.
3. When product information is hidden behind tabs, this information cannot be formatted using the Data Highlighter.
4. When the HTML structure of your website changes, you may need to reset the Data Highlighter.

Structured data testing

To check whether the implementation was successful on your website, you can use Google's Structured Data Testing Tool . Here you can check per URL which structured data is or is not recognized by the Google bot. You can also use this tool to generate examples of the layout. Finally, through Search Console, Google allows you to gauge the current state of your site and identify any errors in your markup. You can find this dashboard under the heading "Search Formatting" -> "Structured Formatting." If you do not yet have a schema markup on your site, you will find the message "We did not detect any structured data on your site" or "We do not detect any structured data on your site" here. I am curious which schema mark-up you already have in your webshop and what your experience is with it. If you have any questions or remarks, I would love to hear them in the comments!