Breadcrumb with microdata markup

  • May 8, 2016
  • SEO

By default, breadcrumb widget have markup without microdata. In this article i will tell you how to follow google best practice for breadcrumbs.

It will help you to show breadcrumbs in google search snippets like in this example:

example of breadcrumbs in google snippets

I will explain for Feather widgets. That means, that you need to install and activate Feather module and use one of resource packages.  If you are using Bootstrap resource package, open file Breadcrumb.cshtml, located in ResourcePackages\Bootstrap\MVC\Views\Breadcrumb folder.

Replace html markup with this code:

<div class="@Model.CssClass">
 <ul class="sf-breadscrumb breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
 @for (int i = 0; i < Model.SiteMapNodes.Count; i++)
 {
 var node = Model.SiteMapNodes[i];
 var current = i == Model.SiteMapNodes.Count - 1 && Model.ShowCurrentPageInTheEnd;
 var className = current ? "active" : "";
 <li class="@className" itemprop="itemListElement" itemscope
 itemtype="http://schema.org/ListItem">
 @if (current)
 {
 <span itemprop="name">@node.Title</span>
 }
 else
 {
 <a href="@node.Url"><span itemprop="name">@node.Title</span></a>
 }
 <meta itemprop="position" content="@(i+1)" />
 </li>


 }
 </ul>
</div>

If you are using your own resource package, just create/edit the same file in this folder ResourcePackages\{your resource package folder}\MVC\Views\Breadcrumb

 
When you done with that, you can use the google webmaster rich snippets tool to check whether your markup is correctly implemented with the microdata format. This tool will check your markup and show report for you




No Comments


You can leave the first : )



Leave a Reply

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