Forum

Thread tagged as: Question

Breadcrumb using Schema

Hi,

I've implemented the breadcrumb using the schema tags listed here: https://schema.org/BreadcrumbList

The only thing I can't work out to do is the increasing count of each item in the crumb trail:

<meta itemprop="position" content="1" />

How do I increase the number each time eg. content="1", content="2" etc

Full code here:

<perch:before>
<ol itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumbs">
    <li><a href="/">Home</a> <span class="trail">&gt;</span></li>
</perch:before>
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
        <perch:if exists="perch_item_last">
            <perch:pages id="pageNavText" />
        <perch:else />
            <a itemprop="item" href="<perch:pages id="pagePath" />"><span itemprop="name"><perch:pages id="pageNavText" /></span></a> <span class="trail">&gt;</span>
        </perch:if>
        <meta itemprop="position" content="1" /><!-- This number should increase for each item -->
    </li>
<perch:after>
</ol>
</perch:after>
Mark Watts

Mark Watts 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Would perch_item_index work here?

I tried that but nothing is outputted:

<meta itemprop="position" content="<perch:content id="perch_item_index" />" />
<!-- This number should increase for each item -->
Drew McLellan

Drew McLellan 2638 points
Perch Support

You're not in the Content app, so a perch:content tag won't have any value. Try:

<meta itemprop="position" content="<perch:pages id="perch_item_index" />" />

Perfect that did the trick! Thanks :o) Can't see for looking sometimes. Almost there… So now it outputs:

<ol itemscope="" itemtype="https://schema.org/BreadcrumbList" class="breadcrumbs">
    <li><a href="/">Home</a> <span class="trail">></span></li>

  <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="/section/"><span itemprop="name">Section</span></a> <span class="trail">></span>
        <meta itemprop="position" content="1">
    </li>
  <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">Current page
        <meta itemprop="position" content="2">
    </li>
</ol>

But the Home link is outside of the count as it's within a perch:before tag, anyway to take it out of the before tag and then it would output content="1","2", "3"

<perch:before>
<ol itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumbs">
    <li><a href="/">Home</a> <span class="trail">></span></li>
</perch:before>
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
        <perch:if exists="perch_item_last">
            <perch:pages id="pageNavText" />
        <perch:else />
            <a itemprop="item" href="<perch:pages id="pagePath" />"><span itemprop="name"><perch:pages id="pageNavText" /></span></a> <span class="trail">></span>
        </perch:if>
        <meta itemprop="position" content="<perch:pages id="perch_item_index" />" />
    </li>
<perch:after>
</ol>
</perch:after>
Drew McLellan

Drew McLellan 2638 points
Perch Support

I don't see anything in the spec that indicates that the numbers have to be consecutive, just that that should be integers, start at 1 and that they're used to reconstruct order. Therefore, I'd do this for the home page:

<meta itemprop="position" content="1" />

and this for the others:

<meta itemprop="position" content="<perch:pages id="perch_item_index" />0" />

You'll then get a sequence of 1, 10, 20, 30, 40 and so on.

OK brilliant thanks for your help, all working now. Here's the final code:

<perch:before>
<ol itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumbs">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="/"><span itemprop="name">Home</span></a> <span class="trail">></span>
        <meta itemprop="position" content="1" />
    </li>   
</perch:before>
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
        <perch:if exists="perch_item_last">
            <perch:pages id="pageNavText" />
        <perch:else />
            <a itemprop="item" href="<perch:pages id="pagePath" />"><span itemprop="name"><perch:pages id="pageNavText" /></span></a> <span class="trail">></span>
        </perch:if>
        <meta itemprop="position" content="<perch:pages id="perch_item_index" />0" />
    </li>
<perch:after>
</ol>
</perch:after>