Simply, Facebook Open Graph allows you to define relevant details about your blog / website and its pages. It's about personalizing your web pages to deliver rich set of information to those who interested. Even such information can be very useful if you are gonna implement Facebook social plugins too. Would you like to know more?
Search Engines and Facebook Plugins
For example, human readers or visitors can decide either your site is a blog or static website. But when it comes to search engines and such tools crawling your web pages, they might need specific infromation to decide if yours is a blog or website. Now Open Graph tags come in handy to specify that if you would like to. Further, you can specify a custom title, description, image and so on, for your web pages too. Got the picture? I believe it makes sense as you proceed to the steps below too.
Again, Facebook itself make use of it. Facebook social plugins use the Open Graph tags implemented on your blog / website to personalize the experience for you and your visitors. For example, if you have Facebook comment plugin installed on your site, the moderation settings won't be available if you can't convince the plugin that you are the moderator of your site. Hence you can use an Open Graph tag to convey that you are the admin / one of the admins of your site eligible for moderating comments being left. Once Facebook comment plughin could identify you as the an admin, it will show moderation options for you but none others whose not specified via meta tag.
Keep in Mind
Did you come to know that Open Graph tags come in handy for you? You can proceed to steps below and learn how to make use of the basic tags for your blog or website.
Before You Go:
To implement Open Graph meta tags, you need an Facebook Application ID. Read How to Create a Facebook Application for Your Site.
1. Search for following tag in your page's source code.
2. Now add following Open Graph meta tags right before </head> tag, after filling your required information. You should add these tags for each of your website pages.
Color Indication Information:
- Your Page Type
Specify the type of your page here. It depends on the content or type your page. You can find available types here - Open Graph Object Types.
Generally to represent an entire blog or website, you should add below relevant tag to your homepage.
Now you homepage is done. If you have transient content on other pages (article, blog posts, audio, video), you should specify below tag for each page.
- Your Facebook User ID
Add your Facebook User ID here. This will add Facebook admin privileges for your site.
* If you don't know your user id, you can find your Facebook User ID by appending your Facebook username to below URL. If you don't know your Facebook username, you can find your username from http://www.facebook.com/username.
* If you don't have a Facebook username, you can claim one. Read How to Claim a Username in Facebook.
- Your Website or Blog Title
Specify your website or blog title here.
- Your Application ID
Application ID of your Facebook application created for your site. You can find your Facebook Application ID aka API key on Facebook Applications page correspond to your application.
- Page Title
Specify your page title here. It is considered as optional because Facebook will crawl for your page title automatically via title meta tag specified on your page. If you can edit your pages individually and would like to specify this tag, you can add this one.
<meta expr:content="data:blog.title" name="og:title" />
<meta expr:content="data:blog.pageName" name="og:title" />
- Page Description
This is your page description aka snippet of your page. It can use to describe your page and content briefly. However if you have description meta tag implemented in your page, Facebook will use it too. So this meta tag is not compulsory. But if you prefer, you can specify it for each of your pages.
- URL of Page/Post
Specify the URL of Page here. However it's not compulsory 'cause Facebook will detect your current page URL automatically.
- Post Image URL
Specify an URL of image to represent your page here. It will mostly the main image of your page. So when users share your page on their Facebook profile, this image will be added with the post. If you didn't specify this tag, plugin will automatically extract an image from current page.
<meta content='Image URL' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
* After adding Open Graph meta tags, you can use Facebook Debugger to see how Facebook treat your pages when Facebook crawl your pages.
* If you would love to learn more about Open Graph protocol, visit The Open Graph protocol website.