WebSchemas/Breadcrumbs

From W3C Wiki
Jump to: navigation, search


This is a WebSchemas proposal Breadcrumbs proposal for schema.org. See Proposals listing for more. Status: Proposal



Overview

This pages describes schema.org proposal for changing breadcrumbs handling in schema.

Vocabulary changes

1. Create Thing->CreativeWork->WebPageElement->Breadcrumb type:

Property Type Description
text Text Inherited from CreativeWork, serves as breadcrumb title
url URL Inherited from Thing, serves as breadcrumb URL
child BreadCrumb Next Breadcrumb(s) in the chain








2. Change WebPage breadcrumb property type to Breadcrumb.

Current problems

Current breadcrumb property of WebPage type has some problems:

1) Current breadcrumb property of WebPage type is based on incorrect examples:

  1. <div itemscope itemtype="http://schema.org/WebPage">
  2.     <div itemprop="breadcrumb">
  3.       <a href="category/books.html">Books</a> >
  4.       <a href="category/books-literature.html">Literature and Fiction</a> >
  5.       <a href="category/books-classics">Classics</a>
  6.     </div>
  7. </div>

Only "Books > Literature & Fiction > Classics" (plain text without any markup) will be recognized. See Google Tool for example.

2) A breadcrumb is a complex object, which has title and URL properties at least (both optional), which values can be unequal.

3) Current breadcrumbs cannot be stored in an unordered storage like JSON:

{
  "breadcrumb":[
    "category/books.html",
    "category/books-literature.html",
    "category/books-classics.html"
  ]
}

If the storage cannot save the initial order, the chain will break.

4) There can be more than one breadcrumb chain on the page. Current text property doesn't allow distinguishing different chains, because all values are stored in a heap. There are only magic ways to resolve different chains in following breadcrumbs values list:

{
  "breadcrumb":[
    "category/books/",
    "category/books/literature/",
    "category/books/literature/classics/",
    "category/bicycles",
    "category/bicycles/three-wheeled"
  ]
}

Resolving problems

All the problems can be resolved by making a new type. At schema.org meeting we decided that name Breadcrumb is more suitable for our purposes than general HierarchyElement. So, we need to make Breadcrumb type with single child property. A final example will look like so:

  1. <div itemscope itemtype="http://schema.org/WebPage">
  2.   <!--First chain-->
  3.   <div itemprop="breadcrumb" itemscope itemtype="http://schema.org/Breadcrumb">
  4.     <a itemprop="url" href="/category/books">
  5.       <span itemprop="name">Books</span>
  6.     </a>
  7.     <!--Second level of the first chain-->
  8.     <span itemprop="child" itemscope itemtype="http://schema.org/Breadcrumb">
  9.       <a itemprop="url" href="/category/books/classics">
  10.         <span itemprop="name">Boring classics</span>
  11.       </a>
  12.     </span>
  13.   </div>
  14.     <!--Second chain-->
  15.   <div itemprop="breadcrumb" itemscope itemtype="http://schema.org/Breadcrumb">
  16.     <a itemprop="url" href="/category/bicycles">
  17.       <span itemprop="name">Bicycles</span>
  18.     </a>
  19.     <!--Second level of the second chain-->
  20.     <span itemprop="child" itemscope itemtype="http://schema.org/Breadcrumb">
  21.       <!--Last element is not a hyperlink in html-->
  22.       <!--but it has a hyperlink in microdata markup-->
  23.       <span itemprop="name">For kids</span>
  24.       <link itemprop="url" href="/category/bicycles/three-wheeled"/>      
  25.     </span>
  26.   </div>
  27. </div>

Since each breadcrumb chain node is a separate object, it’s getting easy to distinguish several chains and store attributes together. The JSON or XML representation of breadcrumbs doesn’t contain any strings at the same nesting level, that's why there will be no problem with unordered storages:

{
  "breadcrumb":[
    {
      "name":"Books", 
      "URL":"/category/books",
      "child":{
        "name":"Boring classics"
        "URL":"/category/books/classics"
      }
    },
    {
      "name":"Bicycles", 
      "URL":"/category/bicycles",
      "child":{
        "name":"For kids"
        "URL":"/category/bicycles/three-wheeled"
      }
    }
  ]
}

See also: the earlier data-vocabulary.org design was similar to this: data-vocabulary Breadcrumb type.

Use cases

A search engine can represent breadcrumb chain from the page, so the user can follow not only to the target document, but to the upper level category too. See how it's made in Yandex english version for example.

How to Join the Discussion

Reply the original post on the Mailing list (public-vocabs@w3.org)

Related

The issue created by Dan and some discussions are here: http://www.w3.org/2011/webschema/track/issues/10