Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

SEO: Add microdata to breadcrumb control

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 way to the users and other various benefits. The microdata format is different for all the content types. This article is going to describe how to add microdata to the breadcrumb control. For more information, see Breadcrumb widget. 

NOTE: You must follow the following specification when adding microdata. 

Drag a Breadcrumb widget on you Sitefinity page and click Edit. You will have two choices from 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. In this article the second option will be shown. Create new template with name "Breadcrumb with microdata" and add the following code: 

<%@  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 ID="BreadcrumbLabel" runat="server" WrapperTagName="span" HideIfNoText="true" CssClass="sfBreadcrumbLabel" />
    <telerik:RadSiteMap runat="server" ID="Breadcrumb" Skin="Default">
        <DefaultLevelSettings ListLayout-RepeatDirection="Horizontal" Layout="Flow">
            <NodeTemplate>
                <div itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://www.sitefinity.com<;%# Page.ResolveUrl((string)DataBinder.Eval(Container.DataItem, "url")) %>" itemprop="url"><span itemprop="title"><%# DataBinder.Eval(Container.DataItem, "title") %></span> </a></div>
            </NodeTemplate>
        </DefaultLevelSettings>
    </telerik:RadSiteMap>
</div>

Mind the 'itemscope' and 'itemprop' attributes that are 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.

Click the Save changes button and your changes will be applied to the template. The final result in the rendering should be similar to this: 

<div class="rsmTemplate">
    <div itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://docs.sitefinity.com" itemprop="url"><span itemprop="title">Sitefinity documentation</span> </a></div>
</div>

NOTE: 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. 

 

Back To Top

Next: SEO: Add canonical URLs for pages in Multisite environment