Sitecore MVC for Front-end developers
Part 3: MetaData

MetaData

In this post, I will describe building the metadata components for the site. This includes:

• Canonical URL
• Google Site Verification
• Meta Description
• Meta Title
• Robots

Context item-based renderings

Canonical URL, Meta Description, Meta Title and Robots components all use content from the current page, or context item. This makes them pretty simple.

Canonical URL

This tag displays a URL for the canonical version of a page. It's useful if you have two or more similar pages as it avoids SEO penalisation for duplicate content. This component renders content from the context item. It retrieves the URL from a General Link field, which is not handled with OOTB Sitecore MVC. This uses with the following code:

@{
    var linkUrl = new Sitecore.Xml.Xsl.LinkUrl();
    var canonicalUrl = linkUrl.GetUrl(Html.Sitecore().CurrentItem, "Canonical URL");
}
@if (!string.IsNullOrEmpty(canonicalUrl))
{ <link rel="canonical" href="@canonicalUrl"/> }

Using my FedEx (Front End Developer EXtensions) foundation module the above can be re-written more simply as:

@using Sitecore.Foundation.FedEx
@{
    var canonicalUrl = Html.Sitecore().GetLinkFieldUrl("Canonical URL");
}
@if (!string.IsNullOrEmpty(canonicalUrl))
{ <link rel="canonical" href="@canonicalUrl" /> }

Meta Description & Meta Title

These components are very simple and use OOTB Sitecore MVC functionality. The only real thing to note is the new {DisableWebEdit = true} parameter passed to the Field method. This prevents the components being editable in the Experience Editor. The extra markup rendered by Sitecore to edit fields can cause problems when used in the head of the page. This setting prevents them being editable avoiding this problem.

Meta Title:

<title>@Html.Sitecore().Field("Meta Title", new {DisableWebEdit = true})</title>

Meta Description:

<meta name="description" content="@Html.Sitecore().Field("Meta Description", new {DisableWebEdit = true})" />

Robots

Besides having a robots.txt file at the root of a site, the meta robots tag is a useful addition. This component looks at two checkbox fields on the current page: "NoIndex" and "NoFollow". A LINQ statement appends non-empty values together into a single comma separated string. This avoids an ugly leading or trailing , in the tag.

@{
    var values = new[]
    {
        Html.Sitecore().CurrentItem["NoIndex"] == "1" ? "noindex" : "",
        Html.Sitecore().CurrentItem["NoFollow"] == "1" ? "nofollow" : ""
    };
}
<meta name="robots" content="@string.Join(", ", values.Where(v => v != ""))" />

Google Site Verification

This component does two things before rendering the verification code. First it checks if the current page is the homepage. Second it retrieves the site root item containing the setting. This uses two extension methods from the FedEx foundation module.

@using Sitecore.Foundation.FedEx
@{
    if (Html.Sitecore().CurrentItem.ID == Html.Sitecore().GetHomePageItem().ID)
    {
        var siteRoot = Html.Sitecore().GetSiteRootItem();
        <meta name="google-site-verification" content="@Html.Sitecore().Field("VerificationCode", siteRoot, new {DisableWebEdit = true})"/>
    }
}

Settings Items

In the example above a single setting exists on the root site item (in this case the root is the parent of the homepage). Habitat uses this approach and it works well for settings needing only a single item. The benefit of this is that the query to get a parent item inheriting a given template is fast. If you need to define settings with many items, create a dedicated folder under the site root.

What's next?

Thanks for reading and stay-tuned for the next article in the series where I talk about the header structure and components.

1. Introduction
2. The Layout
3. MetaData (this page)
4. Header Structure
5. Navigation
6. Section Header
7. Content
8. Product Details
9. Product/Article List
10. Sidebar Widget
11. Footer