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: New code will look like this :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'/>
0 comments:
Post a Comment