How to Properly add Twitter Cards in Blogger

Twitter is the next most popular social networking website, Almost every blogger have a twitter account, and it's important to have a twitter account, To increase your website / blog traffic, And you should use the tweet button on your blogger blog, A while back Twitter launched a new feature called "Twitter cards"

What are Twitter Cards ?

Well, Twitter cards are similar to the Facebook link extractor which automatically retrieve the content from the link, And we all know that Twitter has its 140 character per tweet limit, we can't add more characters, photo, But With The Twitter cards you can add additional media content like photo, videos to tweets, So when you add the link of your blog post, then twitter will extract the content add to your tweet like the Facebook link extractor, And when someone retweet or share to your link it would will display proper credit to you.

Adding The Twitter Card

The first thing you need to do is backup your blogger template for retrieving old template if you did something wrong, Go to your blogger >> blog >> Template >> HTML, Search head> tag in your template, Then copy below Twitter card codes and paste it under your tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.postImageThumbnailUrl'>
      <b:if cond='data:blog.metaDescription'>
        <meta content='summary' name='twitter:card'/>
        <meta content='@Meralesson' name='twitter:site'/>
        <meta content='@Meralesson' name='twitter:creator'/>
        <meta expr:content='data:blog.pageName' name='twitter:title'/>
        <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
        <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
        <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
      </b:if>
    </b:if>
</b:if>

Make sure to replace @meralesson with your twitter username.

Once you have added the twitter card in your blogger template, Go to "Twitter Card Validator" and login into your account and check your Twitter card by submitting the Url of your blog post.

If you want to display large image instead of the small image, then copy the below code

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

And replace with:

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

Now again validate your Twitter card to check the large image.

That's it, This is how you can easily add the Twitter Card into blogger blog, if liked this tutorial and learned from it, then make sure to like and follow us on Twitter, Facebook.

Meralesson

Search This Blog