How to implement schema.org markup for a breadcrumb?

Question

There isn't much info about implementing a breadcrumb using schema.org markup. So far, I could get two official documents -- one showing this:

<div itemscope itemtype="http://schema.org/Property" itemid="http://schema.org/breadcrumb">
   <link itemprop="domain" href="http://schema.org/WebPage"/>
   <link itemprop="range" href="http://schema.org/Text"/>
</div>

And another showing this:

<body itemscope itemtype="http://schema.org/WebPage">
  <div itemprop="breadcrumb">
    <a href="category/books.html">Books</a> >
    <a href="category/books-literature.html">Literature & Fiction</a> >
    <a href="category/books-classics">Classics</a>
  </div>
</body>

The two markups are quite different. Do they make any sense to you? If they do, how do I enclose the following plain breadcrumb code with that markup -- the RIGHT WAY?

<body>
  <span id="breadcrumbs">
      <a rel="home" href="http://example.com">
          <span>Noob Archive</span>
      </a> » 
      <span>
          <a href="http://example.com/topic/html/">
              <span>HTML</span>
          </a> » 
          <strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
      </span>
  </span>
</body>

Thanks!

So. Looking at the answers below, I see disagreement on what the correct way is. I've personally implemented the version from the schmea.org documentation, but have seen others using the data-vocabulary version used as well. Is there no "correct" way in schema.org? — Brady Moritz, Feb 19 '13 at 19:25
@boomhauer the data-vocabulary version is the way to go _for now_. Last time I checked, none of the search engines seemed to have implemented the schema.org markup. Whatever your markup is, check with [Google's Structured Data Testing Tool](http://www.google.com/webmasters/tools/richsnippets) and [Bing Markup Validator](http://www.bing.com/toolbox/markup-validator) to see if it's going to work, and then implement it. — its_me, Feb 20 '13 at 02:34
I have a live example of the schema.org version working - search "fibur barrel" and notice the markup for the result listed at http://deadlywind.com . It did take a long time for the search engine to recognize it tho. — Brady Moritz, Feb 22 '13 at 06:05
@boomhauer While deadlywind.com seems to use schema.org markup, they don't use it for breadcrumbs, as I see it. They must be implementing it for a long, long time (years). — its_me, Feb 22 '13 at 12:46
It's implemented per the example from schema.org (and the same as the second example in your question) using itemprop="breadcrumb", tho there do seem to be some differences (adding itemprop=url on the indiv links...) — Brady Moritz, Feb 22 '13 at 15:03

thirdender · Answer 1 · 2015-11-10T01:21:09.070

schema.org finally released a new breadcrumb markup system in the schema.org v1.92 update (released 2014-12-11). The new breadcrumb system is an extension of ItemList called BreadcrumbList. Each BreadcrumbList contains multiple ListItem elements. This allows for multiple breadcrumb trails per page, separation of each individual link as a separate ListItem, and provides a wrapper around the entire breadcrumbs. This should satisfy pretty much every use case.

Here is the Microdata example from schema.org:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
› <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

Google's recently redesigned Structured Data Testing Tool parses this markup properly. However, the redesign of the tool dropped the search preview, so it's difficult to say how Google will display breadcrumbs with this markup in Google search results (or if Google will use this data at all). The linter.structured-data.org parses this new markup correctly as well, but as mentioned there, "This preview is only shown as a example of what a search engine might display. It is to the discretion of each search engine provider to decide whether your page will be displayed as an enhanced search result or not in their search results pages."

Google Webmaster Tools recently added the ability to track how well your structured data is being indexed. It doesn't show which structured data is being used in search results, but it does show what data is being indexed on which pages, and also shows any errors in your structured data.

Google's testing tool now properly parses the above example. — Frug, Nov 09 '15 at 03:36
Nice :-) Although they completely redesigned the Structured Data Testing Tool, and it no longer shows the search result preview. The new tool looks and works similar to the linter.structured-data.org tool. Answer has been updated to reflect this. — thirdender, Nov 10 '15 at 01:21

score 16 · Answer 2 · answered Apr 23 '12 at 14:41

