Facebook open graph META tags

Written by Rahul Mistry on 12 August 2013

You may be aware by now that, if used right, Facebook can be a major source of traffic for your website. Many businesses are already steering their consumers towards their Facebook Fan pages using “Like” and “Recommend” widgets on their homepage and product pages. This makes it easier for them to keep their customers up to the date with the latest news, deals or products.

If you have a Facebook Like, Recommend or Share widget on your site, you’ve probably noticed that when users share URLs, a notice appears on their wall and in their friends news feeds. Let’s take, for example, a product from Amazon.co.uk:

Now you can control how this snippet appears by using Open Graph tags helping you to specify the Title, Site Name, Descriptionand Image you’d like to be displayed when a user is sharing a specific web page, whether it’s a product or blog post.

You obviously don’t want a product to show up on Facebook with the wrong image or with a description coming from the wrong page.

So, in other words, Facebook’s Open Graph allows you to turn your website into objects and control how information from your site is displayed on Facebook when a page is liked, recommended or shared. This information can easily be set using custom META tags.

Let’s take a look at the different META tags Facebook uses to allow you to customise the information that is being shared on its website and see how you can add them to your site.

Adding Facebook Open Graph META tags to your site

First, you will need to replace the <html> tag from

<html xmlns="http://www.w3.org/1999/xhtml">

to:

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:og="http://ogp.me/ns#"

xmlns:fb="https://www.facebook.com/2008/fbml">

Below are the most common Open Graph tags you will encounter with a short description and code for each.

og : image

The image META tag specifies which image you’d like Facebook to use when your web page is shared:

Meta Tag: <meta property="og:description" content="From cross-country treks to backyard buzz rides, these cyclists prove that all the gear you need for an adventure--and an eye-popping video--is a pair of wheels, a video camera, and a downhill run." />

og : url

og : site_name

The site_name META tag provides Facebook with the name that you would like your website to be recognized by:

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

og : type

This META tag lets you describe the type of content included on a specific page. For example, it can be a blog, an article, a product, a TV show and more. Think of them as categories. Simply replace the words between the quotation marks in “content=” with the tag you want to use. E.g.

A video that can’t be categorised using the above tags. The metadata is identical to video.movie.

Location

With local search on the rise, Open Graph has also added location-based tags that you can use. These will help with Facebook Places when users are searching for specific information in a certain area, city or country so go ahead and use it.

<meta property="og:latitude" content="37.416343"/>

<meta property="og:longitude" content="-122.153013"/>

<meta property="og:street-address" content="1601 S California Ave"/>

<meta property="og:locality" content="Palo Alto"/>

<meta property="og:region" content="CA"/>

<meta property="og:postal-code" content="94304"/>

<meta property="og:country-name" content="USA"/>

Even more Facebook Open Graph META tags

The META tags listed above are compulsory but there are many more optional ones you can use, such as META tags for:

Facebook Applications

Activities

Businesses

Groups

Let’s take some examples:

business.business

This META tag can be used to represent a place of business that has a location, operating hours and contact information.

Below are the properties you can include:

business:contact_data - Contact data for this business

business:contact_data:street_address - The number and street of the postal address for this business

business:contact_data:locality - The city (or locality) line of the postal address for this business

business:contact_data:region - The state (or region) line of the postal address for this business

business:contact_data:postal_code - The postcode (or ZIP code) of the postal address for this business

business:contact_data:country_name - The country of the postal address for this business

business:contact_data:email - An email address to contact this business

business:contact_data:phone_number - A telephone number to contact this business

business:contact_data:fax_number - A fax number to contact this business

profile:first_name - A name normally given to an individual by a parent or self-chosen.

profile:last_name - A name inherited from a family or marriage and by which the individual is commonly known.

profile:username - A short unique string to identify them.

profile:gender - enum(male, female) - Their gender.

fb:admins META tag

If you’re using Facebook for business, then you should also be monitoring and adapting marketing strategies based on who is engaging with your content via Facebook. Use the <meta property=”fb:admins” tag to get more information on active engagement clicks such as likes and shares as well as passive engagement such as impressions and referral clicks. First thing you need to do is verify your domain and associate Insights with a specific Facebook account. Generate a meta-tag by visiting www.facebook.com/insights and follow the steps.

Testing META tags

Popular WordPress plugins for Facebook Open Graph

Like all META tag, Facebook’s Open Graph tags appear in the head section of an HTML page. If you’re using WordPress, there are loads of plugins that enable you to configure the metadata without having to manually edit your custom functions files.

NextGEN Facebook Open Graph - This plugin adds complete Open Graph meta tags for Facebook as well as Google+, Twitter, LinkedIn, etc., plus optional social sharing buttons in content or widget.

WP Facebook Like Send & Open Graph Meta – Use this plugin to add Facebook Like and Send buttons in your WordPress posts or pages as well meta tags to show the right thumbnail image, or the right title and description.

Wonderm00n's Simple Facebook Open Graph Meta Tags – This plugin adds Facebook Open Graph Tags into your WordPress Blog/Website. Plus, it allows the user to choose which tags are, or not, included and also the default image if the post/page doesn't have one.

WP Facebook Open Graph protocol – A nice Open Graph plugin that adds meta tags to your WordPress site. This plugin works on Facebook, Google Plus, and Linkedin.

About the author:Rahul Mistry works for 123-reg as a content writer. He loves all things digital and when he’s not writing he is usually browsing the net to find funny content. You can contact him on Google+ and Twitter.