How To Add New Twitter Summary Cards In Your Blog Correctly?

 

 

OpenGraph Tags Vs Twitter Cards:

Open Graph is introduced by Facebook to pick the right data from a web page and share it on their social network. Likewise Twitter introduce Twitter Card to fetch the correct data from the web page and share it perfectly on Twitter profile. Following is the list of six twitter cards being introduced by Twitter in order to display user content in a more friendly way on Twitter accounts.

Summary Card: Default card, including a title, description, thumbnail, and Twitter account attribution.
Large Image Summary Card: Similar to a Summary Card, but Features bigger size images.
Photo Card: A Tweet sized photo card.
Gallery Card: Displays a collection of photos.
App Card: Displays application profile.
Player Card: A Tweet sized video/audio/media player card. You can now watch YouTube videos live on twitter! Probably the best card for podcast blogs. Instead of summary link you will see View/Hide Media link here.
Product Card: It represents product content in a more better way.

 

How To Add In Blogger?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search </head> Code.
7.) Now Copy The Below Code And Paste It Before </head> Code..
8.) Click “Save Template” And Done. 

 Sample for Cards Size

<!-- Twitter Cards For Blogger By Kaliveedu Start -->
<meta content='summary' name='twitter:card'/>
<meta content='@Your Twitter ID' name='twitter:site'/>
<meta content='@Your Twitter ID' name='twitter:creator'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<b:else/>
<meta content='YOUR LOGO' name='twitter:image'/>
</b:if>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<!-- Twitter Cards For Blogger By Kaliveedu End -->

 Summary Card 

 <meta content='summary' name='twitter:card'/>

Summary Card with Large Image

<meta content='summary_large_image' name='twitter:card'/>

 How To Verify In Twitter?

The final step is to verify your Twitter card settings. It is really easy, just follow these steps:
Open Google Chrome or Safari (Twitter cards work on WebKit browsers only not Firefox)
1.) Go To Twitter Card Validator.
2.) SignIn/Login With Your Existing Twitter Account.
3.) Please Wait Few Sec Then Choose “Summary” Card From “Card Catalog” POPUP.
4.) Click The “Validate And Apply” Tab.
5.) Enter Your Blog Main Page URL And Click “Go!“.
6.) Please Wait Few Sec Then IT Will Show The Ok Image. (As Seen Below)

Attached Link

Twitter Card validator