How to Implement Schema.org BreadcrumbList with Breadcrumb NavXT

Recently, Google began supporting the new Schema.org BreadcrumbList microformat. This happens to be slightly more verbose than the previous RDFa Breadcrumbs setup, but Google is much better at parsing this new format, and it is fully HTML5 compliant. While there is no ‘one click’ configuration for RDFa breadcrumbs within Breadcrumb NavXT, support for them is not too difficult to configure. Note, this guide depends on features made available in Breadcrumb NavXT 5.3.0 and will not work fully in previous versions.

Calling Code Modifications

To begin, the wrapping div for the calling code needs to have typeof="BreadcrumbList" vocab="https://schema.org/" added to it. If you are migrating from RDFa Breadcrumbs, this code replaces xmlns:v="http://rdf.data-vocabulary.org/#". Below is an example calling code block for users of the regular bcn_display(); function.

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php if(function_exists('bcn_display')) { bcn_display(); }?>
</div>

Settings Modifications

In general, you need a

<span property="itemListElement" typeof="ListItem">

wrapping around every breadcrumb, and an inner element containing property="name" that directly wraps the page title, and property="item" typeof="WebPage" in the anchor if the breadcrumb contains a link. Lastly, each breadcrumb needs a (note that the %position% template tag is a new feature in Breadcrumb NavXT 5.3.0). For the most part this will result in two replacements need to be made to all of the breadcrumb templates. For the linked breadcrumb templates, replace:

<a title="Go to %title%." href="%link%">%htitle%</a>

or

<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" title="Go to %title%." href="%link%" class="%type%">%htitle%</a></span>

with:

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%"><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

Note the extra span containing the typeof declaration. This is necessary for Google to pick up on the breadcrumb objects (even though the tag is redundant as the property should work on the anchor).

For the unlinked breadcrumb templates, replace:

%htitle%

or

<span typeof="v:Breadcrumb"><span property="v:title">%htitle%</span></span>

with:

<span property="itemListElement" typeof="ListItem"><span property="name">%htitle%</span><meta property="position" content="%position%"></span>

To jumpstart this replacement process, you can import the following Breadcrumb NavXT settings XML file. Breadcrumb NavXT Schema.org BreadcrumbList settings file (Right click and select “Save As”).

Final Notes

After updating your settings, use Google’s Structured Data Testing Tool to verify that your BreadcrumbList is detected properly by Google.

-John Havlik

[end of transmission, stay tuned]