Introduction to Rich Results & Schema Markup (Structured Data)

By Lee Bagley-Bramwell - Reading time 8 minutes

Rich result and schema markup, also referred to as structured data, go hand in hand. But, what are they and what do they do? Let’s break it down.

Introduction to Rich Results & Structured Data feature image | Kanuka Digital

What is Schema Markup?

Schema Markup is code that’s added to the HTML code of a website. It allows search engines to change the way your website content is displayed in SERPs (Search Engine Results Pages). It also helps search engines present users with more informative results.

Search engine results pages (SERPS) are web pages served to users when they search for something online using a search engine, such as Google.

These results are called ‘rich results’. We will go into more detail on these further down in this post.

Different Types of Schema Markup / Structured Data

There are different formats of markup code that can be used to help create rich results. These include these common markup languages:

If your SEO efforts are focused on Google rather than Bing, it is recommended that you use the JSON-LD format, as this is favoured by Google.

On the other hand, Microsoft’s search engine Bing doesn’t favour any one markup format listed above over another.

What are Rich Results?

Rich results are enhanced results in Google search and go beyond the typical blue link to a website. They tend to have extra visual or interactive features which, as a result, present the website content in a more informative way for the user. As mentioned earlier, rich results are the outcome of adding Schema markup to your website.

Google announced that rich snippets, rich cards and enriched results should now be referred to as ‘rich results’. Google did this because they wanted to reduce any confusion between the three commonly used names.

Different Types of Schema Markup

There are different schema markup content types that you can ‘mark up’ which, as a result, would help to create rich results and help you to stand out from other search results.

Below is a list of the more common categories of schema markup:

There are also a number of enhancements you can make to your site using markup including the following:

There are more categories and site enhancements than those listed above, but these tend to be the most common.

Not every website will want to use, or even be able to use, every single bit of schema. It depends on the build and genre of your website.

For example, you may have an informational website and not an eCommerce site, therefore, ‘Product’ schema may not be of any use to you.

This could also be true if your website has nothing to do with music or recipes. In which case, you wouldn’t need to add this markup to your website elements.

Digging Deeper Into Schema Markup Categories

Within each schema type listed above, there’s a set of schema. For example, with the ‘Product’ content schema type, you can mark up the following items if you display them on your site:

You can go deeper into these properties, for example, with ‘Offers’ you can mark up:

There are more elements that can be marked up, but this will depend on your website and the types of information displayed.

What Do Rich Results Look Like In Practice?

So far there’s a lot to digest, so let’s take a look at some rich result examples. This will to allow you to visualise what the structured data does and how results look in SERPs.

1. Review and Breadcrumb

The below review and breadcrumb rich results example pulls in information such as star rating, numeric rating, votes and more, for a Wooden Picnic Bench from the Tesco website.

review and breadcrumb search results

2. Product – Price

The below product – price rich result example shows the product name i.e. Wooden 6 Seater Picnic Bench from eCommerce store, B&Q, alongside the price of the product, £19.00 displayed directly underneath the URL.

Product price search results

3. Product – Breadcrumb, Reviews, Price, Availability

By marking up more categories with schema markup, in this case, product, reviews, price, product availability and more, you get a lot more information similar to what you would expect to see on a product page. However, this is shown directly in the search results on Google.

Product price reviews and availability search results

With a product – breadcrumb, review, price and availability rich result, you can learn it’s a 5ft Wooden Picnic Bench from the Wooden Garden Furniture range at Tesco. You know it costs £115.00 and if you’re looking to purchase one, it’s in stock today.

You can also see that 125 people have reviewed the product which led to a 4.4-star rating. This information is all displayed without actually visiting the website itself.

4. Corporate and Social Profile Schema

A corporate and social profile rich result can pull up all of your company information from a source like Wikipedia or ideally, your ‘About Us’ page.

By marking up aspects like a logo, team images and your social media channels, these can be displayed in the results. This allows people to instantly learn about your company, in this case, straight from Google search results.

Corporate and social profile schema

The final rich result example is a sitelinks search box. This is great for news or information sites that have lots of content users must sort through. For example, the Eurogamer site contains game reviews, video game previews, industry news and forums to get involved with.

As a result of marking up your sitelinks search box, your visitors can search for something that’s on your site without clicking the URL and visiting it. Subsequently, this helps to reduce the steps it takes for users to find the answers they’re looking for, contributing to a better user experience.

Site links search box schema

How To Implement Schema Markup

Ask A Developer

If you’re not very familiar with coding or aren’t a very technical person, you can ask a developer to add the relevant markup for you. This way, you know that the code is being added to the correct place, in the correct way. It would also save you time trying to learn how to do this yourself.

As a result of providing the developer with a list of what you would like to mark up (from the above), it would help them carry out the task a lot quicker.

Do It Yourself

If you have some understanding of website coding and are familiar with making code changes, then you could add the markup code yourself. There are many schema markup tools out there that will generate the code for you, which you would then just need to add to your website code. A schema tool that could be used here, is Google’s Structured Data Markup Helper.

How To Use Google’s Structured Data Markup Helper

1. Firstly, select the data type. In this case, ‘Article’ was chosen for the blog post that the code will be created for.

2. Enter a URL and click the blue ‘Start Tagging’ button.

3. Next, highlight elements on the page you want to mark up in the image below you can see the title of the post has been highlighted and selected the element to be marked up with the name schema.

3.1. Another example below shows the image being marked up on the blog post.

Each element can be seen marked up along the right side of this screen, it’s updated live.

4. When you’ve finished marking up items on the page you need to click the red ‘CREATE HTML’ button towards the top right of the screen

5. The next screen shows you your code and tells you where it needs to be added on your website. There is also the option to switch to ‘microdata’ markup if you wish to use that type of markup code.

There are other tools that work slightly differently to Google’s tool such as Merkle SEO’s tool. With this tool, you complete certain fields and the the code is automatically created for you.

However, if you are used to coding, you can write the script yourself and easily upload it.

Testing Your Structured Data

Once the markup has been added, it is always a good idea to test your markup for any errors or warnings using Google’s Structured Data Testing Tool.

You can find more detailed information on the schema.org website too. However, there is a lot of information to take in on that website, so take your time going through the details.