There are more than 300M monthly active users who sends 500M+ Tweets on daily basis and 80% of them operates Twitter account through their personal mobile phones. Don't you want your website to optimize enough to get traffic from twitter? Then, read on, how to use twitter cards to enhance links shared on twitter.
What is Twitter Cards
Twitter launched a great feature called as Twitter Cards on June, 2012 which helps to show description and photo of a blog post if a link is shared on Twitter. So you could deliver more information about the link to be shared more than that of 140 character limit. In simple, you could easily modify what image and description to be shown on twitter when it is re tweeted and viewed by others also.The power of twitter card implementation on your websites is that, when a link is shared on twitter, the post title, post description and the thumbnail of that post gets added to the tweet automatically!
See the below image, which clears all your doubts.
So, you could see that, though I have utilized the 140 characters limit, I have implemented Twitter Cards on my blogger blog, which twitter retrieved automatically the post title, post description and the thumbnail of the post as I shared the blog post link on Twitter.
If you implement Twitter Cards on your blog in a proper way, you could easily increase the engagement of the tweet and thereby get traffic to your blog. Surprisingly, many bloggers does not implement twitter cards on their blog or don't know how to implement them properly, which resulted in not using this awesome feature. Today, I am going to show you the best way to implement Twitter Cards on your blogger blog.
Types of Twitter Cards
There are mainly 4 types of Twitter Cards currently available for webmasters and developers.- Summary Card: This Twitter card may be used for online website contents, blog posts and news articles etc. to show the Title, description and thumbnail in addition to Twitter account attribution.
- Summary Card with Large Image: This Twitter Card is similar to Summary Card with additional feature to display a prominently featured image.
- App Card: This Twitter Card helps to represent mobile applications on Twitter with direct download facility.
- Player Card: This Twitter Card will provide your rich media like video clips and audio streams to users across the globe.
Among the four cards mentioned above, first two cards, Summary Card and Summary Card with Large Image are used mostly by the blogger blogs.
Note that with effect from July 3, 2015 all other Cards like Photo Card, Gallery Card and Product Card will be deprecated and will be mapped either to the Summary Card or to the Summary Card with Large Image.
How to Integrate Twitter Summary Card to Blogger Hosted Blog
Twitter Summary Card is the basic one which almost all bloggers prefer to add it with their blogs. It simply shows a small thumbnail and post summary of the link which is shared on twitter. It also increases the CTR(Click Through Rate) of the tweet. Read below, how to implement Twitter Summary Card on your blogger blog.
Step 1: Login to your Blogger Blog and go to Template tab and then click on Edit HTML and search for
Step 2: Copy and paste the below HTML Twitter Cards Meta Tags, just after the code you searched for in step 1.
Step 4: Save your blog template. Hurray! You have implemented the Twitter Cards on your blog. To verify whether it works or not, use Twitter Card Validator tool and check for any of your blog post by inserting the URL of the blog post in the tool.
There is no need to change anything else in the above twitter meta tag codes as it will do the other things automatically for each your blog tweets.
The Twitter Summary Card with Large Image is very popular twitter card used by many bloggers for one of its best usage, that is, showing the featured image of full width instead of small thumbnail. It gradually increase the CTR of the Tweet and thereby the engagement of the tweet would be increased.
If your blog posts contain large images i.e. at least 280px in width and at least 150px in height, then only this twitter card is useful for your blog. I personally recommend to use a unique large image in your each blog post that represent the content of the webpage.
The implementation of this Twitter Card is almost similar to that of the previous one. Follow Step 1 and Step 2 as mentioned in Twitter Summary Card Implementation, and instead of the code mentioned in Step 2, insert the below HTML Twitter Cards Meta Tags, just after the code you searched for in step 1.
Step 4: Save your template. Hurry! You have implemented the Twitter Cards with Large Image on your blog. To verify whether it works or not, use Twitter Card Validator tool and check for any of your blog post by inserting the URL of the blog post in the tool.
There is no need to change anything else in the above twitter meta tag codes as it will do the other things automatically for each your blog tweets.
Many have doubt on whether to use both Twitter Cards. Note that, you have to add only one twitter card in your blog. Thus, you may use either Summary Card or Summary Card with Large Image for your blogger blog. If you generally use big size images in your blog posts then, I strongly recommend you to use the advanced twitter card named Summary Card with Large Image.
If you have any more doubts, feel free to comment below and I am here to help you with. Also comment down, if you successfully installed the Twitter Cards on your blogger blog.
<b:includable id='post' var='post'>in your blog template editor.
Step 2: Copy and paste the below HTML Twitter Cards Meta Tags, just after the code you searched for in step 1.
<!-- Twitter Card Meta Tags by Somesh ~ www.someshr.com --> <meta content='summary' name='twitter:card'/> <meta content='@someshr94' name='twitter:site'/> <b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageName' name='twitter:title'/> <b:else/><meta expr:content='data:blog.pageTitle' name='twitter:title'/> </b:if> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' name='twitter:description'/> <b:else/><meta expr:content='data:post.snippet' name='twitter:description'/> </b:if> <b:if cond='data:blog.postImageUrl'> <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/> </b:if> <!-- Twitter Card Meta Tags by Somesh ~ https://www.someshr.com -->Step 3: Make sure that you change the twitter account to your blog's official twitter account. Kindly change @someshr94 to your own twitter profile. No other changes are necessary and you can place the code as it is.
Step 4: Save your blog template. Hurray! You have implemented the Twitter Cards on your blog. To verify whether it works or not, use Twitter Card Validator tool and check for any of your blog post by inserting the URL of the blog post in the tool.
There is no need to change anything else in the above twitter meta tag codes as it will do the other things automatically for each your blog tweets.
How to Add Twitter Summary Card with Large Image to Blogger Blog
The Twitter Summary Card with Large Image is very popular twitter card used by many bloggers for one of its best usage, that is, showing the featured image of full width instead of small thumbnail. It gradually increase the CTR of the Tweet and thereby the engagement of the tweet would be increased.If your blog posts contain large images i.e. at least 280px in width and at least 150px in height, then only this twitter card is useful for your blog. I personally recommend to use a unique large image in your each blog post that represent the content of the webpage.
The implementation of this Twitter Card is almost similar to that of the previous one. Follow Step 1 and Step 2 as mentioned in Twitter Summary Card Implementation, and instead of the code mentioned in Step 2, insert the below HTML Twitter Cards Meta Tags, just after the code you searched for in step 1.
<!-- Twitter Card Meta Tags by Somesh ~ www.someshr.com --> <meta content='summary_large_image' name='twitter:card'/> <meta content='@someshr94' name='twitter:site'/> <meta content='@someshr94' name='twitter:creator'/> <b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageName' name='twitter:title'/> <b:else/><meta expr:content='data:blog.pageTitle' name='twitter:title'/> </b:if> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' name='twitter:description'/> <b:else/><meta expr:content='data:post.snippet' name='twitter:description'/> </b:if> <b:if cond='data:blog.postImageUrl'> <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/> <b:else/><meta content='http://4.bp.blogspot.com/image_URL.png' name='twitter:image:src'/> </b:if><!-- Twitter Card Meta Tags ~ http://www.someshr.com -->Step 3: The changes what you have to make is, just change @someshr94 (which comes in 2 places) to your twitter username and at the last line of code, make changes to the Image URL (which is shown if no image for post is available).
Step 4: Save your template. Hurry! You have implemented the Twitter Cards with Large Image on your blog. To verify whether it works or not, use Twitter Card Validator tool and check for any of your blog post by inserting the URL of the blog post in the tool.
There is no need to change anything else in the above twitter meta tag codes as it will do the other things automatically for each your blog tweets.
Doubts on Twitter Card Implementation
If you want to show exact post snippet for each blog post in tweets, you have to enable search description feature of blogger. This feature helps to write a unique summary for each blog posts. For more details on enabling the feature on blogger, read Enabling Meta Description on Blogger Blog.Many have doubt on whether to use both Twitter Cards. Note that, you have to add only one twitter card in your blog. Thus, you may use either Summary Card or Summary Card with Large Image for your blogger blog. If you generally use big size images in your blog posts then, I strongly recommend you to use the advanced twitter card named Summary Card with Large Image.
If you have any more doubts, feel free to comment below and I am here to help you with. Also comment down, if you successfully installed the Twitter Cards on your blogger blog.
