Forgot Your Password? or not registered?

Home » Blog » Facebook open graph META tags

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, Description and 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 property="og:image" content="http://mysitename.com/img/myimage.png"/>

Your image size must be at least 200x200px in a PNG, JPEG or GIF format with a maximum file size of 5MB.


og : video

The video META tag lets Facebook know you’re sharing a URL to a video file. Here’s what the code should look like:

Meta Tag:   <meta property="og:site_name" content="YouTube" />

Meta Tag:   <meta property="og:url" content=" http://www.youtube.com/watch?v=qoYTDv85fDA&list=PLbpi6ZahtOH5aRiJIcChrmE_1RL3lUMgJ&index=1" />

Meta Tag:   <meta property="og:title" content="Feel the Ride" />

Meta Tag:   <meta property="og:type" content="yt-fb-app:playlist" />

Meta Tag:   <meta property="og:image" content="http://i2.ytimg.com/vi/qoYTDv85fDA/hqdefault.jpg?feature=og" />

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." />

Meta Tag:   <meta property="og:video" content="http://www.youtube.com/v/videoseries?version=3&amp;list=PLbpi6ZahtOH5aRiJIcChrmE_1RL3lUMgJ" />

Meta Tag:   <meta property="og:video:type" content="application/x-shockwave-flash" />

Meta Tag:   <meta property="og:video:width" content="398" />

Meta Tag:   <meta property="og:video:height" content="224" />

Meta Tag:   <meta property="fb:app_id" content="87741124305" />

 


og : title

This tag lets you control the title of your page, as you’d like it displayed on Facebook:

<meta property="og:title" content="This is my title"/>


og : description

This must be one of the most important tags as it can make the difference between tens of clicks or none at all. So, make sure you make it catchy with no more than 300 characters.

<meta property="og:description" content="This is my catchy description...." />


og : url

This tag will specify the canonical URL that will be associated with your content i.e. the link.

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


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.

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

Here are some examples of Open Graph types you can use:


Music

<meta property="og:type" values:

music.song – for songs

  • music:duration - The length of the song in seconds.
  • music:album  - The album that contains this song
  • music:album:disc - Which disc of the album this song is from
  • music:album:track – track number of the song on the album which is relative to the disc number
  • music:musician - The musician that made this song.

music.album – for albums

  • music:song - The song on this album. This is a URL of a page with og type music.song such as Spotify
  • music:song:disc -  This is the same as music:album:disc but in reverse.
  • music:song:track – This is the same as music:album:track but in reverse.
  • music:musician - The musician that create this song such as a Spotify URL
  • music:release_date - The date the album was released in ISO 8061 format

music.playlist

  • music:song - Identical to the ones on music.album
  • music:song:disc
  • music:song:track
  • music:creator - The creator of this playlist.

Video

video.movie - for movies

  • video:actor – Allows you to state the actors in the movie.
  • video:actor:role – Allows you to state the role the actor played.
  • video:director – Allows you to state the directors of the movie.
  • video:writer - Allows you to state the writers of the movie.
  • video:duration - Allows you to state the movie's length in seconds.
  • video:release_date - Allows you to state the date the movie was released.
  • video:tag - Allows you to tag any words associated with the movie.

video.episode - for episodes

  • video:actor - Identical to video.movie
  • video:actor:role
  • video:director
  • video:writer
  • video:duration
  • video:release_date
  • video:tag
  • video:series - video.tv_show - Allows you to state the series the episode belongs to.

video.tv_show

A multi-episode TV show. The metadata is identical to video.movie.

video.other

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.

  1. <meta property="og:latitude" content="37.416343"/>
  2. <meta property="og:longitude" content="-122.153013"/>
  3. <meta property="og:street-address" content="1601 S California Ave"/>
  4. <meta property="og:locality" content="Palo Alto"/>
  5. <meta property="og:region" content="CA"/>
  6. <meta property="og:postal-code" content="94304"/>
  7. <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
  • business:contact_data:website - The website address for this business
  • business:hours - Working hours for this business
  • business:hours:day - A day in week
  • business:hours:start - Opening time
  • business:hours:end  - Closing time

Here’s what the code should look like:

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# business: http://ogp.me/ns/business#">

<meta property="fb:app_id" content="YOUR_APP_ID" />

  <meta property="og:type" content="business.business" />

  <meta property="og:url" content="Put your own URL to the object here" />

  <meta property="og:title" content="Sample Business" />

  <meta property="og:image" content="https://fbstatic-a.akamaihd.net/images/devsite/attachment_blank.png" />

  <meta property="business:contact_data:street_address" content="Sample Contact data: Street Address" />

  <meta property="business:contact_data:locality" content="Sample Contact data: Locality" />

  <meta property="business:contact_data:postal_code" content="Sample Contact data: Postal Code" />

  <meta property="business:contact_data:country_name" content="Sample Contact data: Country Name" />

  <meta property="place:location:latitude" content="Sample Location: Latitude" />

  <meta property="place:location:longitude" content="Sample Location: Longitude" />


Activities - fitness

  • fitness.bikes - An action representing someone cycling a course.
  • fitness.walks - An action representing someone walking a course.
  • fitness.runs- An action representing someone running a course.

Other objects

There are also some objects that don't fit into a vertical but are still used. For example:

article

  • article:published_time -  When the article was first published in ISO 8601 format
  • article:modified_time -  When the article was last changed.
  • article:expiration_time -  When the article is out of date after.
  • article:author -  Writers of the article.
  • article:section -  A high-level section name. E.g. Technology
  • article:tag -  Tag words associated with this article.

profile - Namespace URI: http://ogp.me/ns/profile#

  • 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

Always test the META tag you’re using to ensure they’re working correctly. Just use the Facebook Debugger tool to test each of them: http://developers.facebook.com/tools/debug.


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.

  1. Facebook Open Graph Meta in WordPress - a simple plugin that adds Facebook Meta Data in WordPress to prevent thumbnail issues, wrong title issues, wrong description issues, etc.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

comments powered by Disqus
Awwwards Nominee
+

Need a web design quote?

Get 4 free web design quotes from
UKWDA approved members.

Get Quotes