Adding Rich Snippets For Breadcrumbs

Adding Rich Snippets For Breadcrumbs

I recently added breadcrumbs to codefight cms but they were not picked up by google. So, after some research I found that i needed to use some rich snippets. So, here are my updates that worked.

Output Before:

<span class="breadcrumbs">
    <a href="http://codefight.org/" rel="breadcrumb home tag" title="Goto Homepage">Home</a>
    &raquo;
    <a href="http://codefight.org/blog" rel="breadcrumb blog tag" title="Goto Blog">Blog</a>
    &raquo;
    <a href="http://codefight.org/blog/c/codefight-cms" itemprop="url" rel="category tag" title="View all posts in CodeFight CMS">CodeFight CMS</a>,
    <a href="http://codefight.org/blog/c/releases" rel="category tag" title="View all posts in Releases">Releases</a>
</span>

Final output after code update:

<ul class="breadcrumb">
    <li><span class="hide">You are here: </span></li>
    <li>
        <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="http://codefight.org/" rel="breadcrumb home" title="Goto Homepage">
                <span itemprop="title">Home</span>
            </a>
            <span class="divider">/</span>
        </span>
    </li>
    <li>
        <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="http://codefight.org/blog" rel="breadcrumb blog" title="Goto Blog">
                <span itemprop="title">Blog</span>
            </a>
            <span class="divider">/</span>
        </span>
    </li>
    <li>
        <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="http://codefight.org/blog/c/codefight-cms" itemprop="url" rel="category tag" title="View all posts in CodeFight CMS">
                <span itemprop="title">CodeFight CMS</span>
            </a>, 
            <a href="http://codefight.org/blog/c/releases" itemprop="url" rel="category tag" title="View all posts in Releases">
                <span itemprop="title">Releases</span>
            </a>
            <span class="divider">/</span>
        </span>
    </li>
    <li class="active">
        <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="blog/codefight-cms/176/Codefight-CMS-version-2.2.1.0-Lighter" rel="breadcrumb post page" title="Codefight CMS - version 2.2.1.0 'Lighter'">
                <span itemprop="title">Codefight CMS - version 2.2.1.0 'Lighter'</span>
            </a>
        </span>
    </li>
</ul>

Note: While adding breadcrumb's rich snippets, I updated the code to pick up twitter bootstrap component too. You can see how it looks in my website.

You can test if it's working or not with Google's Rich Snippet Tool