Breadcrumb schema meta position attribute count up

Help
1

Hi all,

I am currently working on a website that requires to have a breadcrumb which uses Microdata schema BreadcrumbList - https://schema.org/BreadcrumbList.

Requirements

The BreadcrumbList requires an HTML meta element with the itemprop attribute set to position and an actual position of the list item in the BreadcrumbList, definded in the content attribute: <meta itemprop="position" content="1" />

This can also be seen in https://schema.org/BreadcrumbList#itemlist-1 (in the Microdata tab). Full example:

    <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>

My question

I managed to create a fully functional breadcrumb, however, the meta position is still missing and I have absolutely no idea how I can - gracefully - make Jekyll to automatically assign the <meta itemprop="position" content="X" />

I am thankful for ideas how to achieve this.

My current code

<nav
  aria-label="Breadcrumb"
  class="breadcrumb">
  {% assign crumbs = page.url | remove:'/index.html' | split: '/' %}
  <ol
    class="breadcrumb__list"
    itemscope 
    itemtype="http://schema.org/BreadcrumbList">
    <li
      class="breadcrumb__list-item"
      itemprop="itemListElement" 
      itemscope
      itemtype="http://schema.org/ListItem">
      <a
        class="breadcrumb__anchor"
        href="/"
        itemprop="item">
        <span 
          itemprop="name">
          Home</span></a>
      <meta itemprop="position" content="1">
    </li>
    {% for crumb in crumbs offset: 1 %}
    {% if forloop.last %}
    <li
      class="breadcrumb__list-item"
      itemprop="itemListElement" 
      itemscope
      itemtype="http://schema.org/ListItem">
      <a
        aria-current="page"
        class="breadcrumb__anchor breadcrumb__anchor--active"
        href="{{ page.permalink }}"
        itemprop="item"
        rel="bookmark"
        title="{{ page.title }}">
        <span 
          itemprop="name">
          {{ page.anchor-text }}
        </span>
      </a>
      {% else %}
      <li
        class="breadcrumb__list-item"
        itemprop="itemListElement" 
        itemscope
        itemtype="http://schema.org/ListItem">
        <a 
          class="breadcrumb__anchor"
          href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' | replace:'without-plugin/','without-plugins/' }}{% endfor %}" 
          itemprop="item">
          <span
            itemprop="name">
            {{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</span></a>
      </li>
      {% endif %}
      {% endfor %}
  </ol>
</nav>

Thank you for your ideas and help.

2

I’ve found a good solution, that I want to share. I’ve added

{% assign position = 2 %}

and then incremented it, adding

<meta itemprop="position" content="{% increment position %}">

Thanks anyway.

1 Like
3

Thank you, I had never heard of the itemprop global attribute before.