Jump to content

Recommended Posts

Posted

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
Posted

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
  • 1 year later...
Posted

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.

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
  • Recently Browsing   0 members

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