Squiz Matrix – How to create breadcrumbs with Microdata schema

The following code shows how to create breadcrumb navigation with Microdata schema in Squiz Matrix.

For example, a page of

example.com/level-1/level-2/page

Would generate

Home > Level 1 > Level 2 > Page

<!-- Breadcrumbs -->
<div id="breadcrumbs">
    <ul itemscope="" itemtype="http://schema.org/BreadcrumbList">
        <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
            <a href="//%asset_url^explode:/^index:2%" itemscope="" itemtype="http://schema.org/Thing" itemprop="item" itemid="//%asset_url^explode:/^index:2%">
                <span itemprop="name">Home</span>
            </a>
            <meta itemprop="position" content="1">
        </li>
        <MySource_AREA id_name="page_lineage" design_area="asset_lineage">
            <MySource_SET name="levels_to_print" value="0" />
            <MySource_SET name="prefix_with_home_link" value="false" />
            <MySource_SET name="suffix_with_current_link" value="false" />
            <MySource_SET name="prefix_with_divider" value="false" />
            <MySource_SET name="suffix_with_divider" value="false" />
            <MySource_SET name="unwanted_asset_types" value="user folder" />
            <MySource_SET name="reverse_lineage" value="false" />
            <MySource_ASSET>
                <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                    <a href="<MySource_PRINT var='asset_link' />" itemscope="" itemtype="http://schema.org/Thing" itemprop="item" itemid="<MySource_PRINT var='asset_link' />">
                        <span itemprop="name"><MySource_PRINT var='asset_short_name' /></span>
                    </a>
                    <meta itemprop="position" content="<MySource_PRINT var='asset_url_path^explode:/^count' />">
                </li>
            </MySource_ASSET>
        </MySource_AREA>

        <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
            <span itemscope="" itemtype="http://schema.org/Thing" itemprop="item" itemid="<MySource_PRINT var='asset_link' />" >
            <span itemprop="name">
                <MySource_PRINT var="asset_short_name" />
            </span>
            </span>
            <meta itemprop="position" content="<MySource_PRINT var='asset_url_path^explode:/^count' />">
        </li>
    </ul>
</div>
<!-- End breadcrumbs -->

This outputs valid the Microdata:

<div id="breadcrumbs">
<ul itemscope="" itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="//example.com" itemscope="" itemtype="http://schema.org/Thing" itemprop="item" itemid="//example.com">
<span itemprop="name">Home</span>
</a>
<meta itemprop="position" content="1">
</li>
         <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
         <a href="https://example.com/level-1" itemscope="" itemtype="http://schema.org/Thing" itemprop="item" itemid="https://example.com/level-1">
         <span itemprop="name">Level 1</span>
         </a>
         <meta itemprop="position" content="2">
         </li>
                  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
         <a href="https://example.com/level-1/level-2/" itemscope="" itemtype="http://schema.org/Thing" itemprop="item" itemid="https://example.com/level-1/level-2/">
         <span itemprop="name">Level 2</span>
         </a>
         <meta itemprop="position" content="3">
         </li>
           
     <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
     <span itemscope="" itemtype="http://schema.org/Thing" itemprop="item" itemid="page">
     <span itemprop="name">Page</span>
     </span>
     <meta itemprop="position" content="4">
     </li>
            </ul>
</div>

How does this work?

This is a fairly simple process – however a couple of tricks are needed to get the position metadata.

How is position being determined?

Let’s take a look at the tag

<MySource_PRINT var='asset_url_path^explode:/^count' />

At first this is a standard tag – outputting the asset url – for example /level-1/level-2/page

Using this output we can determine the position by counting the forward slashes.

The most reliable way to do this is to convert the string to an array using the ^explode:/ function

This gives an array like [“level-1″,”level-2″,”page”]

Then finally counting the length of the array using the function ^count

Which finally gives us the position of 3.

How is the Home url being determined?

To make this code easy to use on multiple sites – we’re using tags to determine the home url.

%asset_url^explode:/^index:2%

We do this using the merge tag %asset_url% which gives us the full url, for example https://example.com/level-1/-level-2/page

Again we use the ^explode:/ function to break the url into it’s segement – this time it will output

[“https:”,””,”example.com”,”level-1″,”level-2″,”page”]

Because the root level will always be in the same position we can use the ^index:2 function to select the home url. Note that arrays are zero-based numbering – so counting from 0 , 1 , 2 … with 2 being example.com

This finally gives us example.com