Facebook Open Graph META Tags

http://davidwalsh.name/facebook-meta-tags

It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One problem I've always found with sharing URLs on Facebook is that you often have no control over the image and description text that accompany the URL.  Had I known about Facebook Open Graph API, I would've known the solution to that problem.

Facebook's Open Graph protocol allows for web developers to turn their websites into Facebook "graph" objects, allowing a certain level of customization over how information is carried over from a non-Facebook website to Facebook when a page is "recommended", "liked", or just generally shared.  The information is set via custom META tags on the source page.  Let's take a look at the different META tags Facebook uses to allow you to customize how your website is shared.

View Demo

All of Facebook's Open Graph META tags are prefixed with og:, then continued with more specific the specific property to be set.  The data relative to the property set goes within the content attribute:

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

Using this simple META tag strategy, you can tell Facebook what images, text, and more to use when sharing your webpage.  Let's review a few key META tags!

Facebook Open Graph Meta Tags

image

The image META tag directs Facebook to use the specified image when the page is shared:

<meta property="og:image" content="http://davidwalsh.name/wp-content/themes/klass/img/facebooklogo.png"/>

It's best to use a square image, as Facebook displays them in that matter. That image should be at least 600px wide in any of the usually supported image forms (JPG, PNG, etc.)

title

The title to accompany the URL:

<meta property="og:title" content="Facebook Open Graph META Tags"/>

In most cases, this should be the article or page title.

url

The URL should be the canonical address for the given page:

<meta property="og:url" content="http://davidwalsh.name/facebook-meta-tags"/>

Familiarize yourself with the canonical LINK type if you aren't aware of its purpose -- it could help your SEO out greatly!

site_name

Provides Facebook the name that you would like your website to be recognized by:

<meta property="og:site_name" content="David Walsh Blog"/>

This is very useful as Facebook may have no way of knowing outside of this META tag.

type

Provides Facebook the type of website that you would like your website to be categorized by:

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

Read the complete list of website types to best categorize your website.

More Facebook Open Graph META Tags

The META tags provided above are just a few of the special Open Graph META tags sniffed by Facebook.  Open Graph also specified META tags for:

• Facebook Application-specific settings, if your website also has a Facebook app
• Activities
• Businesses
• Groups
• Locations

Visit the Facebook Open Graph page to retrieve more details about each META tag and its intended information.  Facebook also provides a Lint tool to help you validate what you're sending!

View Demo

The Open Graph protocol is a great way to not only share a page's information but to also control how your site's information is shared.  Using these META tags could be the difference in attracting just a few visitors from Facebook or attracting loads of visitors because your shared links provide useful keywords and imagery!