The first document is the definition, so don't worry about that. It just says that breadcrumb is a text property of WebPages.

The example on http://schema.org/WebPage is the one you want to use and understand. It sets the breadcrumb snippet to a single text field saying "Books > Literature & Fiction > Classics".

You would do that like this:

<body itemscope itemtype="http://schema.org/WebPage">
  <span id="breadcrumbs" itemprop="breadcrumb">
      <a rel="home" href="http://example.com">
          <span>Noob Archive</span>
      </a> » 
      <span>
          <a href="http://example.com/topic/html/">
              <span>HTML</span>
          </a> » 
          <strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
      </span>
  </span>
</body>

The result would be "Noob Archive » HTML » Best Practices: Markup for Setting up Breadcrumbs on Web Pages".

You can use http://linter.structured-data.org/ to check how your item properties are parsed and http://diveintohtml5.ep.io/extensibility.html to find out more about the parse rules.

rel="home" is not defined by schema.org. For a better example take a loot at [W3C wiki](http://www.w3.org/wiki/WebSchemas/Breadcrumbs) — dafyk, Oct 22 '13 at 16:17
The above code doesn't display breadcrumbs in http://www.google.com/webmasters/tools/richsnippets — zonzon, Apr 03 '14 at 09:06

Rowe Morehouse · Answer 3 · 2012-10-15T17:51:06.580

11

The answer by @somori is incorrect -- but that is because the documentation on correctly marking up breadcrumbs with microdata / schema.org is widely incorrect.

EACH breadcrumb needs to be declared with an itemprop property, you can't just wrap them with itemprop="breadcrumb" in the containing div or span and use itemprop="child" in the nested divs.

More info here:

http://lists.w3.org/Archives/Public/public-vocabs/2012Jan/0016.html

Do it like this, to get your breadcrumbs to show up in SERPs:

<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

  <span class="breadcrumb-lead">YOU ARE HERE:</span><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Homepage</span></a>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category One</span></a></div>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category Two</span></a></div>

</div>

Then test in google structured data testing tool:

http://www.google.com/webmasters/tools/richsnippets

edited Oct 15 '12 at 17:51

answered Oct 15 '12 at 15:38

Rowe Morehouse

4,451
3
28
28

5

He asked about schema.org not data-vocabulary. You are right in a sense, but also wrong. – Xarcell Jan 21 '13 at 19:13
2

data-vocabulary is the outdated predecessor to schema.org – Brady Moritz Feb 19 '13 at 20:02
@boomhauer data-vocabulary is not _exactly_ outdated yet. – its_me Feb 20 '13 at 02:36
it still works, but go to data-vocabulary.com and it's pretty clear that schema.org is the replacement for it. So, for new work I would assume one should use the latest. – Brady Moritz Feb 22 '13 at 06:02
1

Answer is incorrect, [google parser](http://www.google.com/webmasters/tools/richsnippets) says that `itemprop="title"` is: `Error: Page contains property "title" which is not part of the schema.` – s3m3n Jul 17 '13 at 13:18
What about not linking to the current page? Assuming that *Category Two* is the current page, shouldn't that not be a link? – ElHaix Oct 10 '13 at 20:24
This can't be correct. Google says `Breadcrumb is not a valid target type for the Breadcrumb/child property.` – volume one Feb 14 '15 at 20:36

score 7 · Answer 4 · answered Sep 07 '14 at 01:19

According to Google Webmaster Central Help Forum, it is not recommended by experts to use the schema.org breadcrumb markup for the time being,it's seems that "there is some sort of glitch in the schema.org breadcrumb structure". Instead, it is exhorted to use the data-vocabulary.org breadcrumb markup, which Google and the other search engines can easily read as well.

A data-vocabulary.org Breadcrumb markup example:

<div>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/" itemprop="url">
      <span itemprop="title">example</span>
    </a> >
  </span>  
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/" itemprop="url">
      <span itemprop="title">Fashion</span>
    </a> >
  </span>  
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/women/" itemprop="url">
      <span itemprop="title">Women</span>
    </a> >
  </span>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/women/boots/" itemprop="url">
      <span itemprop="title">Boots</span>
    </a>
  </span>
</div>

this is correct answer! Schema.org markup doesn't generate visual rich sippets, at least through testing tool — Evgeniy, Oct 31 '14 at 22:58
data-vocabulary.org is abandoned. Schema.org is the standard. — Claudiu, Jun 08 '17 at 21:27

score 4 · Answer 5 · edited Jan 13 '13 at 16:19

4

   itemscope itemtype="...">

Is invalid in an xhtml page.

The correct syntax is:

   itemscope="itemscope" itemtype="...">

edited Jan 13 '13 at 16:19

Jonatan

2,734
2
22
33

answered Jan 13 '13 at 15:32

Philippe

41
2

score 2 · Answer 6 · answered Apr 08 '16 at 14:29

This validates now in Google's Structured Data Testing Tool

<nav role="navigation" class="breadcrumb" itemscope itemtype="http://schema.org/Breadcrumb">
    <ol itemscope itemtype="http://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
        <meta itemprop="position" content="1" />
      </li>
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/about-us"><span itemprop="name">About Us</span></a>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
</nav>

score 0 · Answer 7 · answered Dec 12 '19 at 07:18

Having breadcrumb schema in place can have a massive impact on your site page’s Click Through Rate (CTR) from search.

Below are the examples How you can Implement Breadcrumb List Schema on your page

1. Via HTML

<ul itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://organicdigital.co/"><span itemprop="name">Home</span></a>
        <meta itemprop="position" content="1" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://organicdigital.co/services/"><span itemprop="name">Services</span></a>
        <meta itemprop="position" content="2" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://organicdigital.co/services/structured-data.php"><span
                itemprop="name">Structured Data</span></a>
        <meta itemprop="position" content="3" />
    </li>
</ul>

2. Via JSON-LD

You can also check, implemented schema is error free and correct on google structured-data test tool.

Eg : https://search.google.com/structured-data/testing-tool?utm_campaign=devsite&utm_medium=jsonld&utm_source=breadcrumb

<html>
<head>
<title>The title of the page</title>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "Ancillary Justice",
    "item": "https://example.com/books/authors/ancillaryjustice"
  }]
}
</script>
</head>
<body>
</body>
</html>

