In many social networking sites, pasting a URL from a news site into Facebook or Linked In displays a nice synopsis of that link. The URL pasted into such status box is read, capturing information about the page and it’s specific contents, such as a title,description, thumbnail, etc. One common technique used is to extract the Open Graph Protocol (http://ogp.me/) markup defined in the header, which is providing the additional metadata. An open graph tag is a meta tag using property names prefixed with “og:”, each page can have its own specific metadata that describes the purpose of that page.
I had already created a site without open graph tags,so I began to think of a way to incorporate them with little effort. After throwing out my more complex designs (which didn’t add much benefit except maybe a little more reusability), it turned out the simplest way was to use the following helper method. The helper below extracts the information from the current page request, the ViewBag, and from other application constants.
- @helper OpenGraph()
- {
- var bag = ((WebViewPage)WebPageContext.Current.Page).ViewBag;
- <meta property=”og:title” content=”@Constants.Application.Name: @bag.Title” />
- <meta property=”og:type” content=”website” />
- <meta property=”og:url” content=”@WebPageContext.Current.Page.Context.Request.Url.ToString()” />
- <meta property=”og:site_name” content=”@Constants.Application.Name” />
- if (bag.ImageUrl != null)
- {
- <meta property=”og:image” content=”@WebPageContext.Current.Page.Href(bag.ImageUrl)” />
- }
- else
- {
- <meta property=”og:image” content=”@WebPageContext.Current.Page.Href(“~/Content/Images/logo.png”)” />
- }
- if (bag.Description != null)
- {
- <meta property=”og:description” content=”@bag.Description” />
- }
- }
The tags used are:
- title – the title of the page
- type – the type of content (which has pre-defined values, defined at
http://ogp.me/). - url – the current URL of the page
- site_name – the name of the site
- image – the thumbnail image that represents the page
- description – the description of the page
Each of my views then defines a small header code block, adding a few properties to the VIewBag. By default, every view has a title property defined (which is the default behavior). A few more properties can be added (Description and ImageUrl); the helper reads these from the ViewBag and renders to the markup.
- @{
- ViewBag.Title = “Create a New Group”;
- ViewBag.Description = “Use this feature to create a new group.”;
- }
Notice I omitted the image property, which will then use the site’s logo link.
To use this helper method, I made the OpenGraph helper a global helper (defined in the App_Code folder) and called this method between the <head></head> tags in the Layout page. Then each page automatically incorporates the open graph tags automatically, based on the information fed in from the header code block, and I only have to call the method once. Very simple.