How To Add Twitter Summery Cards To Blogger Blog Posts


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

Summary Card can be used for many kinds of web content, from blog posts and news articles, to products and restaurants. Summer card is designed to give blog reader a preview of the content before clicking through to your website. The image below shows a Summary Card (photo & text) below the 140 characters.


To add this twitter summary card to your blogger blog posts, you must have added some meta tags to your blogger theme XML code.


How To Get Started

Sign in your Blogger Dashboard

In the left menu, click "Theme" >> "Edit HTML"


In the HTML Theme editor page, use CTRL+F on your keyboard to search <head> code

When you locate the searched code, place below code right after the <head>

    <!-- 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>

Now below above code, add these right below


 <!-- twitter card username meta -->
    <meta content='@username' name='twitter:site'/>
    <meta content='@username' name='twitter:creator'/>

Replace @username with your Twitter username

To round this up, search for this code <data:post.body> and add below code before or after it

<meta expr:content='data:post.snippet' name='twitter:description'/>

If you are not using any of the new blogger themes, you might not find the <data:post.body> once. So make use of the second one.


Now the Twitter Summary code will display below your blog post, at the end of your blog post and if you post the code before <data:post.body> , the twitter summary card will display below post title in your blogger blog.



Image Source 

Recommended : 

==> All in One SEO Pack 2017 for Blogger Blogs for SEO Improvement





Subscribe To Our Newsletter
Follow Us On Twitter and Instagram

Comments