Structured Data for Breadcrumbs

In this video I’ll show you how you can create Structured Data for Breadcrumbs that produce a Rich Snippet (in this case breadcrumbs) in search results that are clickable, too!

Links from the Video:

Transcript:

In this video I want to demonstrate how to build breadcrumbs on search results. This allows a user to A) recognize the category of a page and B) to directly click that category.

music playing

Hi and welcome back! Nice to have you in the seventh lesson of module 3 of my structured data training. I am Florian the developer of 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 breadcrumbs are 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’ve 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 breadcrumbs.

But now: let’s jump right in!

A breadcrumb trail on a page indicates the pages position in the site hierarchy. A user can navigate all the way up in this site hierarchy one level at a time by starting from the last breadcrumb in the breadcrumb trail.

Read the references

Googles Reference

As always we open up Google’s reference to see what properties we need. Breadcrumbs are quite easy to understand because there is only one property we need. Therefore there isn’t really a lot to read and there is nothing special to consider. Google uses structured data from schema.org. In this case we need two schemas: the BreadcrumbList and the ListItem. The latter ones are needed for the individual breadcrumbs while the first one let’s search engines know that the schema is a list of multiple items. On that pages you can find all properties that are possible. However as you could see on Google’s reference page you don’t need every single property listed there. You only need to require ones to get breadcrumbs in search results.

schema.org

On schema.org BreadcrumbList is a child of ItemList which is a child of Intangible 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 full detail how schema.org is structured.

If you watched some of the previous videos you maybe remember that we have used the ItemList or the HowToStep schema already. They are also used on other schemas like Recipes mostly for the properties. When you click on either BreadcrumbList or ListItem the browser will bring you to that specific page of that schema. You can then find all the properties that are possible. However you don’t need every single one to get breadcrumbs in search results as I said before. In this particular schema we only need one. But we need it multiple times. That is the itemListElement property. You will see that in more detail in the example that I will create together with you in a bit.

Create a Global Snippet

Before that here’s a quick note: 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 have to 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 could stuck at some point. Especially when it comes to Global Snippets and the brand-new looping functionality that allows you to automate breadcrumb generation.

Let’s begin!

Because we want to use the BreadcrumbList on multiple posts we set up a Global Snippet. If you want to learn more about Global Snippets please jump back to module 2 of my structured data training where I explain in every detail what Global Snippets are and how they work altogether.

As you can see SNIP comes shipped with some predefined snippets that maybe fit your needs already. If you don’t see these snippets please go to the settings page of the plugin here and just hit the “Go for it!” button.

Because there is a breadcrumb for post snippets already I will explain everything with this snippet. So let’s open it up.

And as wee can see: we only have multiple itemListElements and when we check the reference we see that we need as many itemListElement properties as we have breadcrumbs. A single breadcrumb is a ListItem which needs three properties: item, name and position.

Now let’s say we work with WordPress categories a lot. I have prepared a post about a motorbike that should explain what I mean. If I open up the post you can see that this post can be found under “Heritage” which is located under “BMW” which is located under “Motorbikes”. Let’s say we want our categories showing up in search results. So we need all these categories in our breadcrump. What we need here is an automation that allows us to automatically fetch these categories to create multiple elements for us so that we don’t need to add them ourselves. This wouldn’t be very economical either because the category hierarchy is different for every post. So this is exactly what the looping functionality does.

Use the Looping-Functionality in SNIP

We create one property – which in this case is the itemListElement – and define the sub schema which in this case is the ListItem. Now we define that the plugin should loop through whatever we define here. In my case I’ve defined that SNIP should loop through the categories. So what it does is: it gets all three categories from the database and creates a ListItem for every category and fills the properties of the sub schema with the current values.

Basically the loop runs three times and fills the values here with the new values from the database. Now all we have to do is to select how the loop should fill the values. I have chosen to use the term title for the name and the term URL for the item property.

Because Google wants us to sort by a number we also need the position property. Because we don’t know how many categories we have, because the category hierarchy can vary in depth, we can just choose “sequential number” for the field type here. This basically starts with the number of one and counts up with every loop.

So the first ItemListElement property here is a loop which creates all the categories for us. In our case that would be three categories.

What we now want is to add the post title itself to the end of the breadcrumb trail, too. So that our breadcrumb trail looks like this. So what we have to do now is to add another ListItem to add this single post item as well. And this is what I did here. Another itemListElement which is a ListItem. And what I did here I just entered the post title for the name, the post URL for the item and the sequential number for this as well.

So what happens here is the sequential number counts up one, two, three for the three categories and 4 for the last item in the breadcrumb trail which is the post title.

Validate the Snippet

Now we should check the output of the plugin using Googles Structured Data Test Tool to verify that everything is okay. For this I open up the test tool in a new browser window.

As always you should and the URL to a specific post here. I need to enter the output of the plugin manually because I am on a local development site where this tool has no access to. So I run the test.

Now we see all the ItemLists there. Note that the items may have a different order in the source code. However that doesn’t matter because we have used the position parameter that tells the search engines what the right order is. You can see them here and here and here. So as you can see the first one would be “Motorbikes”, the second one “BMW”, the third one “Heritage” and the fourth one our post. Or the post title with the post URL. Unfortunately this time there is no preview button. We have to wait until search engines have crawled our site with the new snippet again so that we can see this in action.

The loop

Back to our Global Snippet again. Of course if you don’t work with categories a lot you can always use a different loop. If you use tags for example you can also use tags. And currently the plugin can also loop through the main query and through a menu if it exists. Okay. That’s it pretty much.

Conclusion

Alright. Let’s sum everything up what we have learned in this video.

At the time of the making of this video the BreadcrumbList snippet shows a breadcrumb trail right under the title in search results. Each single breadcrumb is clickable.
All breadcrumb items are marked up as ListItems.
To find the right properties we used Google’s reference pages and schema.org as always.
We automated bread crumb generation by using the Global Snippet and Loop functionality in SNIP my Rich Snippets and Structured Data plugin.

That’s it for now! If you are interested in other Rich Snippets and how they are built please consider watching another video created by me. Hopefully I can see you in another video very soon. Bye bye!