Tuesday, May 29, 2012

Adding microdata to your breadcrumb with Sitefinity

As you probably know, microdata is great way for improving your web appearance and adding semantic to your markup. This way, search engines and other automated web engines make greater use of your content, serve it in a better to the users and other various benefits. The microdata format is different for all the content types you can have on your site and today I will write about the breadcrumb.

The Goal

According to the specification, the mark up of your breadcrumb should look like this: 



(The itemscope="" attribute should be actually only itemscope, with no ="" in the end. Probably, blogger + my syntax highlighter script are playing tricks here. Take a look at the specification.)
When you are developing your website directly editing your markup, the task is very simple. Just add the appropriate attributes and their values in your php/html/asp.net or whatever code you use and that's it. When using CMS, you usually will have to tweak something in your setup, most probably there is a template that is used for displaying your breadcrumb. This is what I'm going to show you in Sitefinity.

The Breadcrumb widget in Sitefinity

Unfortunately, you cannot edit this widget through the widget templates page in the administration nor from the Thunder extension (at least, I don't see them for some reason). So what I did is to drag the Breadcrumb widget on a page -> click Edit and you will see the following screen:






You have two choices here: either edit the existing Breadcrumb template, which means that every where on your site the markup will be changed or create new template and apply it on the appropriate places. I took the second approach in order to rollback and test easier possible issues. So, I copied the code from the existing template and created a new one called "Breadcrumb with microdata". Internally the breadcrumb widget uses RadSiteMap control (from Telerik's suite) and you need to change the default template rendered to the following:
<%@ Control Language="C#" %>
<%@ Register Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<div class="sfBreadcrumbWrp">
<sf:sitefinitylabel cssclass="sfBreadcrumbLabel" hideifnotext="true" id="BreadcrumbLabel" runat="server" wrappertagname="span">
    <telerik:radsitemap id="Breadcrumb" runat="server" skin="Sitefinity">
        <defaultlevelsettings layout="Flow" listlayout-repeatdirection="Horizontal">
          <nodetemplate>
            <div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.blogger.com/%3C%# Page.ResolveUrl((string)DataBinder.Eval(Container.DataItem," url="url">" itemprop="url"&gt;
                  <span itemprop="title">&lt;%# DataBinder.Eval(Container.DataItem, "title") %&gt;</span>
                </a>            
              </div>
             </nodetemplate>
         </defaultlevelsettings>
     </telerik:radsitemap>
</sf:sitefinitylabel>
</div>
Mind the 'itemscope', 'itemtype' and 'itemprop' attributes I added. These are the microdata formats that you need for a breadcrumb. Another thing that worth mentioning is that the Url of the data item that is binded is relative url and you need to resolve it using Page.ResolveUrl to an absolute one. Apart from that, things are pretty straightforward. You click the "Save changes" button and from here your changes are already applied to the template. If the template is used somewhere already - the changes are live so you would prefer to try this not on your live environment first.

The final result


Probably, you noticed that in the li element there is a div with class="rsmTemplate" and another div in it with the microdata format. This is because I couldn't find a way to edit the template of the wrapping div. Otherwise, It would be much better to have only one div element. The itemscope="" attribute is a little messed here, because of the highlight script I use, it's actually only itemscope as in the specification above.

When you are ready, you can use the google webmaster rich snippets tool to check whether your markup is correctly decorated with the microdata format. This tool will show your markup, as seen by the google engine and will show you if you have missed something in your html code.

That's all for now. I hope you find this helpful.