Breadcrumb Microformat for SEO

I just recently added the rich snippet code for breadcrumbs in a nop installation. This snippet code is from Google and Bing.

You need to change the code in Views/Catalog/ProductBreadcrumb.cshtml to:

<div class="breadcrumb">
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="@Url.RouteUrl("HomePage")" itemprop="url"><span itemprop="title">@T("Products.Breadcrumb.Top")</span></a>
        /
    </div>
    @for (int i = 0; i < Model.CategoryBreadcrumb.Count; i++)
    {
        var catBr = Model.CategoryBreadcrumb[i];
        <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="@Url.RouteUrl("Category", new { categoryId = catBr.Id, SeName = catBr.SeName })" itemprop="url">
                <span itemprop="title">@catBr.Name</span></a>
            <text>/</text>
        </div>
    }
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="@Url.RouteUrl("Product", new { productId = Model.ProductId, SeName = Model.ProductSeName })" itemprop="url">
            <span itemprop="title">@Model.ProductName</span></a>
    </div>
</div>
<br />

You also need to change the code on Views/Catalog/CategoryTemplate.ProductsInGridOrLines.cshtml to:

@*category breadcrumb*@
    @if (Model.DisplayCategoryBreadcrumb)
    {
        <div class="breadcrumb">
        <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="@Url.RouteUrl("HomePage")" itemprop="url"><span itemprop="title">@T("Categories.Breadcrumb.Top")</span></a> /
            </div>
            @for (int i = 0; i < Model.CategoryBreadcrumb.Count; i++)
            {
                var catBr = Model.CategoryBreadcrumb[i];
                <div itemscop itemtype="http://data-vocabulary.org/breadcrumb">
                <a href="@Url.RouteUrl("Category", new { categoryId = catBr.Id, SeName = catBr.SeName })" itemprop="url"><span itemprop="title">@catBr.Name</span></a>
                if (i != Model.CategoryBreadcrumb.Count - 1)
                {
                    <text>/</text>
                }
                </div>
            }
            <br />
        </div>

I tested the code in Google Webmaster tools and Google sees it correctly. Hope this works for everyone else.

On the Views/Catalog/CategoryTemplate.ProductsInGridOrLines.cshtml page, I needed to make a correction. Here is the correct code:

<div class="breadcrumb">
        <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="@Url.RouteUrl("HomePage")" itemprop="url"><span itemprop="title">@T("Categories.Breadcrumb.Top")</span></a> /
            </span>
            @for (int i = 0; i < Model.CategoryBreadcrumb.Count; i++)
            {
                var catBr = Model.CategoryBreadcrumb[i];
                <span itemscop itemtype="http://data-vocabulary.org/breadcrumb">
                <a href="@Url.RouteUrl("Category", new { categoryId = catBr.Id, SeName = catBr.SeName })" itemprop="url"><span itemprop="title">@catBr.Name</span></a></span>
                if (i != Model.CategoryBreadcrumb.Count - 1)
                {
                    <text>/</text>
                }
                
            }
            <br />
        </div>

I made a few changes along with changing the divs to spans because they are inline by default which will keep your breadcrumb on the same line. You should do the same thing with the ProductBreadcrumb.cshtml page.

Thanks! The work item is here