Twitter card for blogger

Blogger cms as always been the number one best options for newbie who just vent into blogging because of it's easy to use layout and other wonderful reasons but the downside of using blogger is; everything needs to be integrated manually unlike WordPress where you do things almost automatically through the help of plugins, well it a matter of choice and i always love to be in charge that is why am operating on blogger which i believe many of you reading this post are also on the same page with me, enough of these let me dive into today's article but before i explain steps to add twitter card on blogger, i will like to share with you things you need to know about twitter card.

What is twitter card?

Twitter card enables you to add or attach media files with other relevant details to your tweets which are mostly used by bloggers to get more engagement whenever they share contents from their website on twitter.

Why twitter card for blogger?

Using twitter card to back-up tweets does not only got your posts huge engagement but also attract users to click because it contains more details than a normal tweets. More so, using twitter card allows you to bypass the number of words or characters twitter imposed on tweets.

Benefits of using twitter card for blogger

  • Yield more clicks to your websites
  • Presents tweets in a details and arranged manner
  • Makes tweets more visible on twitter

 

How to add twitter cards to blogger 

Adding twitter card to blogger is very easy and straightforward with the help of installing some code on our blogger blog, which i will help you with it but note that you must have little knowledge on how to locate and edit your blog template source codes because it there you will paste the code provided here in today's article.
 
1). Skip this if you knows how to locate source code on blogger, so to find your blog codes click on "theme" on your blogger dashboard and select "Edit Html".

2). Search for closing tag of the head which is </head> you can use Ctrl + f if you are blogging with computer but those using phones will have to continue scrolling until they find it.

3). After you locate the closing tag of head, now copy and paste the below codes right above it and remember to replace the @username with your Twitter account username and your logo url with your site logo before saving the code.

In case you don't know how to add your logo Url to the twitter card below, don't worry, just go to where you uploaded your site logo, right-click and copy the image address and replace it with YOUR_LOGO_URL in the twitter card below, you're good to go.

Twitter card code for blogger

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


Lastly, you can check your twitter card whether it is working through the help of twitter validator. All you have got to do is visit Twitter card validator paste your blog URL link that you wants to test and click on validate once it shows up with images and other details then it working.


I hope you enjoy reading this piece, feel free to drop your comment, share and always visit for latest updates.