Facebook Open Graph Protocol Basics

What

In a continued effort to help our business customers succeed in search engine optimization (SEO) and social media we continue to help you learn about how to make your website better. As part of a recent client website update and part of our customized SEO monthly plan we took their existing business BLOG and implemented Facebook's Open Graph protocol. This protocol allows you to have control over how images and descriptive text can appear on Facebook. Using this protocol you can control a certain level of customization over how information is carried over to Facebook from non-Facebook websites.

As part of using the Open Graph protocol you also help define the functionality of any Like buttons when you include them on your page. To include a Like button on your page Facebook makes it easy by filling out a few simple answers on a form they provide. You can view this form at https://developers.Facebook.com/docs/plugins/like-button. Along with the Like button you also can add a Share button, Send button, etc.

Open Graph Structure

The Open Graph META tags are all prefixed withog: and followed by a definedtagName. Using the format defined below you can inform Facebook what images, text, and more to display when sharing a specific webpage.

<meta property="og:{tagName}" content="{tagValue}" />

Common Facebook Open Graph META Tags

Image

The image META tag lets Facebook know what the primary image is that should be shown when linking to a specific page. The image that is recommended by Facebook is that the image should be square, a minimum of 600px wide, and in the standard Facebook supported formats (jpg, png, etc.).

<meta property="og:image" content="http://domainName/Images/MyImage.png" />

Title

The title to accompany the URL for the page. For a BLOG this is typically the title to the BLOG.

<meta property="og:title" content="Page Title"/>

Url

The URL should be the canonical address for the given page that is being referenced.

<meta property="og:url" content="http://domainName/PageName"/>

Site Name

Provides Facebook the name that you would like your website to be recognized as when being linked.

<meta property="og:site_name" content="My Company Name Blog"/>

Type

Defines the type of page that you would like your website to be categorized by. A list of common types for types can be found from Facebook at https://developers.Facebook.com/docs/reference/opengraph/.

<meta property="og:type" content="article"/>

More Complex Facebook Open Graph META Tags

Arrays

It is possible to have multiple values defined for a given page. You define this by having multiple versions of the META tag.

<meta property="og:image" content="http://domainName/Images/Image1.jpg" />
<meta property="og:image" content="http://domainName/Images/Image2.jpg" />
<meta property="og:image" content="http://domainName/Images/Image3.jpg" />

Structured Properties

Not only can you include arrays for multiple items for a given property but defined structure for the item that is defined. You do this by putting the additional parameters after the root element which is then parsed.

In the example below you see three defined types of images. The first image (Image1.jpg) is followed by a defined width and height of 600. The second image (Image2.jpg) has no additional structured properties. The third (Image3.jpg) has a defined structured property height of 1000 with no width defined.

<meta property="og:image" content="http://domainName/Images/Image1.jpg" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />
<meta property="og:image" content="http://domainName/Images/Image2.jpg" />
<meta property="og:image" content="http://domainName/Images/Image3.jpg" />
<meta property="og:image:height" content="1000" />


{{BLOGDETAILVIDEO}}