Skip to main content

How to Integrate Facebook Open graph meta tags and twitter card properly on blogger for blogspot user

Open graph meta tags and twitter card is very important part of Blogger SEO. Just because now a days social networking websites are the one other sours of getting better traffic.That is why is is important to Integrate Facebook Open graph meta tags and twitter card properly.

In blogger its is quit difficult to install OG meta tags and it will cause problem if OG meta tags are not correctly.

Need of social meta-tags

Whenever user share the links on social networking site, it will try to fetch description of your post article. This will helps user to understand about your post before clicking on it. below image will show you how Facebook generates the description about any web page.

facebook og meta tags description


Default meta description tag will designed for web search engines, Thus if you try to post any url on social sites it will not able to generate proper description. To overcome this problem OG meta tags desperately used. For in case of blogger, to implement this thing you need to do some manual work so that it will give proper result.

Read more about: How to Give H3 tag for home page title links and H1 to individual post title in blogger

Many people are use OG meta tags on their website but in blogger it is different from other. And it is show error while creating twitter card.

So that you must apply all condition on OG-meta tags while you put it on your website.
This is the Opengraph meta tags code for you with solving some basic problems and error. Do not forgot to make some changes which is high lighted.

Go To Blogger > Template

Backup your template and Click Edit HTML

Paste the following Meta tags anywhere below  <head> section.

<!-- Facebook Meta Tags By FKC--> 
 <b:if cond='data:blog.url == data:blog.homepageUrl'> 
 <meta expr:content='data:blog.title' name='og:title'/> 
 <b:else/> 
 <meta expr:content='data:blog.pageName' name='og:title'/> 
 </b:if> 
 <b:if cond='data:blog.url == data:blog.homepageUrl'> 
 <meta content="your website image URL." property='og:image'/> 
 <b:else/> 
 <meta expr:content='data:blog.postImageThumbnailUrl' name='og:image'/> 
 </b:if> 
 <meta property="og:site_name" content="Your website name."/> 
 <b:if cond='data:blog.url == data:blog.homepageUrl'> 
 <meta property="og:description" content="Your website description."/> 
 <b:else/> 
 <meta expr:content='data:blog.metaDescription' name='og:description'/> 
 </b:if> 
 <!-- twitter card details By FKC--> 
 <meta content='summary' name='twitter:card'/> 
 <meta content='@Your twitter username.' name='twitter:site'/> 
 <meta expr:content='data:blog.url' name='twitter:url'/> 
 <b:if cond='data:blog.url == data:blog.homepageUrl'> 
 <meta expr:content='data:blog.title' name='twitter:title'/> 
 <b:else/> 
 <meta expr:content='data:blog.pageName' name='twitter:title'/> 
 </b:if> 
 <b:if cond='data:blog.url == data:blog.homepageUrl'> 
 <meta property="twitter:description" content="your website description."/> 
 <b:else/> 
 <meta expr:content='data:blog.metaDescription' name='twitter:description'/> 
 </b:if> 
 <b:if cond='data:blog.url == data:blog.homepageUrl'> 
 <meta content="your website image URL." property='twitter:image'/> 
 <b:else/> 
 <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/> 
 </b:if> 
 <!-- end twitter card details -->

This code separates the tags, in case of homepage and individual posts. Thus for homepage your website's standard description will generates and individual post will generate specified description.

Read more about: Optimize Blogger SEO by Choosing right meta description

Now check you meta tag on homepage as well as other page also if its working properly or not. 
Example.

opengraph meta tag example.

Done!
Labels:

Comments

Post a Comment