The Open Graph Protocol help web pages to integrate into social graph. It combines all the unstructured data of a page into a structured information so that the page can be defined how it will be represented on social networking sites. According to Facebook, if you include Open Graph tags, you will have the ability to treat your page same as Facebook Page.
If you have added Plus One button and/or Like button then you may want your page to get integrated into the social graph of Google+, Facebook and other social sites when they are shared. WordPress has many plugins but users of Blogger needs to add Open Graph protocol Meta tags manually to Blogger and to its post pages by editing the template. In this tutorial I will explain it in simple steps.
Built-in Object Types and Properties
Let us first discuss about important Open Graph protocol predefined meta tags for better understanding.og:title- The title of the object, that is, page or post the reader is readingog:type-blogfor homepage andarticlefor post and static pages onlyog:url- The URL of the page the user is readingog:image- The image that should be used to represent the object. It is a common problem of many Blogger users that the image is not displayed correctly or the wrong image is shown when the post is Liked or shared on Facebook. First of all be sure that you have uploaded your images from Blogger Post Editor or is hosted on Picasa Web Album. This solves the problem. The below meta tag is for Blogger OGP, thanks to alt.pathawks.com (I did some changes to the original code though).<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>
Replace “http://www.your-blog-logo.jpg” with a image so that if your blog posts or other pages do not contain any images, it will render a default image instead. It should be more than 50x50 pixels with maximum aspect ratio of 3:1 and should be in PNG, JPEG or GIF format. The image generated fromdata:blog.postImageThumbnailUrlwill be 72x72 pixels.og:site_name- The title of your blogog:description- Object for having a small description of the page. You need to enable some settings to add description Meta tags to Blogger
Optional Open Graph tags for Facebook
These are completely optional meta tags to administrate you page on Facebook, here you can choose whether to add these tags or not. If “Yes” then to associate it you need either your Facebook account or your Facebook application ID (or both).fb:admins- Your Facebook profile ID or Username
fb:app_id- The application ID provided by Facebook App
Open Graph protocol for Blogger
Step 1: Go to Blogger’s Dashboard and then to you blog's Template tab. Now click “Edit HTML” button.Step 2: Find the highlighted HTML attribution as shown below:
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
After this add the Open Graph protocol namespace xmlns:og='http://ogp.me/ns#'. It will look like:<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Step 3: Find <head> and below it add the following Meta tags:<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 5: Save your template to integrate Open Graph protocol to Blogger.
OGP for Advance users Only
This is for developers only who knows what is needed to be done. If you are a newbie then the above step is just what you need.It creates some controversy to when to use
blog to property og:type because as told in Facebook, it should be used on the root of a domain and article should be used when it represents a news article, blog post, photo, video, etc. So the Meta tags that can be added (with caution):<b:if cond='data:blog.pageType == "index"'> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta content='blog' property='og:type'/> <b:else/> <meta expr:content='data:blog.pageName' property='og:title'/> <meta content='article' property='og:type'/> </b:if> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <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 4: Save your template.
source : simplebloggertutorials
0 comments:
Post a Comment