Using AB_PageScriptInfoModel and A4DN.Core.MVC.CMS.Models.GoogleJsonLD to render JSON-LD markup

  • 1.1K Views
  • Last Post 22 August 2016
dwebb posted this 22 August 2016

UPDATE: See "Use AB_SocialMetaModel in CMS website to generate all social media meta/link/script markup" for simplifying wrapper class.

CMS Websites may want to take advantage of Google's support for JSON-LD semantic markup. To do so, it is necessary to output JSON data structure markup into script tags in the head element of your page. Accelerator 6.4.1 provides a number of helper classes to make this easier.

See also: AB_PageMetaInfoModel for meta tag markup

See also: AB_PageLinkInfoModel for link elements

The AB_PageScriptInfoModel object represents a list of AB_PageScriptEntity objects, each of which will be rendered as a script tag. You can use these for any type of script tag; all standard attributes are supported. For example, to render a link to a javascript file, all you need to provide is a Src property containing the url to load, optionally with Async or Defer properties set. Inline javascript can be included by using Content instead of Src; the value of the Content property is rendered as-is (without HTML escaping) as the content of the script tag.

For Json-LD, you must specify Type = "application/ld+json" and provide the Content by instantiating an object from the GoogleJsonLD namespace, populating its properties, and then calling ToString() on it to serialize it to Json markup.

Json-LD is a complex family of schemas, of which Google supports a subset, and Accelerator supports a subset of Google's subset which is focused on the common types of websites created with the Accelerator CMS system. The supported semantic types are:

  • AB_SiteName: https://developers.google.com/search/docs/data-types/sitename
  • AB_SiteLogo: https://developers.google.com/search/docs/data-types/logo
  • AB_SocialProfileLinks: https://developers.google.com/search/docs/data-types/social-profile-links
  • AB_CorporateContacts: https://developers.google.com/search/docs/data-types/corporate-contacts
  • AB_BreadcrumbList: https://developers.google.com/search/docs/data-types/breadcrumbs
  • AB_ItemList: https://developers.google.com/search/docs/guides/mark-up-listings (Note: Google's documentation is incomplete, has some errors, and it is unclear what the correct markup / usage of lists are. This type is experimental.)
@using A4DN.Core.MVC.CMS.Models
@using A4DN.Core.MVC.CMS.Models.GoogleJsonLD
@{
    var scriptModel = new AB_PageScriptInfoModel();

    scriptModel.Add(new AB_PageScriptEntity
    {
        Type = "application/ld+json",
        Content = new AB_SiteName
        {
            Name = "Surround Technologies",
            Url = "http://www.surroundtech.com"
        }.ToString()
    });

    scriptModel.Add(new AB_PageScriptEntity
    {
        Type = "application/ld+json",
        Content = new AB_SiteLogo
        {
            Url = "http://www.surroundtech.com",
            Logo = Request.Url.GetLeftPart(UriPartial.Authority) + Url.am_MediaFile("surroundlogo-withtag.png")
        }.ToString()
    });

    scriptModel.Add(new AB_PageScriptEntity
    {
        Type = "application/ld+json",
        Content = new AB_SocialProfileLinks
        {
            Name = "Surround Technologies",
            Url = "http://www.surroundtech.com",
            SameAs = new List<string>
            {
                "http://twitter.com/#!/surroundtech",
                "http://www.facebook.com/SurroundTech",
                "http://www.linkedin.com/company/surround-technologies",
                "http://www.youtube.com/surroundtechnologies"
            }
        }.ToString()
    });

    scriptModel.Add(new AB_PageScriptEntity
    {
        Type = "application/ld+json",
        Content = new AB_CorporateContacts
        {
            Url = "http://www.surroundtech.com",
            Logo = Request.Url.GetLeftPart(UriPartial.Authority) + Url.am_MediaFile("surroundlogo-withtag.png"),
            Contacts = new List<AB_ContactPoint>
            {
                new AB_ContactPoint
                {
                    ContactType = "sales",
                    Telephone = "+1-239-405-8427"
                }
            }
        }.ToString()
    });

}
@Html.DisplayFor(m => scriptModel)

dwebb posted this 22 August 2016

To render AB_PageScriptInfoModel, the template ~/Views/Shared/DisplayTemplates/AB_PageScriptInfoModel.cshtml is needed:

@model A4DN.Core.MVC.CMS.Models.AB_PageScriptInfoModel
@foreach (var entity in Model)
{
    if (!String.IsNullOrWhiteSpace(entity.Src))
    {
<script type="@entity.Type" src="@entity.Src" @(entity.Async ? "async" : null) @(entity.Defer ? "defer" : null) integrity="@entity.Integrity" crossorigin="@entity.CrossOrigin"></script>
    }
    else if (!String.IsNullOrWhiteSpace(entity.Content))
    {
<script type="@entity.Type" integrity="@entity.Integrity" crossorigin="@entity.CrossOrigin">
    @Html.Raw(entity.Content)
</script>
    }
}

Close