Twitter is an online social networking service that gives everyone the power to create and share instantly short messages like mobile SMS which is commonly known as “tweets”. Did you know? There are more than 300M monthly active users who sends 500M+ Tweets on daily basis and 80% of them operates X (Twitter) account through their personal mobile phones.
The different Card types each have a beautiful consumption experience built for Twitter’s web and mobile clients:
- Summary Card: Title, description, and thumbnail.
- Summary Card with Large Image: Similar to the Summary Card, but with a prominently-featured image.
- App Card: A Card with a direct download to a mobile app.
- Player Card: A Card that can display video/audio/media.
So, you can’t ignore the power of tweets which not only helps you to get more online followers and fans but it also drives huge traffic to your blogger blogs. However, Twitter limits the length of each Tweet (short message) to 140 characters. Accordingly, if you are running a blog and wants to tweet your blog posts, you have to limit your words to max 140 characters long including your blog post URL.
In June, 2012 Twitter launched a great feature called Twitter Cards which helps website owners to show summary for their site contents on tweets besides that 140 characters. That means this card will remove such character limitations of tweets. In other words, you may say that a Twitter Card have lots of more options (adding more text and images) than we generally gets with our ordinary tweets.
Suppose your blog visitor tweeted your blog post through his twitter account, now your twitter account will also be shown as attribution along with the title, description and thumbnail of your blog post. Moreover, the best part of Twitter Card is that it will do all these magical things automatically.
Accordingly, a blog owner should have to add twitter Meta Tags called Twitter Cards for showing title, description, rich media (photos) along with publisher’s twitter account. But, many blog owners have either not yet implemented or wrongly inserted twitter cards into their blogs.
Last Sunday, I was working for one of my blogger client and found that the twitter card was wrongly added into her blog’s template. She request me to rectify the same so that blog post images will appear in each tweet. Today, I will share the best practice to install Twitter Summary Cards Meta Tags into every blog posts and pages.
Types of Twitter Cards: There are mainly 4 types of Twitter Cards currently available for webmasters and developers.
1) 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.
2) Summary Card with Large Image: This Twitter Card is similar to Summary Card with additional feature to display a prominently featured image.
3) App Card: This Twitter Card helps to represent mobile applications on Twitter with direct download facility.
4) Player Card: This Twitter Card will provide your rich media like video clips and audio streams to users across the globe.
As we are discussing the Twitter Cards for blogger blog posts, the first two Cards will be useful for us viz. Summary Card and Summary Card with Large Image.
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 Blog
Twitter Summary Card is very commonly used twitter Meta tags. Generally, website owners prefer to add this because it is simply designed to give your tweet readers a preview (thumbnail image and snippet) below the 140 characters of the content before clicking through to your blog.
Follow these simple steps which hardly take 5 minutes to implement Twitter Summary Cards into your BlogSpot.com blogger blogs:
Step-1: Login to your blogger blog account and navigate the Template Tab. Then click on Edit HTML and search for <b:includable id='post' var='post'> in your blog template editor.
Step-2: Copy and paste these HTML Twitter Cards Meta Tags just after/below <b:includable id='post' var='post'>
<!-- Twitter Card Meta Tags by SWT ~ www.superwebtricks.com --><meta content='summary' name='twitter:card'/>
<meta content='@SuperWebTricks' 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:else/><meta content='http://img.superwebtricks.com/files/SWT-logo.png' name='twitter:image:src'/>
</b:if><!-- Twitter Card Meta Tags HELP ~ http://www.superwebtricks.com?p=944 -->
Step-3: Be sure to provide your own blog attribution, content and image in the above HTML codes. Consequently, please change or replace the following terms in accordance with your preference and blog posts.
A) Replace @SuperWebTricks (See the second line) with your own twitter @username for the correct attribution to your tweet card.
B) Replace the URL of image (See the 13th line) with your own image URL link which will be shown as default thumbnail.
There is no need to change anything else in the above code as all other codes will work automatically for each your blog tweets.
Step-4: Now, save your blog template and enjoy! Once your twitter card is live, use Twitter Card validator and run any of your blog post or static webpage URL against the validator tool to test how the card for your blogger blog will look on Tweet.
How to Add Twitter Summary Card with Large Image to Blogger Blog
The Summary Card with Large Image is mainly popular for its two additional features in compare to the simple Twitter Summary Card. The first extra advantage is that as its name indicate, your blog post tweets will show a large, full-width prominent image instead of small thumbnail alongside a tweet.
The second additional feature is that it will also display the twitter account of content creator i.e. author or writer as attribution in addition to the @username of website.
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.
Follow these simple steps to add Twitter Summary Cards with Large Image into your BlogSpot.com blogger blogs:
Step-1: After login into your blogger account, navigate the Template Tab and click on Edit HTML.
Step-2: Search for <b:includable id='post' var='post'> in the template editor and paste the below Twitter Summary Card with Large Image Meta Tags just below/after <b:includable id='post' var='post'>
<!-- Twitter Card Meta Tags by SWT ~ www.superwebtricks.com --><meta content='summary_large_image' name='twitter:card'/>
<meta content='@SuperWebTricks' name='twitter:site'/>
<meta content='@_SureshPrasad' 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/-lesVVtJ0GH4/UGhJVL_dJhI/AAAAAAAACJA/32pR3d3VLig/aubsp.png' name='twitter:image:src'/>
</b:if><!-- Twitter Card Meta Tags HELP ~ http://www.superwebtricks.com?p=944 -->
Step-3: You have to replace only three things from the above codes and provide your own attribution and image as explained hereunder:
A) Replace @SuperWebTricks (See the second line) with your own twitter @username that represent your blog to show the correct attribution to your tweet card.
B) Replace @_SureshPrasad from third line with the twitter @username of the content writer.
Note: If you have only one twitter account then fill free to use the same in both places to represent your blog owner (publisher) as well as author (creator) of that blog post.
C) Replace the image URL in 14th line with your own image URL link which will be shown as default feature image.
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.
Step-4: Finally, save your blog template and enjoy!
Once your twitter Summary Card with Large Image is live, you may test your any blog post with the help of Twitter Card validator. This validator tool will show how the implemented twitter card for your blogger blog will look on Tweet.
Following are summary of some FAQs related to Twitter Cards
Question: How to show exact posts snippet for each blog posts in tweets?
Answer: You have to enable search description feature of blogger. This feature helps to write a unique summary for each blog posts. For more details please read my tutorial regarding How to show Post Snippets for blogger blog Post Contents.
Question: Whether I use one or both Twitter Cards for my blog?
Answer: 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.
Question: I am getting error message “The element type “meta” must be terminated by the matching end-tag “</meta>”…” while saving blogger template.
Answer: You are seeing this error because you have either not pasted the entire twitter card Meta Tag codes provided above or you have wrongly edited the codes. So, please check it again and edit only the terms which has been specifically mentioned in above tutorial.
Question: Whether this card will work for my blogger home/static pages and level pages?
Answer: Yes, definitely! This Twitter Card Meta Tag codes has been written in such a way that will work for each of your blogger blog webpages.
Question: Many of my blog posts does not contain any image so whether I have to insert image in that post?
Answer: No, you need not require to add image in your blog post if you have not inserted while publishing that post. Therefore, you may use any of the above mentioned twitter card for your any blog even your blog posts does not have any image. This twitter card will display the default thumbnail in case your blog post does not contain any image.
If you have any other query then please fill free to ask the same through comment below and I will try to help you as early as possible.