WebSchemas/BreadcrumbsDesign2

Design2: Using JSON-LD for breadcrumbs.

This is a design draft for better schema.org breadcrumbs - see WebSchemas/Breadcrumbs

It uses JSON-LD syntax, which has support for ordered lists (and a mapping of those into RDF collections)

Overview

This is potentially attractive because RDFa and Microdata have no common approach to representing lists/order. See also RDFa's inlist="" syntax.

Example:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "breadcrumb":
  {
    "@list": [
      {"name": "page 1", "url": "/page1"},
      {"name": "page 2", "url": "/page2"},
      {"name": "page 3", "url": "/page3"}
    ]
  }
}
</script>

Here is what http://json-ld.org/playground/ extracts in terms of triples:

_:b0 <http://schema.org/breadcrumb> _:b4 .
_:b0 <http://www.w3.org/1999/02/22-rdf-syntax-ns#type>
<http://schema.org/WebPage> .
_:b1 <http://schema.org/name> "page 1" .
_:b1 <http://schema.org/url> "/page1" .
_:b2 <http://schema.org/name> "page 2" .
_:b2 <http://schema.org/url> "/page2" .
_:b3 <http://schema.org/name> "page 3" .
_:b3 <http://schema.org/url> "/page3" .
_:b4 <http://www.w3.org/1999/02/22-rdf-syntax-ns#first> _:b1 .
_:b4 <http://www.w3.org/1999/02/22-rdf-syntax-ns#rest> _:b5 .
_:b5 <http://www.w3.org/1999/02/22-rdf-syntax-ns#first> _:b2 .
_:b5 <http://www.w3.org/1999/02/22-rdf-syntax-ns#rest> _:b6 .
_:b6 <http://www.w3.org/1999/02/22-rdf-syntax-ns#first> _:b3 .
_:b6 <http://www.w3.org/1999/02/22-rdf-syntax-ns#rest>
<http://www.w3.org/1999/02/22-rdf-syntax-ns#nil> .

Standard samples

BC1 as JSON-LD

<a href="http://www.example.com/dresses">Dresses</a> ›   
 <a href="http://www.example.com/dresses/real">Real Dresses</a> ›    
  <a href="http://www.example.com/dresses/real/green">Real Green Dresses</a>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "breadcrumb":
  {
    "@list": [
      {"name": "Dresses", "url": "http://www.example.com/dresses"},
      {"name": "Real Dresses", "url": "http://www.example.com/dresses/real"},
      {"name": "Real Green Dresses", "url": "http://www.example.com/dresses/real/green"}
    ]
  }
}
</script>

BC2 as JSON-LD

BC2: (from http://schema.org/WebPage https://schema.org/breadcrumb ):

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

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "breadcrumb":
  {
    "@list": [
      {"name": "Books", "url": "category/books.html"},
      {"name": "Literature & Fiction", "url": "category/books-literature.html"},
      {"name": "Classics", "url": "category/books-classics"}
    ]
  }
}
</script>

BC3 as JSON-LD

<div>
  <a href="http://www.example.com/books">
    <span>Books</span>
  </a> ›
  <div>
    <a href="http://www.example.com/books/authors">
      <span>Authors</span>
    </a> ›
    <div>
      <a href="http://www.example.com/books/authors/stephenking">
        <span>Stephen King</span>
      </a>
    </div>
  </div>
</div>

<div>
  <a href="http://www.example.com/books">
    <span>Books</span>
  </a> ›
  <div>
    <a href="http://www.example.com/fiction">
      <span>Fiction</span>
    </a> ›
    <div>
      <a href="http://www.example.com/books/fiction/horror">
        <span>Horror</span>
      </a>
    </div>
  </div>
</div>

<script type="application/ld+json">
[
{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "breadcrumb":
  {
    "@list": [
      {"name": "Books", "url": "http://www.example.com/books"},
      {"name": "Authors", "url": "http://www.example.com/books/authors"},
      {"name": "Stephen King", "url": "http://www.example.com/books/authors/stephenking"}
    ]
  }
}, 
{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "breadcrumb":
  {
    "@list": [
      {"name": "Books", "url": "http://www.example.com/books"},
      {"name": "Fiction", "url": "http://www.example.com/fiction"},
      {"name": "Horror", "url": "http://www.example.com/books/fiction/horror"}
    ]
  }
 }
]
</script>

here are the triples extracted via http://json-ld.org/playground/

_:b0 <http://schema.org/breadcrumb> _:b8 .
_:b0 <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <http://schema.org/WebPage> .

_:b1 <http://schema.org/name> "Books" .
_:b1 <http://schema.org/url> "http://www.example.com/books" .

_:b10 <http://www.w3.org/1999/02/22-rdf-syntax-ns#first> _:b3 .
_:b10 <http://www.w3.org/1999/02/22-rdf-syntax-ns#rest> <http://www.w3.org/1999/02/22-rdf-syntax-ns#nil> .

_:b11 <http://www.w3.org/1999/02/22-rdf-syntax-ns#first> _:b5 .
_:b11 <http://www.w3.org/1999/02/22-rdf-syntax-ns#rest> _:b12 .

_:b12 <http://www.w3.org/1999/02/22-rdf-syntax-ns#first> _:b6 .
_:b12 <http://www.w3.org/1999/02/22-rdf-syntax-ns#rest> _:b13 .

_:b13 <http://www.w3.org/1999/02/22-rdf-syntax-ns#first> _:b7 .
_:b13 <http://www.w3.org/1999/02/22-rdf-syntax-ns#rest> <http://www.w3.org/1999/02/22-rdf-syntax-ns#nil> .

_:b2 <http://schema.org/name> "Authors" .
_:b2 <http://schema.org/url> "http://www.example.com/books/authors" .

_:b3 <http://schema.org/name> "Stephen King" .
_:b3 <http://schema.org/url> "http://www.example.com/books/authors/stephenking" .

_:b4 <http://schema.org/breadcrumb> _:b11 .
_:b4 <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <http://schema.org/WebPage> .

_:b5 <http://schema.org/name> "Books" .
_:b5 <http://schema.org/url> "http://www.example.com/books" .

_:b6 <http://schema.org/name> "Fiction" .
_:b6 <http://schema.org/url> "http://www.example.com/fiction" .

_:b7 <http://schema.org/name> "Horror" .
_:b7 <http://schema.org/url> "http://www.example.com/books/fiction/horror" .

_:b8 <http://www.w3.org/1999/02/22-rdf-syntax-ns#first> _:b1 .
_:b8 <http://www.w3.org/1999/02/22-rdf-syntax-ns#rest> _:b9 .

_:b9 <http://www.w3.org/1999/02/22-rdf-syntax-ns#first> _:b2 .
_:b9 <http://www.w3.org/1999/02/22-rdf-syntax-ns#rest> _:b10 .