Page Tagging

All public websites have certain digital marketing requirements that expose themselves via children of the HTML <head/> element. With the rise of Sitecore Helix, developers the world over are building Feature kits for things like Meta Descriptions, Twitter, Open-Graph support, Robots directives and the like.

Constellation.Feature.PageTagging is a quick library for adding a reasonable amount of these kinds of features to your Sitecore install without having to reinvent the wheel, specifically focusing on metadata that:

  • Is “table stakes” for SEO
  • Will improve the look of links pasted into Twitter and Facebook

Features

This component provides editable, yet optional, meta information on your Sitecore Pages.

Basic Page Metadata

<meta name="keywords" content="[field value]" />
<meta name="description" content="[field value]" />
<meta name="publisher" content="[]" />
<meta name="author" content="[]" />

Search Engine Directives

<meta name="robots" content="[index|noindex],[follow|nofollow],[noimageindex],[noarchive,nocache],[nosnippet],[noodp]" />

Social Media Metadata

<meta name="twitter:card" content="[field value]" />
<meta name="twitter:creator" content="[field value]" />
<meta name="twitter:site" content="[field value]" />

<meta property="og:url" content="[field value" />
<meta property="og:title" content="[field value]" />
<meta property="og:description" content="[field value]" />
<meta property="og:image" content="[field value]" />

Safe Defaults

In general, if a field does not have a usable value, the associated meta-tag will not be rendered.

Duplicate Values

Because of the nature of meta-tags, some data is repeated in different tags, for consumption by different systems. The following tags share values with each other:

  • description and og:description
  • Browser Title field (used for the HTML <title/> tag) and og:title

Trickle-Down Values

To aid in author sanity, the following fields can be set on a “home page” type Item and will be automatically consumed by Descendant Items if they do not have individualized values.

  • publisher
  • author
  • twitter:creator
  • twitter:site
  • og:image

Calculated Values

og:url is resolved using the context LinkManager with both AlwaysIncludeServerUrl and SiteResolving options set to true.

Installation

Constellation.Feature.PageTagging is managed via NuGet.

Install Package

In Visual Studio, fire up the Package Manager console and install into a .NET Web Application project:

PM> Install-Package Constellation.Feature.PageTagging

This component includes a Sitecore package that will be installed automatically when you deploy your build to a target Sitecore server.

To use this component, there are a few Developer tasks after installation:

Inherit Templates

Add the following Templates as Base Templates to any Template representing a “Page” in your Sitecore installation:

  • Templates/Feature/Constellation/Page Tagging
    • Page Metadata
    • Page Search Engine Directives
    • Page Sitemap Behavior
    • Page Social Metadata

Standard Values

The fields in this component have the following Standard Values pre-set. You will want to customize and extend these values for each Helix Project in your installation.

  • Page Metadata
    • Browser Title = “$name”
    • Inherit Author and Publiser = true
  • Page Search Engine Directives
    • Search Engine Indexes Page = true
    • Search Engine Follows Links = true
    • Search Engine Indexes Images = true
    • Search Engine can Cache Page = true
    • Search Engine can Snippet Page = true
    • Allow ODP Snippet = true
  • Page Sitemap Behavior
    • Include in Sitemap = true
    • Change Frequency = monthly

Insert Renderings

Add the following Renderings between the <head></head> tags of your Pages. This is best achieved by creating a Sitecore Placeholder between the <head></head> tags and assigning the following Renderings to that placeholder:

  • /Layout/Renderings/Feature/Constellation/Page Tagging
    • Page Metadata
    • Page Search Engine Directives
    • Page Social Metadata

Note that we recommend a placeholder because the Rendering Definitions as delivered already have the correct caching options set for your pages. If you statically declare the renderings on your Layout or Sublayout, you’ll be responsible for the caching parameters. We strongly recommend caching the output, with the following parameters:

  • Cache = true
  • Vary by Data = true

These renderings are explicitly set to retrieve field values from the Sitecore.Context.Item and will not obey any Datasource values set on them either at the Definition level or in a Standard Values item.

Experience Editor Compatibility

Because these renderings occur outside of the HTML <body/> element, and have no visual component, they cannot be edited via click-to-edit style Field Renderings. This component does include Custom Experience Buttons for each of the Data Templates shipped. These buttons can be mounted to any Rendering on the page where the Datasource of the Rendering is the Sitecore.Context.Item (or RenderingContext.Current.PageItem). The Custom Experience buttons have full labeling and iconography to ensure they are easy to identify and use.

Next Steps

Want to see how it works? Check out the source code available on GitHub.