Introduction

<jargon>The Open Graph protocol enables any web page to become a rich object in a social graph.</jargon>

This article demonstrates:

Use of the Open Graph protocol

How to create a simple custom ASP.NET server control

How to add Open Graph properties using our server control

Background

The Open Graph protocol specifies additional meta tags that can be added to the <head> of a page to supplement search engines and social networking sites with additional information about the content of your page. Probably the most common current use of the protocol is to detail information about your site to Facebook when a user clicks on a "Like" button. Another use is to add metadata about an image, video clip, or sound clip to describe the nature of the content and its creator.

Using the Code

When I decided to add Open Graph to my site (I have since removed it; see Points of Interest), I created a custom server control for use on an ASP.NET Web Form, because I wanted to populate some of the fields programmatically. The server control can be easily added to your page.

Add a reference to the RedCell.Web.OpenGraph assembly.

Register the assembly and associate it with a tag prefix.

Add the runat="server" attribute to your <html> and <head> elements, so that the control can add the necessary "prefixes".

Add the four mandatory properties.

Add any additional properties (see the Open Graph protocol documentation for the complete list).

An Web Form that renders HTML5 with the essential bits and pieces would look like:

How It Works

A custom ASP.NET server control is a class that inherits from System.Web.UI.Control.

By default, any public properties that are primitive types can be set in the Web Form's mark-up as attributes. These are called simple properties. In the example, we assign values to the Property and Content properties by assigning values to the property and content attributes. Note the flexibility in case.

The ToolboxData attribute that is applied to the Meta class instructs the Designer to insert a snippet of code into the mark-up when the control is dragged from the Toolbox.

I have overridden the Control.OnLoad method to:

Add the required prefix attribute to the <head> element

Evaluate the value of the og:type property, make sure it is valid, and add a prefix attribute to the <head> element if required

Check that the four mandatory Open Graph properties are present

Check that all other Open Graph properties are valid keywords

Most custom server controls are intended to output some kind of formatted value. We perform this by overriding Control.RenderControl method. This method is passed an HtmlTextWriter instance, which has all the required methods to properly form valid mark-up.

Points of Interest

The Open Graph protocol uses RDFa syntax to extend <meta> elements found in the <head> of the HTML documents. It should be noted that by doing so, it makes pages with most DOCTYPEs invalid. This is because it relies on the use of the property attribute on the <meta> element, which is only valid markup if using the <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> DOCTYPE.

History

This is my first article. It is intended for beginners. Constructive feedback would be appreciated.

Perhaps. I wonder though. The http://ogp.me/ site gives an example from The Rock IMDB page. However, the IMDB page no longer matches the example. The example shows prefix="og: http://ogp.me/ns#" and IMDB shows xmlns:og="http://opengraphprotocol.org/schema/". I do see that navigating to http://opengraphprotocol.org/ immediately redirects to http://ogp.me/. Perhaps the IMDB developers have some reason for using the older protocol, if that is indeed from the older protocol. Very strange.

Somebody in an online forum wrote:

INTJs never really joke. They make a point. The joke is just a gift wrapper.