How to Add Twitter Cards in Blogger Blogspot Blogs

Want to add Twitter cards in your Blogger/Blogspot blogs, here is a trick to implement Twitter cards in Blogger to improve your visibility in Twitter and SEO

If you share your blog posts on twitter regularly you should add or implement twitter cards in your blogger blogs. Because twitter cards will help to understand your readers about the content you shared. That means when you share a blog post on twitter, if you added twitter cards in your blog twitter will automatically preview the blog title, blog summary, thumbnail images etc

So that you don't need to add the title, description of the content etc and can add hashtags without any character limit.

How to Add Twitter Cards in Blogger?

Go to Templates > Edit HTML
Find <head> section in the HTML code ( You can use Ctrl+F to find <head> tag)
Add the below code just below the <head> tag
You have to replace

AUTHOR_TWITTER_HANDLE with your twitter username
WEBSITE_TWITTER_HANDLE with your website's twitter username
WEBSITE_FAVICON_IMAGE_URL with your favicon image ( if you use images in all your post you don't have to use this, you can simply remove all line from this)

Then click save
After saving you can validate whether you added the codes correctly by going to the twitter card validator tool

[post_ads]

[
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@AUTHOR_TWITTER_HANDLE"/>
<meta name="twitter:creator" content="@WEBSITE_TWITTER_HANDLE"/>
<b:if cond='data:blog.pageType == "item"'>
<meta name="twitter:url" expr:content='data:blog.url' />
<meta name="twitter:title" expr:content='data:blog.pageName' />
<meta name="twitter:description" expr:content='data:blog.metaDescription'/>
<b:else/>
<meta name="twitter:url" expr:content='data:blog.homepageUrl' />
<meta name="twitter:description" expr:content='data:blog.metaDescription'/>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name="twitter:image"/>
<meta name="twitter:title" expr:content='data:blog.title' />
<b:else/>
<meta content='WEBSITE_FAVICON_IMAGE_URL' name="twitter:image"/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>]