Re: ItemList proposal

On Tue, Sep 16, 2014 at 5:08 PM, Dan Brickley <danbri@google.com> wrote:

> On 16 September 2014 21:50, Jarno van Driel <jarnovandriel@gmail.com>
> wrote:
> > Not much really, it's a custom I picked up because the W3 Validator
> > (http://validator.w3.org/) kept complaining about not providing a
> @title for
> > anchors, which it stopped complaining about if one added an empty
> @title. So
> > I became accustomed to alway specifying a @title, even it it's empty.
> >
> > To be honest I don't even know if the workaround is still needed or not,
> I
> > haven't looked into it for ages.  :)
> >
> > I'll remove it from the document though.
>
> Ah thanks, I thought it might be some wiki markup / escaping artifact.
>
> It's a big document. Maybe we could settle on one single core example
> that applies new Itemlist to the breadcrumbs usecase?
>
> A lot of people are interested in knowing how
> https://support.google.com/webmasters/answer/185417?hl=en should look.
>
> Here's the old markup:
>
> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
>   <a href="http://www.example.com/dresses" itemprop="url">
>     <span itemprop="title">Dresses</span>
>   </a> ›
> </div>
> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
>   <a href="http://www.example.com/dresses/real" itemprop="url">
>     <span itemprop="title">Real Dresses</span>
>   </a> ›
> </div>
> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
>   <a href="http://www.example.com/clothes/dresses/real/green"
> itemprop="url">
>     <span itemprop="title">Real Green Dresses</span>
>   </a>
> </div>
>
> How concisely can we do this with new ItemList? Does this look
> monsterously verbose, or bearable?
>
> <ol itemscope="" itemtype="http://schema.org/ItemList">
>   <li itemprop="itemListElement" itemscope=""
> itemtype="http://schema.org/ListItem">
>     <span itemprop="item" itemscope="" itemtype="http://schema.org/WebPage
> ">
>       <a href="http://www.example.com/dresses" itemprop="url">
>         <span itemprop="title">Dresses</span>
>       </a>
>     </span>
>   </li>
> ›  <li itemprop="itemListElement" itemscope=""
> itemtype="http://schema.org/ListItem">
>     <span itemprop="item" itemscope="" itemtype="http://schema.org/WebPage
> ">
>       <a href="http://www.example.com/dresses/real" itemprop="url">
>         <span itemprop="title">Real Dresses</span>
>       </a>
>     </span>
>   </li>
> ›  <li itemprop="itemListElement" itemscope=""
> itemtype="http://schema.org/ListItem">
>     <span itemprop="item" itemscope="" itemtype="http://schema.org/WebPage
> ">
>       <a href="http://www.example.com/clothes/dresses/real/green"
> itemprop="url">
>         <span itemprop="title">Real Green Dresses</span>
>       </a>
>     </span>
>   </li>
> </ol>
>

This example can be simplified by removing one level of nesting, as shown
in this example in RDFa, which I tested in Play <http://rdfa.info/play/>:

<ol vocab="http://schema.org/" typeof="ItemList">
  <li property="itemListElement" typeof="ListItem">
      <a property="item" typeof="WebPage" href="
http://www.example.com/dresses">
        <span property="title">Dresses</span>
      </a>
      <meta property="position" content="1">
  </li>
›  <li property="itemListElement" typeof="ListItem">
      <a property="item" typeof="WebPage" href="
http://www.example.com/dresses/real">
        <span property="title">Real Dresses</span>
      </a>
      <meta property="position" content="2">
  </li>
</ol>

The trick is to avoid relying on an explicit value for 'url', and instead
use the href value as the URI as the Webpage. This is in fact much more in
line with Linked Data best practices and it avoids blank nodes. A pet peeve
of mine is that Schema.org relies too heavily on an explicit 'url' property
in its examples. If the 'url' property is not provided, consumers such as
Google should simply use the resource URI provided in @itemid (microdata),
@href/@resource (RDFa) or @id in JSON-LD.

Equivalent JSON-LD:
    {
      "@id": "_:g70204145541180",
      "@type": "ItemList",
      "itemListElement": [
        "_:g70204145492480",
        "_:g70204145237140"
      ]
    },
    {
      "@id": "_:g70204145492480",
      "@type": "ListItem",
      "item": "http://www.example.com/dresses",
      "position": "1"
    },
    {
      "@id": "_:g70204145237140",
      "@type": "ListItem",
      "item": "http://www.example.com/dresses/real",
      "position": "2"
    },
    {
      "@id": "http://www.example.com/dresses",
      "@type": "WebPage",
      "title": "Dresses"
    },
    {
      "@id": "http://www.example.com/dresses/real",
      "@type": "WebPage",
      "title": "Real Dresses"
    }


-- 
Steph.