Add structured data: Microdata, RDFa, microformat or JSON-LD

[ArmorDarks]

For instance, current Breadcrumb component works great, but it isn't recognized by any search engines.

To fix that, we need to use microdata or JSON-LD, or RDFa (so it might be related to https://github.com/LotusTM/Kotsu/issues/84)

Though, both will work, I'm yet unsure about best approach.

Example of JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://example.com/books",
      "name": "Books",
      "image": "http://example.com/images/icon-book.png"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://example.com/books/authors",
      "name": "Authors",
      "image": "http://example.com/images/icon-author.png"
    }
  },{
    "@type": "ListItem",
    "position": 3,
    "item": {
      "@id": "https://example.com/books/authors/annleckie",
      "name": "Ann Leckie",
      "image": "http://example.com/images/author-leckie-ann.png"
    }
  },{
    "@type": "ListItem",
    "position": 4,
    "item": {
      "@id": "https://example.com/books/authors/ancillaryjustice",
      "name": "Ancillary Justice",
      "image": "http://example.com/images/cover-ancillary-justice.png"
    }
  }]
}
</script>

Microdata allows to keep data with relevant html-code, but it will result in additional attributes:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing"
       itemprop="item" href="https://example.com/books">
        <span itemprop="name">Books</span>
        <img itemprop="image" src="http://example.com/images/icon-bookicon.png" alt="Books"/></a>
    <meta itemprop="position" content="1" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing"
       itemprop="item" href="https://example.com/books/sciencefiction">
      <span itemprop="name">Science Fiction</span>
      <img itemprop="image" src="http://example.com/images/icon-science-fiction.png" alt="Genre: Science Fiction"/></a>
    <meta itemprop="position" content="2" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing"
       itemprop="item" href="https://example.com/books/sciencefiction/ancillaryjustice">
      <span itemprop="name">Ancillary Justice</span>
      <img itemprop="image" src="http://example.com/images/cover-ancillary-justice.png" alt="Ancillary Justice"/></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

There is no big difference for us — it will generate approximately similar amount of code. However, working with microdata might be slightly easier, because breadcrumb already generated and we can simply embed that data inside already existing component. However, will mix of JSON-LD (we will need one anyway for whole site) work well with microdata?..