How to Add Facebook Open Graph Meta Data in Blogger
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'/>
Step 6
Now click on Save Template.
If you have any question or update than you can contact with us any time at our E-mail
Post a Comment