Fixing Magento’s Breadcrumbs – Cache and Microdata

Magento has a nice, built-in breadcrumbs feature, where breadcrumbs can appear on any type of page: static CMS page, product listings, or catalog product pages.

Picture of chocolate crumbs to illustrate breadcrumbs
I prefer chocolate over bread anyway. More paleo. So we’re going with chocolate crumbs in this article.

Frustratingly, though, Magento has not added in RDFa microdata to breadcrumbs by default, leaving it up to store owners to utilize this type of semantic markup or not.

There is also the problem of the breadcrumbs completely disappearing when the Full Page Cache is enabled! It would be especially annoying to add the microdata, but not have it be read by search engines when they crawl pages with the breadcrumbs completely missing.

So, in this article, we’ll dress up the default Magento breadcrumbs, adding RDFa markup and making sure the Full Page Cache remembers to grab and display them.

RDFa for Breadcrumbs

We’ll work with the base package and default theme in the basic Magento 1.8.1.0 installation. If you have your own package and theme, though, it would make more sense just to copy over this base theme file into your own theme and modify it from there. Here’s the file in its original status:

<?php if($crumbs && is_array($crumbs)): ?>
<div class="breadcrumbs">
    <ul>
        <?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
            <li class="<?php echo $_crumbName ?>">
            <?php if($_crumbInfo['link']): ?>
                <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->escapeHtml($_crumbInfo['title']) ?>"><?php echo $this->escapeHtml($_crumbInfo['label']) ?></a>
            <?php elseif($_crumbInfo['last']): ?>
                <strong><?php echo $this->escapeHtml($_crumbInfo['label']) ?></strong>
            <?php else: ?>
                <?php echo $this->escapeHtml($_crumbInfo['label']) ?>
            <?php endif; ?>
            <?php if(!$_crumbInfo['last']): ?>
                <span>/ </span>
            <?php endif; ?>
            </li>
        <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

And here’s all we have to do to make the breadcrumbs more friendly to Google and other search engine robots that visit our store. Check out the added code to the <ul> and <li> lines, as well as the <a> and <strong> tags.

<?php if($crumbs && is_array($crumbs)): ?>
<div class="breadcrumbs">
    <ul xmlns:v="http://rdf.data-vocabulary.org/#">
        <?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
            <li class="<?php echo $_crumbName ?>" typeof="v:Breadcrumb">
            <?php if($_crumbInfo['link']): ?>
                <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->escapeHtml($_crumbInfo['title']) ?>" rel="v:url" property="v:title"><?php echo $this->escapeHtml($_crumbInfo['label']) ?></a>
            <?php elseif($_crumbInfo['last']): ?>
                <strong rel="v:url" property="v:title"><?php echo $this->escapeHtml($_crumbInfo['label']) ?></strong>
            <?php else: ?>
                <?php echo $this->escapeHtml($_crumbInfo['label']) ?>
            <?php endif; ?>
            <?php if(!$_crumbInfo['last']): ?>
                <span>/ </span>
            <?php endif; ?>
            </li>
        <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

That’s it for the breadcrumbs! Now, you can copy the code from a product page on your development site (or live site) into the Google Webmaster Tools Structured Data Testing Tool and see how your pages may appear in search results.

That is, IF Google can read the breadcrumbs. Which it can’t do if the Full Page Cache disappears them.

Make Magento Cache the Breadcrumbs

Full credit for this fix goes to Luis Tineo of the “Memoir of a Magento Developer” website, who figured out how to fix the problem of Magento not caching breadcrumbs.

The fix is deceptively simple. In any of your modules (or you can create one if you want), just add a cache.xml file with the following code in it:

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<placeholders>
		<catalog_breadcrumbs>
			<block>page/html_breadcrumbs</block>
			<name>breadcrumbs</name>
			<placeholder>CONTAINER_BREADCRUMBS</placeholder>
			<container>Enterprise_PageCache_Model_Container_Breadcrumbs</container>
			<cache_lifetime>86400</cache_lifetime>
		</catalog_breadcrumbs>
	</placeholders>
</config>

Read Luis’ site for the full details of why Magento fails to cache the breadcrumbs, but this fix rewrites the placeholder for the cache so that the breadcrumbs will be included on cached pages.

Wrapping Up Magento Breadcrumbs Debug & Upgrade

So with these two easy fixes, we now have Magento caching breadcrumbs, and giving Google more information on the structure of your store’s category and product pages.

4 thoughts on “Fixing Magento’s Breadcrumbs – Cache and Microdata”

  1. This won’t help with product pages, because Magento displays the breadcrumb of the session.

    Meaning if you take the product page URL and open it in a fresh browser window with flushed cookies, the breadcrumb won’t contain the categories within the path.

    Instead it will look along the line of:

    Home -> Product name

    So the RDFa microdata fix will unfortunately do nothing.

Leave a Reply

Your email address will not be published. Required fields are marked *