Thursday, 24 October 2013

How To Use Facebook Open Graph Meta Tags

So you want to know about Facebook Open Graph Meta Tags... Welcome to the detailed tutorial on Facebook Open Graph Meta Data... It will be great to have a better way to connect with your users... Add Open Graph in your Blog... Detailed tutorial on adding open graph in Blog or website

You must have come across the use various Meta Tags. These Tags play an important role in SEO. You also know the use of Google Authorship to create rich snippet in Google search. Some of you may be using Meta Keywords to gain some rank in search engines. Today, I will show you the use of Facebook Open Graph Meta Data. Facebook open graph is not for SEO. But if used in proper way it can play a role in creating rich snippets of your blog in Facebook. Keep in mind Facebook Meta Data isn’t for increasing Website rank. Before we proceed to the tutorial on adding Facebook Open Graph Meta Data in your blog we must know the use of Facebook Meta Data.

How To Use Facebook Open Graph Meta Tags
Facebook Open Graph Meta Data

Facebook is the world’s most widely used social network. They are developing many tools day by day and Facebook Open Graph is the one. By inserting these data you get full control on many things like:
  • You can manually write the description. Whenever users will share your blog post than the description that you have written manually will be shared. So, you will get a chance to impress your Facebook audience by writing beautiful description.
  • You can choose which title will be shown whenever you post will be shared on Facebook.
  • You can attach image link of your post which will best be best to impress users.
  • You can Customize the post title that will appear after sharing.
  • You will get better way to categories your posts.

These things will really help you in creating beautiful social relationship with your users. And these will give you better chances of improving social experiences of your site. There is many more advantage of using Facebook Open Graph. I will explain you each Meta Data one by one. I will also explain you how to implement these Meta Data in your Website. Let us now discuss on Facebook Open Graph Meta Data. Don't Worry I will not be technical. I will just make you familiar with the use of each Facebook Meta Tag.

You will enter you blog posts title here.You can write the post title as same as your posts. But if you want something different than you can also do it. But make sure the title is related to the topic which you have written in your post. You can see one example below:
<meta content='How To Use Facebook Open Graph Meta Data' property='og:title'/> 
This will be the URL of your blog post. Make sure the URL you are writing is of your blog post and you haven't done mistake while writing the URL in Facebook Tags. It's very important. Have a look at the code below to know how to write "og:url" in your blog.By using this tag, you will ensure that all shares go to one only one URL versus multiple URLs, which should help in creating your Facebook Edgerank.
<meta content='' property='og:url'/>
You will write here the type of post you are writing such as entertainment, infotainment, lifestyle, blog, article etc. Want to see an example to know how to write this Open Graph Meta Tag. See Below.
<meta content='article' property='og:type'/>
You you want to see the full list of og types than you can see it here

Now comes the site name. You will write your site name here. You can have a little different site name but it is recommended to write the site name as same as you have written in your blog. Here is the example of this meta tag.
<meta content='Hackers &amp; Thieves' property='og:site_name'/>
This tag will ensure that image always gets attached whenever the link will be shared on Facebook. Isn't it will be good idea to have an image in your post that will be shared in Social sites. It will give your users better understanding of your blog. One example for this Meta Data. See the tag below.
<meta content='' property='og:image'/>
I have written different Image URL from this Blog Post. While writing image URL address make sure the image belong to your post. But if you want different image to appear on sharing than you can write the URL of that image. There are some requirements on image. the image should have to be at least 50px by 50 px. Make sure your image is not more than 5 MB. It will also increase your page loading time.

Write a short description of your post. It will appear below your post title in Facebook. Try to impress your users by writing a beautiful words. This is as same as you write in your blogs meta description. You can write the same description as you have written in your blogs Description. But it will a good idea to have different description for social sites and your Website description. But make sore the description is related to your blog post. Now the time for example.
<meta content='Facebook is really a  best social networking site... And making good social experiences with your users will make your social experience much better... You will be able to connect with your users in a better way...' name='twitter:description'/>
Don't write very large description as your full description is not going to appear in Facebook.

If you any app created in Facebook than you can write your app id here. It is not necessary to write the app id. But it will always be good idea to have a app in Facebook. If you use Facebook like box or any other Facebook plugin than it the chance that you have created a Facebook App. If you want to connect your app with Facebook open graph meta tags than write your app id here. It will not be visible to users. It is up to you to write or not to write. You can see the example below.
<meta content='165582850242579' property='fb:app_id'/>
In the above example I have written my App id. Replace it with your App id.

Do you want to connect your official Facebook page with Open Graph than this tag will do it for you. It is always great to have a better way to connect with users. It will make you familiar with your sites users and help in better way to connect with your audiences. Look at the example below to know How to connect your Facebook Fan Page with Open Graph.
<meta content='441585125873301' property='fb:admins'/>
Make sure you have replaced the Facebook Page id in blue with your Facebook Fan page id. If you don't know how to get your Fan Page id than go to the link as described below. Don't forget to replace "YourUsernameHere" with your Fan Page Username.

That's All about the Facebook Open Graph Meta Tags. I think its enough explanation to make you familiar with Open Graph.
Am I being technical. Are you facing any problem in understanding these Meta Data than feel free to ask me. Also, write your experiences in the comment below. I will love to here from you.

No comments:

Post a Comment