Posting a Tweet on your Blogger blog post URL in your Twitter page mostly the primary image on your post will not show in twitter feed, it’s because the blogger template on your site has no twitter card snippet, mostly templates has not set for Twitter Card is free template.

In this Blogger Tips ill will share to you How To add Twitter Cards in Blogger site in the right way, will the add Twitter Cards snippet code the Home page, Pages and Blog Posts, we will use the blogger syntax if else statement condition to add this features.

but before adding this, you should already setting up the blogger robots.txt to avoid error in Twitter Card Validator.

Tweet Preview:

Edit your template, go to your Blogger Admin -> ‘Theme’ -> ‘Edit HTML’ Add the code snippets before close head tag, find this tag

</head>

then copy and paste this code, and don’t forget to replace the…

meta name twitter image content value YOUR_LOGO_URL in the home and page, this content value is your site logo,

and meta name twitter creator value @username your twitter username.

in your site Logo, you can upload it in the cloud service like https://my.cl.ly, upload the logo grab the link and paste to meta image value (homepage, page), for reference you can watch my video on how to upload logo and get link: Blogger Tutorial for Beginners – How to Add Logo in Blogger Blog Header (option 1)

Another way to upload Logo, you can upload it using blog post editor and grab the link, or watch the video version on this on tutorial to get understand.

<!--Twitter Card-->
<b:if cond='data:blog.pageType == "index"'> <!--homepage-->
	<meta name="twitter:card" content="summary" />
	<meta name="twitter:description" expr:content='data:blog.metaDescription' />
	<meta name="twitter:title" expr:content="data:blog.pageTitle" />
	<meta name="twitter:site" content="@username" />
	<meta name="twitter:image" content="YOUR_LOGO_URL" />
	<meta name="twitter:creator" content="@username" />
</b:if>
<b:if cond='data:blog.pageType == "static_page"'> <!--page-->
	<meta name="twitter:card" content="summary" />
	<meta name="twitter:description" expr:content='data:blog.metaDescription' />
	<meta name="twitter:title" expr:content="data:blog.pageTitle" />
	<meta name="twitter:site" content="@username" />
	<meta name="twitter:image" content="YOUR_LOGO_URL" />
	<meta name="twitter:creator" content="@username" />
</b:if>
<b:if cond='data:blog.pageType == "item"'> <!--blog post-->
	<meta name="twitter:card" content="summary_large_image" />
	<meta name="twitter:description" expr:content='data:blog.metaDescription' />
	<meta name="twitter:title" expr:content="data:blog.pageName" />
	<meta name="twitter:site" content="@username" />
	<meta name="twitter:image" expr:content="data:blog.postImageUrl" />
	<meta name="twitter:creator" content="@username" />
</b:if>
<!--End Twitter Card-->

and after added save and test the blog url to Twitter Card Validator

and the results will look in the screenshot below.

it sees your site is white listed for summary large image card, and the log are look’s ok.

and that’s it on how to add Twitter Card on your blogger blog. if you a question kindly fill the comment section below and i will response as soon as i can.

Please Like and Share on blogger tips to help other bloggers, thanks for reading…