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
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&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:
<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:discbut in reverse.
music:song:track– This is the same as
music:album:trackbut 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:song- Identical to the ones on music.album
music:creator- The creator of this playlist.
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:series- video.tv_show - Allows you to state the series the episode belongs to.
A multi-episode TV show. The metadata is identical to
A video that can’t be categorised using the above tags. The metadata is identical to
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
Let’s take some examples:
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.
There are also some objects that don't fit into a vertical but are still used. For example:
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: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.
- 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.
- 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.