How to add Twitter Summery Cards to Blogger Posts

Twitter use an system in appearance of its tweets with external links, this system is know as twitter cards, and for websites which word as a blog or newspaper they use Twitter summery card or Twitter Large summery card.

To add this card to your blog posts, you should have to add some meta tags to your blogger template XML code, so be attention on the following steps.

First step, Go to your blogger template section then click on Edit HTML

 Second Step, just after <head> open tag add this code
    <!-- twitter meta card -->
    <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
    <meta expr:content='data:blog.pageName' name='twitter:title'/>
    <b:if cond='data:blog.postImageUrl'>
      <meta content='summary_large_image' name='twitter:card'/>
      <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
      <b:else/>
      <meta content='summary' name='twitter:card'/>
      <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
      </b:if>
    </b:if>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    </b:if>


Third Step, Add this code after the code you added before, but with replace username text with you twitter handle.
    <!-- twitter card username meta -->
    <meta content='@username' name='twitter:site'/>
    <meta content='@username' name='twitter:creator'/>


Fourth Step, search for this code <data:post.body/> you will find it more than once, so before or after all of found add this line of code.
<meta expr:content='data:post.snippet' name='twitter:description'/>