8:57:00 AM
Today we will provide you
tutorial about How to Add Facebook Open Graph Meta Data in your Blogger blog.
Facebook Open Graph allows you to add metadata to your contents that you need
to appear on your facebook Timeline. Facebook Open Graph fetches the summery of
blog with thumbnail of post. Facebook Open Graph allow you to fetches
description of post, Thumbnail and URL of your specify post. We will show you
how to add facebook open graph Meta data in blogger in this article.
Facebook Open Graph Meta for Blogger
Before we provide tutorial please learn following
terminologies which are commonly use in Facebook Open Graph:
- og:title: This is show title of post.
- og:url: This is show URL of post.
- og:image: This is show display image of your post on facebook.
- og:type: Its show type of your page.
How to Add Facebook Open Graph Metadata in Blogger?
Follow below steps to Add Facebook Open Graph Metadata in
Blogger:
Step 1
Login to your blogger account and Go to blogger dashboard.
Step 2
Go to Template and click on Edit HTML as shown in below
picture.
Step 3
Search below code:
<html ......
xmlns:expr='http://www.google.com/2005/gml/expr'>
Step 4
Now paste below code next to it:
xmlns:og='http://ogp.me/ns#'
New code will look like this
<html.....
xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'
>
Step 5
Now Search <head> and paste below code:
<b:if
cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-Profile-ID' property='fb:admins'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-Profile-ID' property='fb:admins'/>
Step 6
Now click on Save Template.
No comments
Post a Comment