Social networks like Facebook, Twitter and G+ have the greatest potential to drive the web’s social traffic to your blog. But to do this, the social crawlers have to crawl and fetch the right content from your website. You can now control, how your post shows up in social media newsfeeds, using social meta tags.
What is FaceBook OpenGraph?
What is the use of Twitter Cards?
What does Google Publisher markup do?
Social media meta tags influence the performance of your links on social media. Deciding on which media meta tags to add, customize or eliminate can be confusing even to experienced webmasters. Now you don’t have to include them on every blogger post you publish. Make use of this definitive guide to inject meta tags in Blogger template and make your content look The Best on social media.FaceBook OpenGraph Tags
Add " prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#" to the <head> tag.
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">.
Add the below tags just before the </head> tag.
<!-- Facebook OpenGraph -->
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<!-- Title, URL & Description -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='og:description'/>
</b:if>
<!-- Image -->
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta property='og:image:width' content='1200'/>
<meta property='og:image:height' content='630'/>
</b:if>
<!-- FB specific -->
<meta content='YOUR_FACEBOOK_ID' property='fb:admins'/>
<meta content='YOUR_APP_ID' property='fb:app_id'/>
Facebook Debugger
The Facebook meta information debugging tool needs no prior approval. It offers you a wealth of analysis information regarding all your tags including your Twitter tags.Twitter Cards
<!-- Twitter Card -->
<meta content='summary_large_image' name='twitter:card'/>
<!-- Title, URL & Description -->
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.url' name='twitter:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<!-- Image -->
<b:if cond=' data:blog.postImageUrl'>
<meta expr:content=' data:blog.postImageUrl' name='twitter:image'/>
<meta property='twitter:image:width' content='280'/>
<meta property='twitter:image:height' content='150'/>
</b:if>
<!-- Twitter specific -->
<meta content='SITE-TWITTER-HANDLE' name='twitter:site'/>
<meta content='YOUR-TWITTER-HANDLE' name='twitter:creator'/>
Twitter Validation Tool
After you implement the Twitter Cards in your blogger blog, enter your post URL into the validation tool to get whitelisted. Check your markup and then select the "Submit" button.Google Publisher Markup
These markup can have significant impact on your blog’s SEO by adding links to your Google+ pages in search results. The snippet contains the page title, a brief description of the page, and a thumbnail image.<!-- G+ Publisher -->
<!-- Title & Description -->
<meta expr:content='data:blog.pageName' itemprop='name'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:else/>
<meta expr:content='data:post.snippet' itemprop='description'/>
</b:if>
<!-- Image -->
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
</b:if>
<!-- G+ specific -->
<link href='G+ BUSINESS PAGE URL' rel='publisher'/>
Limitations
Title – Only 60 characters are considered optimal for SEO, up to 70 character length for title is considered optimum for Twitter & Facebook.
Description – Though only 150 characters are allowed for SEO, up to 200 characters for can be used for Twitter & Facebook.
Image Dimensions – Facebook OpenGraph(400 x 300), Google+ Markup(atleast 180 x 120) & Twitter Cards(atleast 280 x 150).
Since Blogger has given us a way to edit the HTML template, obviously Blogger thinks that meta tags are worthwhile. So make sure you edit your blogger template and place meta tags somewhere in between <head> and </head> and boost your blog rank higher in search results. All the Best!