Sitecore SXA – Creating a proper fallback for the og:title element

SXA is a great product and comes with opengraph support out of the box, you can define the following opengraph fields on every page:

• Title
• Description
• Image
• Type
• Site name
• Admins
• App Id

All opengraph fields will not be outputted as HTML tags when they’re empty, except for the Title field. Sitecore uses the Sitecore.XA.Feature.SiteMetadata.Repositories.OpenGraphMetadata.OpenGraphMetadataRepository class to get data that is needed to output the opengraph tags, and this class has a special method that is used to get the value for the Title field named GetTitle. This method is defined as follows:

protected virtual string GetTitle(Item currentItem) => ((IEnumerable<string>) new string[3]
{
    currentItem[Sitecore.XA.Feature.SiteMetadata.Templates._OpenGraphMetadata.Fields.OpenGraphTitle],
    currentItem[Sitecore.XA.Feature.SiteMetadata.Templates.ITitle.Fields.Title],
    currentItem.DisplayName
}).FirstOrDefault<string>((Func<string, bool>) (t => !string.IsNullOrWhiteSpace(t)));

As you can see the code works as follows:

1. Get the value from the Title field from the opengraph properties on the item, and return that if not null or empty.
2. Get the value from the Title field on the item that is defined on the ITitle template, and return that if not null or empty.
3. Get the value from the DisplayName and return that.

So what’s wrong?

The fallback that is used within step 2, getting the Title field from the ITitle template does not work. The ITitle template ({78C7AD21-AA02-47E8-A280-07817F180776}) and the Title field ({80A1F278-0C2F-45D7-8252-AF8F1A13AE0C}) does not exist, so this results in a null value, causing the DisplayName to be used.

We can easily fix this by extending the OpenGraphMetadataRepository and forcing Sitecore to use our implementation. We use the BrowserTitleRepository to get the same value as the one that is used as the Title of the page, which is the one that can be configured within /sitecore/content/[Your Tenant]/[Your Site]/Settings/Browser Title.

You can ask Sitecore support for a fix which currently isn’t available using public reference #466766, or just use the example code and config that is defined below.

OpenGraphMetadataRepository.cs

public class OpenGraphMetadataRepository : Sitecore.XA.Feature.SiteMetadata.Repositories.OpenGraphMetadata.OpenGraphMetadataRepository
{
    private readonly IBrowserTitleRepository _browserTitleRepository;

    public OpenGraphMetadataRepository(IBrowserTitleRepository browserTitleRepository)
    {
        _browserTitleRepository = browserTitleRepository;
    }

    protected override string GetTitle(Item currentItem)
    {
        return (new[]
        {
            currentItem.Fields[Sitecore.XA.Feature.SiteMetadata.Templates._OpenGraphMetadata.Fields.OpenGraphTitle]?.Value,
            _browserTitleRepository.GetModel(currentItem)?.Title,
            currentItem.DisplayName
        }).FirstOrDefault(x => !string.IsNullOrEmpty(x));
    }
}

Opengraph.config

<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <services>
      <register serviceType="Sitecore.XA.Foundation.Mvc.Repositories.Base.IAbstractRepository`1[[Sitecore.XA.Feature.SiteMetadata.Models.OpenGraphRenderingModel, Sitecore.XA.Feature.SiteMetadata]], Sitecore.XA.Foundation.Mvc"
                implementationType="Example.OpenGraphMetadataRepository, Example"
                lifetime="Singleton"
                patch:instead="*[@serviceType='Sitecore.XA.Foundation.Mvc.Repositories.Base.IAbstractRepository`1[[Sitecore.XA.Feature.SiteMetadata.Models.OpenGraphRenderingModel, Sitecore.XA.Feature.SiteMetadata]], Sitecore.XA.Foundation.Mvc']"/>
      <register serviceType="Sitecore.XA.Feature.SiteMetadata.Repositories.OpenGraphMetadata.OpenGraphMetadataRepository, Sitecore.XA.Feature.SiteMetadata"
                implementationType="Example.OpenGraphMetadataRepository, Example"
                lifetime="Singleton"
                patch:instead="*[@serviceType='Sitecore.XA.Feature.SiteMetadata.Repositories.OpenGraphMetadata.OpenGraphMetadataRepository, Sitecore.XA.Feature.SiteMetadata']"/>
    </services>
  </sitecore>
</configuration>

Broken in 10.1 (and probably previous versions), fixed in 10.2