Jump to content

Breadcrumbs with Microdata


DaveP
 Share

Recommended Posts

Nothing earth shattering, but easy to implement.

<ul class='breadcrumb'>
  <?php foreach($page->parents as $parent): ?>
    <li itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>
    <a href='<?php echo $parent->url; ?>' itemprop='url'>
    <span itemprop='title'><?php echo $parent->title; ?></span></a> <span class='divider'>›</span>
    </li>
  <?php endforeach ?>
  <li><?php echo $page->title; ?></li>
</ul>

It's based on the breadcrumbs in the default PW profile, but the presentational markup is Bootstrap flavoured.

Try it and copy the resulting html snippet into Google's rich snippets testing tool - http://www.google.com/webmasters/tools/richsnippets.

  • Like 6
Link to comment
Share on other sites

Microdata is always good to have, thanks for sharing this!
 
Personally I wouldn't depend too much on data-vocabulary.org though. Their home page makes it pretty obvious that schema.org is the new toast of the town. With schema.org vocabulary breadcrumbs could be implemented like this:

<body itemscope itemtype="http://schema.org/WebPage">
...
<div itemprop="breadcrumb">
    <?php 
    foreach($page->parents as $parent) {
        $end = ($parent === $page->parent) ? "" : " > ";
        echo "<a href='{$parent->url}'>{$parent->title}</a>{$end}";
    }
    ?>
</div>

<!-- this follows strictly schema.org example -->

Or with markup matching above example:

<body itemscope itemtype="http://schema.org/WebPage">
...
<div class='breadcrumb' itemprop='breadcrumb'>
    <?php foreach($page->parents as $parent): ?>
    <li>
        <a href='<?php echo $parent->url; ?>'>
            <span><?php echo $parent->title; ?></span>
        </a> 
        <span class='divider'>›</span>
    </li>
    <?php endforeach ?>
    <li>
        <?php echo $page->title; ?>
    </li>
</ul>

<!-- this isn't exactly what schema.org describes but should still be valid.. -->

There's quite a bit of discussion floating around whether schema.org version of breadcrumbs is actually useful, but it is what their example currently suggests. Note also that breadcrumb is a property of WebPage, ie. you'll have to be in that context in order to use this properly.

  • Like 6
Link to comment
Share on other sites

  • 1 year later...

Thank you for that snippet. I'm using it for a project with Bootstrap 3 and updated it accordingly

<ol class='breadcrumb' itemprop="breadcrumb">
 <?php foreach($page->parents as $parent): ?>
   <li itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>
   <a href='<?php echo $parent->url; ?>' itemprop='url'>
   <span itemprop='title'><?php echo $parent->title; ?></span></a></li>
 <?php endforeach ?>
 <li class="active"><?php echo $page->title; ?></li>
</ol>
 
And I added
<body itemscope itemtype="http://schema.org/WebPage">

like suggested by teppo.

Now it is being picked up by Google.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...