Cookies disclaimer

I agree Our site saves small pieces of text information (cookies) on your device in order to deliver better content and for statistical purposes. You can disable the usage of cookies by changing the settings of your browser. By browsing our website without changing the browser settings you grant us permission to store that information on your device.

Breadcrumbs

Structured Data - Breadcrumbs

Contents

Structured Data - Breadcrumbs

This article looks specifically at breadcrumbs and how using microdata to mark-up events on a website, for broader information on Schema.org mark-up code please follow the link. For extensive and definitive information on Schema please follow this link.

Please follow the links below to see examples and explanations of how to implement Schema.org code for:

Breadcrumb Navigation

Breadcrumb navigation is a navigational path that illustrates to site visitors where they are within the website's hierarchical structure.

Using structured data to mark-up breadcrumb navigation enhances the way pages appear within the Search Engine Result Pages (SERPs) which can positively affect (Click Through Rates) CTRs and thus rankings.

Additionally microdata can assist in advising Google on a site’s structure making it easier for them to determine hierarchy and content grouping. The example below shows how the SERPs can display microdata on breadcrumbs:

Google are actually able to present URL’s like this without mark-up data now, if they are able to determine your website’s hierarchy. Breadcrumbs and the mark-up code applied to them, still help to define this structural relationship between your content and structure.

Mark-up Guidelines using Microdata

Google has provided guidelines for using microdata or RDFA markup to enable easier indexing of a website’s breadcrumbs by its crawlers. It is recommended that all breadcrumbs include microdata mark-up to enable enhanced SERP snippets with breadcrumb links.

Breadcrumb Properties

We have defined the properties that can be used in the breadcrumb mark-up code here and we show you how to use these afterwards:


Property

Description

Title

The title of a breadcrumb

URL

The URL of a breadcrumb

Child

The next breadcrumb in the hierarchy. The child must be another Breadcrumb item

Itemscope

Indicates that the contents are an item

Itemtype

Defines the type of item contained within an ‘itemscope’

Itemprop

Defines a property of the item, e.g. ‘URL’ or ‘Title’

Example Breadcrumb Code

The code below would create a breadcrumb navigation trail on a page:

You are here: <a href="http://example.com/">Home</a> &gt;
<a href="http://example.com/category/">Category</a> &gt;
<a href="http://example.com/category/page/">Example Title</a>

In order to mark this data up we first need to wrap our breadcrumbs with a DIV, this explains to the robots crawling the site that this DIV contains a breadcrumb.
For example: add <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" id="breadcrumbs">

The second step is defining the items in that DIV. We define all of the URLs as URLs, we define the first page in the trail as the Title, and we define the rest of the pages in the trail as Children in the path. This is what the end result would look like:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/widgets">
    <span itemprop="name">Widgets</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/widgets/red">
    <span itemprop="name">Red Widgets</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

In the above example we can see that we are defining the ‘Title’, the ‘URL’ and the ‘Child’ elements of the breadcrumb in-line with what robots can read and understand.

Schema.org Breadcrumbs

The major search engines such as Google, Bing and Yahoo have agreed upon a collection of schemas that help structure and identify elements within a website. Schema.org was established to document the standards which can define the structure of a webpage, including using microdata to structure breadcrumbs.

Raptor Tools!

Our range of SEO Tools include checking for and making specific implementation instructions for Schema.org on your site. Use Raptor to find out where you have used mark-up code, if its implemented correctly and where it is missing.

Sign Up For Early Access
& Earn a Chance to Win 1 Years Free Subscription!

What You Get...

There's no obligation to become a full member after your trial, but we think that once you've seen what's available, you'll want to join us.

We are in the process of building our software and are ramping up to launch the Technical Auditing component in early 2018, soon to be followed by a suite of other components such as keyword ranking and backlink analysis.

Sign up today for 1 months free access and get a further 10% off of any package price when we launch for the first year as a reward for being an early subscriber.

Also, you will be entered into a lottery, where we will be giving away five 1-year subscriptions for free!

Sign up for early access today!