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.
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
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 Vineyards - Livermore, CA</title>
<meta property="og:url" content="http://www.yelp.com/biz/gATFcGOL-q0tqm9HTaXJpg">
<meta property="og:type" content="restaurant">
<meta property="og:title" content="The Restaurant at Wente Vineyards">
<meta property="og:image"
content="http://media2.px.yelpcdn.com/bphoto/iVSnIDCj-fWiPffHHkUVsQ/m">
...
</head>
...
</html>In addition to the required tags, there are several tags whose implementation is optional but recommended for any site. These are listed in Table 10-2.
Table 10-2. Optional page metadata properties
Let’s go back to our previous Yelp example. Should Yelp wish to extend that review with the additional metadata properties from Table 10-2, it might look like this:
<meta property="og:site_name" content="Yelp"> <meta property="og:description" content="The award winning Restaurant at Wente Vineyards is truly a feast for the senses! The open architecture is inviting and the air alive with rich, savory aromas.">
Specifying Yelp as our site name indicates that this page is a
small piece of the overall entity graph that is Yelp.com, comprising many reviews. The
site_name offers a link to the
richer social graph, and the description provides more detail about a
page.
The Open Graph protocol supports the ability to define geographical information within the metadata tags. This is a valuable option for any site that is representing something with a real-world location, such as the restaurant we just looked at in the Yelp example.
There are a number of properties available for defining geographical information, from address information to latitude and longitude. These are specified in Table 10-3.
Table 10-3. Geolocation properties
Going back to our previous Yelp example, let’s extend the page metadata tags with our new geographical information:
<html xmlns:og="http://ogp.me/ns#"> <head> <!-- INSERT: Required OGP Tags --> <meta property="og:latitude" content="37.6246361"> <meta property="og:longitude" content="-121.7567068"> <meta property="og:street-address" content="5050 Arroyo Rd" /> <meta property="og:locality" content="Livermore" /> <meta property="og:region" content="CA" /> <meta property="og:postal-code" content="94550" /> <meta property="og:country-name" content="USA" /> ... </head> ... </html>
These tags are tremendously valuable for any site that represents a physical location, such as a business. It not only provides immediate address information, but it also integrates latitude and longitude coordinates that can be used to plot locations on mapping products or provide directions from a viewer’s current location.
Taking the available metadata even further, let’s assume that you are a business owner
or that you provide some type of content where you want people to be
able to contact you or your company. This is where contact <meta> tags come into play.
Using these tags (shown in Table 10-4), a site owner can include main contact information that people viewing the site can use.
Table 10-4. Contact properties
If we expand even further on our previous Yelp restaurant review page to now include contact information, the new section may look something like this:
<html xmlns:og="http://ogp.me/ns#"> <head> <!-- INSERT: Required OGP Tags --> <meta property="og:email" content="[email protected]" /> <meta property="og:fax_number" content="925-456-2301" /> <meta property="og:phone_number" content="925-456-2300" /> ... </head> ... </html>
Implementing contact information in conjunction with geographic data can provide enough data for any site to define a profile page for your business, such as how Yelp supplements its data with business contact information and an associated map to show the location.
If you want to attach video data on your page and have it
reflected in the Open Graph protocol metadata, you’ll employ the og:video tag and its children.
There are a number of tags available for specifying a video file, as shown in Table 10-5.
Table 10-5. Video properties
If we look at what these features look like as <meta> tags, we can see the
implementation potential:
<html xmlns:og="http://ogp.me/ns#"> <head> <!-- INSERT: Required OGP Tags --> <meta property="og:video" content="http://www.example.com/keyboardcat.flv" /> <meta property="og:video:height" content="450" /> <meta property="og:video:width" content="550" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> ... </head> ... </html>
Using video metatagging for individual pages can help to surface videos underneath a root site, helping site viewers more easily discover its video content.
Much like the og:video tag,
og:audio allows a site promoting audio content to tag information about the
music being played on a particular page. Table 10-6 lists the available tags.
Table 10-6. Audio properties
Here’s how these <meta>
tags look in context:
<html xmlns:og="http://ogp.me/ns#"> <head> <!-- INSERT: Required OGP Tags --> <meta property="og:audio" content="http://www.example.com/song.mp3" /> <meta property="og:audio:album" content="My amazing album" /> <meta property="og:audio:title" content="The greatest song ever" /> <meta property="og:audio:artist" content="The best band" /> <meta property="og:audio:type" content="application/mp3" /> ... </head> ... </html>
Implementing tagging for individual audio tracks on pages provides the same benefits as it does for video tags. You are able to surface individual pages more readily to individuals who are searching your content and provide them with the general information they need to get an idea of what is offered on your site.
Every element in an entity social graph is by definition a type of object. At a base level, that’s all an entity is—an object describing the user interaction and any relevant information about it.
Defining an object type within the Open Graph protocol adds the entity to a specific section of the site (i.e., organizes the site by category). You define an object type using the following syntax:
<meta property="og:type" content="activity" />
The property value remains og:type, but you’ll change the content value to whatever object
type best defines the page. The types can be further grouped into
individual categories. For example, the first category we’ll look at,
activities, should be used when the page content relates to sporting
events, outings, physical activities, conferences, or the like.
Activities | ||
|---|---|---|
|
| |
The next category, businesses, encompasses sites that contain information about companies, such as restaurants, company websites, or any other business presence on the Web.
Businesses | ||
|---|---|---|
|
|
|
|
| |
Use group types when delivering content to people who are interested in specific sporting information or certain causes. Pages that might include these object types are football, baseball, or hockey team or league sites; sites that are attempting to gain community support for causes or events, such as marches for cancer; and rally or protest sites.
Groups | ||
|---|---|---|
|
|
|
Organization object types are intended for groups that are not included under businesses, such as schools, nonprofits, and federal or local government sites.
Organizations | ||
|---|---|---|
|
|
|
|
| |
If the site content is devoted to a specific person, using the people object types will ensure that the site is placed in the appropriate category within the graph. This category may include fan pages, sites including biographical data for individuals, or campaign sites for political candidates.
People | ||
|---|---|---|
|
|
|
|
|
|
Place objects target pages that contain geographical, map, or location-based data. This may include landmarks such as the Statue of Liberty, city informational websites, or sites that provide information on specific countries.
Places | ||
|---|---|---|
|
|
|
Products and entertainment objects cover a number of the
remaining page attributes and include items like books, movie sites,
and TV shows. Should the product page include a UPC or ISBN, you may
use the og:upc or og:isbn object types to better specify the
page content.
Products and entertainment | ||
|---|---|---|
|
|
|
|
|
|
|
|
|
Finally, the websites group is used to denote many social media outreach channels that do not fit into the products and entertainment category. These include articles, blogs, and generic websites. The website type can be used as a generic attribute for sites that do not fit in above categories.
Websites | ||
|---|---|---|
|
|
|
Using this extensive list of object types, you can specify the kind of information contained within your page, properly categorizing the elements of a user’s online entity graph and thus providing a rich extension to the standard definition of a social graph.