• Use AB_SocialMetaModel in CMS website to generate all social media meta/link/script markup

Use AB_SocialMetaModel in CMS website to generate all social media meta/link/script markup

  • 2.7K Views
  • Last Post 15 December 2016
dwebb posted this 15 December 2016

This is a helper class that wraps around the code used for:

Typical usage is to create a shared partial template, often named _META_Elements.cshtml, which gets included in layout templates using RenderPartial(). The contents of the template instantiates an AB_SocialMetaModel object and then renders is using Html.DisplayFor(), which makes use of ~/Views/Shared/DisplayTemplates/AB_SocialMetaModel.cshtml and a few other  templates to render out the meta, link, and script tags the model describes.

Several rarely-modified values are defined in overloadable properties, so they can be changed by defining a subclass of AB_SocialMetaModel and using that in _META_Elements.cshtml instead. A subclass's constructor can also be used to add additional tags, or remove some that aren't wanted, though this can also be done in _META_Elements.cshtml.

  • For meta tags, add new AB_PageMetaEntity objects to ap_PageMetaInfoModel
  • For link tags, add new AB_PageLinkEntity objects to ap_PageLinkInfoModel
  • For json-ld script tags, add new AB_PageScriptEntity objects to ap_PageScriptInfoModel

Several of the tags draw their values from the HttpContext.Items[] collection; these are typically set in page-specific controllers or views to provide page-specific tags.

  • "Meta.Title"
  • "Meta.Description"
  • "Meta.Keywords"
  • "Meta.ModuleImageURL"
  • "Meta.OGType"         - Facebook Open Graph Type
  • "Meta.ScriptModels"   - A List of AB_PageScriptInfoModel object for page-specific Google json-ld

For CMS pages and AB_Listing detail entities, these values are set through the Maintenance application's detail displays.

cms
dwebb posted this 15 December 2016

Here's an example _META_Elements.cshtml template. Note that link tags for icons are specified after the model object is created.

@using A4DN.Core.MVC.CMS.Models
@using A4DN.Core.MVC.CMS.Models.GoogleJsonLD
@using A4DN.Core.MVC.Base.Infrastructure.Helpers
@{
    var model = new AB_SocialMetaModel(HttpContext.Current, Request, Url,
        defaultTitle: "Surround Technologies LLC",
        author: "Surround Technologies, LLC",
        generator: "Accelerator Development Solutions - http://www.surroundtech.com/accelerator",
        twitterCard: "summary_large_image",
        twitterSite: "@SurroundTech",
        facebookAppId: "",
        facebookSiteName: "Surround Technologies, LLC",
        googleSiteName: new AB_SiteName
        {
            Name = "Surround Technologies",
            Url = "http://www.surroundtech.com"
        },
        googleSiteLogo: new AB_SiteLogo
        {
            Url = "http://www.surroundtech.com",
            Logo = Request.Url.GetLeftPart(UriPartial.Authority) + "/" + Url.am_MediaFile("surroundlogo-withtag.png")
        },
        googleSocialProfileLinks: 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"
            }
        },
        googleCorporateContacts: 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"
                }
            }
        }
    );

   var iconVersion = "1.0";    // Forces browsers to update cache when new images are deployed

   model.ap_PageLinkInfoModel.AddRange(new List<AB_PageLinkEntity>
   {
       new AB_PageLinkEntity { Rel = "canonical", Href = Request.Url.AbsoluteUri },
       new AB_PageLinkEntity { Rel = "icon", Sizes = "32x32", Type = "image/png", Href = Url.Content("~/favicon.png?v=" + iconVersion) },
       new AB_PageLinkEntity { Rel = "shortcut icon", Type = "image/x-icon", Href = Url.Content("~/favicon.ico?v=" + iconVersion) },
       // new AB_PageLinkEntity { Rel = "apple-touch-startup-image", Href = Url.am_MediaFile("apple-touch-startup.png?v=" + iconVersion) },
       new AB_PageLinkEntity { Rel = "apple-touch-icon", Href = Url.Content("~/apple-touch-icon-iphone.png?v=" + iconVersion) },
       new AB_PageLinkEntity { Rel = "apple-touch-icon", Sizes = "76x76", Href = Url.Content("~/apple-touch-icon-ipad.png?v=" + iconVersion) },
       new AB_PageLinkEntity { Rel = "apple-touch-icon", Sizes = "120x120", Href = Url.Content("~/apple-touch-icon-iphone-retina.png?v=" + iconVersion) },
       new AB_PageLinkEntity { Rel = "apple-touch-icon", Sizes = "152x152", Href = Url.Content("~/apple-touch-icon-ipad-retina.png?v=" + iconVersion) },
   });
}

@Html.DisplayFor(m => model)

Categories
Search
Popular Tags
Hot Topics
Close