Friday, 25 October 2013

How To Add Facebook Open Graph Meta Data In Blogger

Yes, you can add facebook open graph meta data in your Blogger blog... There are two methods to insert Open graph meta tags in Blogger... Let's proceed to detailed tutorial on adding Facebook Open Graph Meta data in Blogger...

I have already shared you how to use Facebook open graph Meta Data. In my previous tutorial I showed how important it is to have Open Graph and give you information about each and every meta data used in Facebook. It increases your social experience much better. And it will really help you in increasing your users or audience in Facebook. To know more about the use of open graph and its details please go to the link specified above.

Blogger is one of the most used blogging platform and day by day its users is increasing. It is because of the simplicity it provides to the users. You don’t need much or any technical knowledge to start your blogging career. And with a little programming knowledge you can give your Blogger blog awesome feel. Today I will show you How to Add Facebook Meta Data in Blogger. It is not much difficult task to insert Facebook Open Graph in Blogger. There are two ways to insert Open Graph in Blogger. I will provide you detailed information in adding Facebook open graph Meta data in Blogger. Let’s start the detailed tutorial.
Add Facebook Open Graph Meta Data in Blogger

As I have said above there are two ways of adding open graph in your Blogger blog. One is fully automatic and you will not need to write any title or description. It will automatically generate description, titles, images, etc. But you will need to add Meta description in every page if you have not added before. And why not add it if it plays a role in SEO. Yes, Meta Description plays a role in SEO may be not very much but a little and it is better than having a little than not to have anything. I will describe you second method a little later in this tutorial. Let’s have a quick look at the Open Graph Meta Tags that we are going to use while adding Meta Data in Blogger. For detailed information on these tags or Open Graph please go to the link given in first paragraph.

Og:title - It will be the title of your Blog page. It will be automatically generated if you will choose to use first method.

Og:description - It is the description of your Blog page as same as you use in writing Meta Description of your page.

Og:type - It’s the type of post you are writing. Such as article, blog, song, album, book, activity etc. By default I have set it to article in first method of inserting Open Graph.

Og:site_name - Now, it is the name of your blog.

Og:url - Now comes the URL of your blog page. It may not be smart idea to insert the URL but it is important.

Og:image – It will provide Facebook the image of your page. If you will not insert this in your Blogger blog than sometimes image may not appear when users will share your blog. You can customize the image you want to add.

Fb:app_id – If you have created any app on Facebook than you can add the id of that App.

Fb:admins – If you want to get more insights of on your Facebook page than it will be a very good idea to add the id of your Facebook Fan Page. It tells Facebook that you are the admin of the Website or the Blog.

Now as you have learned something about the Tags used in Facebook Open Graph. Now we can proceed to the tutorial further on adding Open Graph on your Blogger Blog.

Before we can proceed to know how to add Facebook open graph in your Blogger Blog make sure you have created a backup of your Template. After creating Backup you can proceed to the below easy steps:

First Method:

Go to Blogger home and login with your Google/Blogger Account.
Now go to the Blogger dashboard.
In the Blogger Dashboard. Click on Template.
Now I the Template page you have to click edit HTML.
After you go to the HTML page search for the code given below:


Quick Tip: It is generally at the first or second line.

If you are still facing difficult to find the above code than you can see the image below:

See text in curved circle

Now just before the above code Paste the Open Graph code given below:


After adding the above code in your Blogger blog search for the “<head>” tag without quotes. Now just below the opening “<head>” tag paste/add the code given below:

<b:if cond='data:blog.pageType == &quot;item&quot;'><meta property="og:title" expr:content="data:blog.pageName"/><meta property="og:url" expr:content="data:blog.canonicalurl"/><meta property="og:type" expr:content="article"/></b:if><meta property="og:site_name" expr:content="data:blog.title"/><b:if cond='data:blog.postImageThumbnailUrl'><meta property="og:image" expr:content="data:blog.postImageThumbnailurl"/><b:else/><meta property="og:image" expr:content="YourLogoURL"/></b:if><b:if cond='data:blog.metaDescription != &quot;&quot;'><meta property="og:description" expr:content="data:blog.metaDescription"/></b:if><meta property="fb:app_id" content="YourAppID"/><meta property="fb:admins" content="YourPageID"/>

Don't forget to replace the text highlighted red. If you don’t want the Page id or App id in your blog than you can remove that two line of code.

Save Template. You have just inserted the Open Graph in your Blogger blog with first method. If you want more customization and editing options on Open Graph you have to follow the second method.

Second Method:
As I have discussed in the previous post that you can customize each and every description in the Open Graph. And this method will help you in doing this. But you need to write the description or title for every page. Let's know this method to add Open Graph on your Blogger Blog.

Now as you are in your HTML page of your Blogger Blog. Search for the code given below:

<b:include data='blog' name='all-head-content'/>

The above code is very important for your Blogger blog. It is available in every Blogger Blog. You are familiar with Bloggers’ country specific redirection and it is not possible to get ranked in search engines with this and it will really help you in SEO. It doesn’t stop the redirection but it tells about the main domain.

Now after finding the “<b:include data='blog' name='all-head-content'/>”. Paste the code given below or after it.

<b:if cond='data:blog.url == "PAGE-URL"'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta property="og:title" expr:content="write your page title here"/>
<meta property="og:url" expr:content="data:blog.canonicalurl"/>
<meta property="og:type" expr:content="article"/></b:if>
<meta property="og:site_name" expr:content="write your blog title here"/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta property="og:image" expr:content="URL of the image that you want to make available for that blog post"/><b:else/>
<meta property="og:image" expr:content="Your logo image"/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta property="og:description" expr:content="Write your description here"/>
<meta property="fb:app_id" content="YourAppID"/>
<meta property="fb:admins" content="YourPageID"/></b:if>
Save the Template.

Replace PAGE-URL the URL of the page in which you want to add Facebook Open Graph Meta Data. Repeat this step again to add on different page. Replace AppID and PageID with your own ID.

This method will surely give you more options of Facebook Meta Data. And with this method you will enjoy all the facility of Facebook Open Graph. You just need little hard work. Choose the method which best fit you.

Which method do you choose? Are you facing any problem? Did I Missed anything? Do you need any help? Do you have want to speak something about Open Graph? Need Help with Facebook?

I will love to read and reply to your comments.

No comments:

Post a Comment