How to Use Facebook's Open Graph Tags on a Website
When a user likes your Website or page, a notice will appear on their and their friends wall. You can easily control the Title, Description, Image and more by adding Open Graph tags to your pages and increase online traffic via your social media channels.
What Is the Open Graph Protocol?
The Open Graph Protocol enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world things - things like movies, sports teams, celebrities, and restaurants. Including Open Graph tags on your Web page, makes your page equivalent to a Facebook Page.
This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the "Likes and Interests" section of the user's profile, and you have the ability to publish updates to the user. Your page will show up in the same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content. The structured data you provide via the Open Graph Protocol defines how your page will be represented on Facebook.
How Are Open Graphs Added to a Website?
Open Graph tags are added to your Website via Meta Tags. The type of tags used should represent the content of the page. For example, Your home page tags would contain content about the site as a whole, while tags on a event page or blog post would focus on the nature of the story.
There are also specific tags for pages that focus on people, business/organizations, products, movies, locations, contact information & groups. Facebook's complete documentation can be found here.
Getting Started
The first thing you need to do is replace your <html> tag.
Example of a standard <html> tag:
<html xmlns="http://www.w3.org/1999/xhtml">
Change the <html> tag to:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
Add a Like Button
Next you need to (if you haven't already done so) add a Facebook Like button to your pages. The Like button can be simply added with an <iframe>, or you can use the JavaScript SDK for the <fb:like> XFBML tag:
<fb:like href="https://developers.facebook.com/" width="450" height="80"/>
Add Open Graph Meta Tags
The following four tags are required by Facebook:
- og:title
- og:type
- og:image
- og:url
Optionally, but recommended, add these additional tags:
- og:description
- og:site_name
- fb:app_id (learn how to create a Facebook app here)
<meta property="og:title" content="About Our Company"/> <meta property="og:type" content="article"/> <meta property="og:url" content="http://www.mysite.com/article/"/> <meta property="og:image" content="http://www.mysite.com/articleimage.jpg"/> <meta property="og:site_name" content="My Company Name"/> <meta property="fb:app_id" content="1234567890987654321"/> <meta property="og:description" content="A description of our services and company profile."/>
It is important to familiarize yourself with the op:type tag. Review Facebook's documentation and discover how the Open Graph Protocol can help you!
By Robert Valcourt