Using Schema.org’s Breadcrumb Microdata with Breadcrumb NavXT

by

Note, that Schema.org breadcrumb has been replaced by the newer BreadcrumbList. Please see the How to Implement Schema.org BreadcrumbList with Breadcrumb NavXT article for more information.

Unlike Google’s Breadcrumb micodata format, Schema.org’s microdata format for breadcrumbs is very easy to implement. There is no need for nested tags, or overly verbose and redundant tags. Instead, there is just two modifications from the standard Breadcrumb NavXT setup.

Breadcrumbs are a property of the Schema.org WebPage CreativeWork type. The first thing you must do to use the Schema.org microdata is declare the body of the (x)HTML page to be of type WebPage. You’ll need to modify your current WordPress theme so that the opening body tag is:

<body itemscope itemtype="http://schema.org/WebPage">

Once we’ve declared our body to be of type WebPage, all we have to do is include itemprop=”breadcrumb” in the div wrapping around the breadcrumb trail. For example, we’d use:

<div itemprop="breadcrumb" class="breadcrumbs">
    <?php if(function_exists('bcn_display')) { bcn_display(); }?>
</div>

That’s it! Note that this does not work with the included widget in 4.0.1, and is something that will be changed for the next release.

-John Havlik

[end of transmission, stay tuned]

Trackbacks/Pingbacks

  1. Pingback: Breadcrumb NavXT 4.0.2 | mtekk's Crib

  2. Pingback: The Complete Guide of Rich Snippets - Breadcrumbs | ryanyu.me

  3. Pingback: Using microdata RDFa with Breadcrumb NavXT (schema.org) | Orion42's Weblog

17 thoughts on “Using Schema.org’s Breadcrumb Microdata with Breadcrumb NavXT”

  1. Hey, this post is exactly what i was searching for. I’ve made the implementation in my index.php file of one of my new sites. It will be very interesting to see this update in the serps and also to see if my breadcrumb links end up generating more legitimate link juice to my inner pages now.

    I say this because i never try to anchor text link in my content back to my home-page. I’ve always hoped that breadcrumb links would be given more weight in google instead of trying to worthlessly link back to pages within in content tags.

    Anyways, thanks for the simple article that explained how to do this so easily. I’d love to see more useful microdata articles in the future.

    • In what way are you looking for Google to use it? Google doesn’t actually need the microdata to find your breadcrumb trail, there are several ways to hint at what is a breadcrumb trail. Surrounding the breadcrumb trail with a div with class of ‘breadcrumbs’ is sufficient for Google to pick that up as a breadcrumb trail.

      -John Havlik

  3. great plugin!!! I have followed the above instructions but google rich snippet test still doesn’t recognise it.

    From other websites I have seen they have UL and each breadcrumb contains:

    itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”

    Please can you advise where I am going wrong. Thanks

    http://www.ticketreview.net

    • James,

      I just ran Google’s Rich Snippet test on one of your pages, and it did find the schema.org breadcrumb microdata (it is at the bottom of the test results). Google just isn’t using it in search results for your site yet. This is something that does not necessarily appear immediately. I am not using any microdata for the breadcrumbs on this site and Google still picks up my breadcrumbs (in search results).

      -John Havlik

  4. Actually, in the W3 Schema.org discussion group, it is being argued that the example found on schema.org is incorrect and each individual breadcrumb has to be individually marked up with an itemprop. See Issue-10

    I tend to agree with this, as once I stripped out my old data-vocabulary markup for breadcrumbs (which worked) and inserted Schema.org markup, my breadcrumbs stopped showing in google search.

    • Really, the standard should be: you must define an element (e.g. div, span, or ol; usually one of the first two) as a breadcrumb trail, the member elements (span, a, or li; usually a) should either be declared as breadcrumbs (should be optional) or they can be inferred to be breadcrumbs (what else is in a breadcrumb trail?). I’m of the opinion that we should reduce the amount of redundant and useless information (noise) not add to it.

      -John Havlik

  7. Hello there!
    I am using Breadcrumbs NavXT in my website. Earlier, I was using Yoast Breadcrumbs which showed me my breadcrumbs trail instantly in Google Richsnippets but after implementing Breadcrumbs NavXT, I don’t get that breadcrumbs link, even at Google Richsnippets. I’ve implemented the code correctly
    Can you please explain the reason ?

    Regards
    Saurabh Saha
    http://www.techgyd.com

  9. From version 4.4 you also have to set a filter in your function.php theme file, otherwise all the extra-attributes (itemscope, :v, etc) will be removed. I’ve worked hard these day to finally find this working code (a little be redundant, but i preferred to add more values to tags).

    At body tag:
    <body <?php if(function_exists('bcn_display')){?>
    itemscope itemtype="http://schema.org/WebPage"
    <?php }?>
    <?php body_class(); ?>
    id="body">

    Near breadcrumb you have to wrote the xmlns file:

    <div itemprop="breadcrumb" class="breadcrumbs">
    <span xmlns:v="http://rdf.data-vocabulary.org/#">
    <?php if(function_exists('bcn_display'))

    { bcn_display(); }?>
    </span>
    </div>

    And in function.php of your theme:

    // 42 - 08/08/2013 - adding a tag to the allowed HTML list for Breadcrumb NavXT

    function my_bcn_allowed_html($allowed_html)
    {
    $allowed_html['li'] = array(
    'title' => true,
    'class' => true,
    'id' => true,
    'dir' => true,
    'align' => true,
    'lang' => true,
    'xml:lang' => true,
    'aria-hidden' => true,
    'data-icon' => true,
    'itemref' => true,
    'itemid' => true,
    'itemprop' => true,
    'itemscope' => true,
    'itemtype' => true,
    'property' => true,
    'xmlns:v' => true
    );

    $allowed_html['span'] = array(
    'title' => true,
    'class' => true,
    'id' => true,
    'dir' => true,
    'align' => true,
    'lang' => true,
    'xml:lang' => true,
    'aria-hidden' => true,
    'data-icon' => true,
    'itemref' => true,
    'itemid' => true,
    'itemprop' => true,
    'itemscope' => true,
    'itemtype' => true,
    'rel' => true,
    'typeof' => true,
    'property' => true,
    'xmlns:v' => true
    );

    $allowed_html['div'] = array(
    'title' => true,
    'class' => true,
    'id' => true,
    'dir' => true,
    'align' => true,
    'lang' => true,
    'xml:lang' => true,
    'aria-hidden' => true,
    'data-icon' => true,
    'itemref' => true,
    'itemid' => true,
    'itemprop' => true,
    'itemscope' => true,
    'itemtype' => true,
    'rel' => true,
    'typeof' => true,
    'property' => true,
    'xmlns:v' => true
    );

    $allowed_html['a'] = array(
    'title' => true,
    'class' => true,
    'id' => true,
    'dir' => true,
    'align' => true,
    'lang' => true,
    'xml:lang' => true,
    'aria-hidden' => true,
    'data-icon' => true,
    'itemref' => true,
    'itemid' => true,
    'itemprop' => true,
    'itemscope' => true,
    'itemtype' => true,
    'rel' => true,
    'typeof' => true,
    'property' => true,
    'xmlns:v' => true,
    'href' => true
    );

    return $allowed_html;
    }
    add_filter('bcn_allowed_html', 'my_bcn_allowed_html');

Comments are closed.