Programming Social Applications

Implementing the Open Graph Protocol

Since the Open Graph protocol uses a simple implementation based on metadata, incorporating it into your site is fairly straightforward and requires only some <meta> tags—the exact number depending on how much data you are looking to expose—in the <head> of your web pages.

Since this is a simple format, the main things we’ll explore in this technology have to do with what information you can expose and how to expose it. The potential data you can expose can be broken up into page metadata, geographic information, contact information, and object types. Let’s explore what these tags look like.

Defining page metadata

Page metadata is the foundation for transforming a web page into a rich data object in a user’s social graph. The Open Graph protocol defines a number of metadata properties that are required for implementation. These are listed in Table 10-1.

Table 10-1. Required page metadata properties

Property	Description
og:image	An image to be associated with the object, such as a thumbnail or screenshot.
og:title	A title describing the site object, much like using the standard HTML <title> tag.
og:type	The type of object being represented on the page, such as a sports team or business.
og:url	The URL to the information page for the object.

Let’s look at a practical example of how metadata is represented on a Yelp product review page for the Restaurant at Wente Vineyards in Livermore, CA:

<html xmlns:og="http://ogp.me/ns#"> <head> <title>The Restaurant at Wente ...