How Twitter Cards Works?
If the twitter cards functionality is correctly applied to your website, then you can notice a “View summery” link along your tweets. Whenever someone would click on that tweet it would display short summary of your content just like Facebook status. For more details see the following screenshot.
The biggest advantage of using Twitter Cards is that it increases the chances of people following you back through the latest content attribution. Most of the time people retweet you, but fails to give proper attributions. This not only happens to us, but we have also noticed the same thing from other big content creators. They tweet your article without giving a proper attribution like @mybloggerlab and etc. Though, it is their right to give you an attribution or not, but a publisher remains empty handed.
Lastly, it makes you stand out. Since, it is so new that it gives you people an attracting touch. Just like Google Authorship makes you stand out in search engine, Twitter cards make you stand out in the list of tweets. Now you know the benefits of the Twitter cards, let move step ahead and see how to implement it in Blogger.
How to Add Twitter Cards in Blogger:
The First thing you need to do to is go to Blogger.com and login into your Google Account. After logging in, you will be redirected to Blogger Dashboard. Now go to Your Blog >> Template >> Edit HTML and search for the ending <head> Tag. On finding the tag, just above it paste the following piece of code.<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<b:if cond='data:blog.metaDescription'>
<meta content='summary' name='twitter:card'/>
<meta content='@mybloggerlab' name='twitter:site'/>
<meta content='@mybloggerlab' 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>
Congratulations: Do not forget to replace @mybloggerlab with the twitter username of your site. Once everything is done, simply press the “Save” button and Twitter cards are ready, and good to be live on your website.
Final Step: Requirements
To make the twitter cards work perfectly on your site, it is must for you to upload at least one image, and add description to your post manually using "Search description" tool allocated in the Blogger Post Editor. Without adding these two things, twitter cards would not give productive results.
Since, it is a new service. Therefore, it is clear that you have to apply to have this activated for your site. We have also applied from our site MyBloggerLab and let’s see when they will give it an approval. Here's what you need to do to apply.
Test your site with Preview Tool.
That's it. We hope this article has helped you in learning How to Easily Add Twitter Cards in Blogger. If anyone has any problem while applying this tutorial then, do not hesitate to leave a comment below. If you like the tutorial, leave a tweet for us at @mybloggerlab
Since, it is a new service. Therefore, it is clear that you have to apply to have this activated for your site. We have also applied from our site MyBloggerLab and let’s see when they will give it an approval. Here's what you need to do to apply.
Test your site with Preview Tool.
That's it. We hope this article has helped you in learning How to Easily Add Twitter Cards in Blogger. If anyone has any problem while applying this tutorial then, do not hesitate to leave a comment below. If you like the tutorial, leave a tweet for us at @mybloggerlab
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
13 comments
I'm Italian, so sorry for bad english.
I see 'Invalid card type.'
How can I resolve?
Please halp me
Nice explained Tutorial , Faizan Bro !
And please increase your posting frequency as we are all very very curious to see your next article
Regards
Rizwan @ Blogger Kid
You have toe wait till Twitter gives you approval to set Twitter cards
hello Syed, i removed content from that post. Please help me, search for this
create bold text for facebook site:kbtricks.com
in google. Google is indexed this post in mobile view. Please tell me.
Hi Brother,
I really appreciate your Gesture fella. And I search for that keyword and for me it is indexed correctly. :)
Cheers!
is it still work if I using short link like bit.ly ?
Yes, it certainly will
I have a problem with the image!
It never appears on desktop only on Mobile devices!
I tried everything!
my blog is
http://arab-media-online.blogspot.com/
Probability compatibility problem from Twitter
Does it work for multiauthor blogspot sites?
Yes, It works fine!
so, if I use that code, how do I specify the twitter profile of each author?
You can use this technique for multiple authors
http://www.bloggingehow.com/2012/04/how-to-add-multiple-author-boxbio-in.html
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.