Kristian Vazquez · Answer 8 · 2015-10-14T18:44:25.143

@IssaBERTHE's answer is correct. meh, need more rep to comment, For anyone using wordpress check out this plugin. You can tailor it to fit your needs and follow google standard. It has the positioning built in.

    Can Download here -> breadcrumb-trail plugin

It does need a little correcting. The file we need to edit is breadcrumb-trail-master\inc\breadcrumbs.php

You do need to edit line 213:

$breadcrumb = sprintf('<%1$s role="navigation" aria-label="%2$s" class="breadcrumb-trail breadcrumbs" itemprop="breadcrumb">%3$s%4$s%5$s</%1$s>',

We're removing the itemprop, so it should look like:

 $breadcrumb = sprintf('<%1$s role="navigation" aria-label="%2$s" class="breadcrumb-trail breadcrumbs">%3$s%4$s%5$s</%1$s>',

Now scroll up and edit line 172:

 $breadcrumb .= '<ul class="trail-items" itemscope itemtype="http://schema.org/BreadcrumbList">';

Add the itemprop here instead:

 $breadcrumb .= '<ul class="trail-items" itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">';

The author thought you had to break them up I guess. Now when checking, it should register correctly.

Promo · Answer 9 · 2014-04-30T12:12:17.147

-4

schema.org gives the following example :

<div itemprop="breadcrumb">
  <a href="category/books.html">Books</a> >
  <a href="category/books-literature.html">Literature & Fiction</a> >
  <a href="category/books-classics">Classics</a>
</div>

Source : http://schema.org/WebPage (example section, microformat tab)

Other resource : http://www.w3.org/wiki/WebSchemas/Breadcrumbs

edited Apr 30 '14 at 12:12

answered Apr 30 '14 at 12:00

Promo

707
9
26

How to implement schema.org markup for a breadcrumb?

9 Answers9

Linked