Adding Twitter Card Meta Tags to you Blogger Blogs

Twitter added a new feature on sharing links on their feeds known as Twitter Cards. This allows you to attach media experiences to tweets that have links going to your websites. This way, you're not just rendering plain text links to your followers but also a glimpse on what they should expect.

This feature can be achieved by adding a few lines of code to your pages and submitting your URL to Twitter for verification. Though it is a easy as adding a few lines, using Twitter Cards on blogspot may be tricky.

So, to resolve this, here is a step-by-step process that you can use.

Wait! Before you start...

Let us first tackle the three kinds of Twitter Cards:

• A summary card is the default card, which includes a title, description, thumbnail image, and Twitter account attributions of the link. It is the most common card that is used and this is what we are going to do here.
• A photo card shows a tweet sized photo card. This is usually used for photo sharing sites like deviantart.
• A player card shows a media player card to your tweets with links. This is perfect for video related websites

Steps on Adding Twitter Card to Blogspot

1. First is to login on your blogspot account and go to Template > Edit HTML
   
   
   WARNING: Make sure to back-up first your Template before proceeding with the next steps.
   
   
2. Put the HTML meta tag lines below inside your head tags. If you are not familiar with HTML, then you may search for this line first and put them just above it.
   
   

   <b:include data='blog' name='all-head-content'/>
   

   
   These are the meta tags that you should add:
   

   <!--twitter-->
   <meta content='summary' name='twitter:card'/>
   <meta content='[BLOGS-TWITTER-HANDLER]' name='twitter:site'/>
   <meta content='[AUTHORS-TWITTER-HANDLER]' name='twitter:creator'/>
   <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
    
   <!--DESC-->
   <b:if cond='data:blog.metaDescription != ""'>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
   <b:else/>
    <meta content='[BLOGS-DEFAULT-DESCRIPTION]' name='twitter:description'/>
   </b:if>
   
   <!--IMAGES-->
   <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
   <b:else/>
    <meta content='[BLOGS-DEFAULT-THUMBNAIL]' name='twitter:image'/>
   </b:if>
   
   <!-- TITLE -->
   <b:if cond='data:blog.pageType == "index"'>
    <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
   <b:else/>
    <meta expr:content='data:blog.pageName' name='twitter:title'/>
   </b:if>
   

   
   
3. Now replace the following items with your own choice:
   
   
   • [BLOGS-TWITTER-HANDLER] - your blog's twitter handler, ex. @ajibanda_pp (don't forget the @ sign)
   • [AUTHORS-TWITTER-HANDLER] - the author's twitter handler, ex. @ajibanda (don't forget the @ sign)
   • [BLOGS-DEFAULT-DESCRIPTION] - your blog's short description. Take note that this is different from a tag line.
   • [BLOGS-DEFAULT-THUMBNAIL] - your blog's default thumbnail in case nothing is available.
   
   Afterwards, save your template.
   
   
4. Check now if everything works fine using the preview generated by twitter.
   
   If it is fine then you should be able to see something similar to the image below.
   
   
   
   
   
5. Finally, apply to participate by submitting your link and other information to Twitter. Check this page for the submission form.
   
   Verificaion may take a couple of days up to week. Twitter will send you an email that you have successfully added a twitter card to your blog once you are verified.
   
   

So what do you get after having Twitter Cards?

Let's just say that most popular sites are now using this. So why should you be left behind right? With this feature, it gives you an extra attraction for your links posted on twitter. With more attraction comes more traffic, and as a blogger, I know that this is a kind of traffic that all of us want! :)