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.
The protocol is described at The Open Graph protocol page. It uses RDFa syntax to extend the <meta> elements commonly found in the <head> of HTML documents.
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:
<%@ Page Language="C#" %>
<%@ Register Assembly="RedCell.Web.OpenGraph"
Namespace="RedCell.Web.OpenGraph" TagPrefix="og" %><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" runat="server">
<head runat="server">
<title>Happy Fun Ball</title>
<og:Meta property="type" content="website" runat="server" />
<og:Meta property="title" content="Happy Fun Ball" runat="server" />
<og:Meta property="locale" content="en_CA" runat="server" />
<og:Meta property="site_name" content="Children's Toy Depot" runat="server" />
<og:Meta property="image"
content="http://example.com/images/happyfunball.png" runat="server" />
<og:Meta property="image"
content="http://example.com/images/happyfunball.png" runat="server" />
<og:Meta property="image:type" content="image/png" runat="server" />
<og:Meta property="url"
content="http://example.com/products/balls/happyfunball" runat="server" />
</head>
<body>
<h1>Happy Fun Ball</h1>
<section id="warnings">
<p>Do not expose Happy Fun Ball to children.</p>
</section>
</body>
</html>
When this Web Form is rendered, it will produce code like:
<!DOCTYPE html>
<html id="Html1" xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns#">
<head id="Head1" prefix="website: http://ogp.me/ns/website#">
<title>Happy Fun Ball</title>
<meta property="og:type" content="website" />
<meta property="og:title" content="Happy Fun Ball" />
<meta property="og:image" content="http://example.com/images/happyfunball.png" />
<meta property="og:url" content="http://example.com/products/balls/happyfunball" />
</head>
<body>
<h1>Happy Fun Ball</h1>
<section id="warnings">
<p>Do not expose Happy Fun Ball to children.</p>
</section>
</body>
</html>
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.
- October 27, 2011: Version 1.0.0.x
