How to Add Twitter Cards to Your Blogger Blog

If you are a frequent user of Twitter, you may have noticed that some tweets containing URLs have a lot of extra information associated with them.

This is what a typical tweet looks like:

But did you know your tweet could look like this (without actually changing your tweet at all)? 

These expanded tweets are called “Twitter Cards” and if you are a blogger they are a great way of getting you blog post tweets a little more exposure. When you have the Twitter cards code installed on your blog, any tweets with your blog's URL will also contain this extra image, title and summary.

They are sorta like Pinterest’s “Rich Pins” but for tweets.  (If you don’t have rich pins I also have a tutorial on how to install them)

To add them it is simple copy and pasting of some HTML code.  (Even a rookie blogger should be able to do this! Don't panic because it is HTML!)

First you need to backup your template (just in case.. ) 

To do this you go to your Dashboard  >>  Template >> Click on "Backup/Restore" in the upper right hand corner.

Once you have your backup saved, click on "Edit HTML"

Click INSIDE the html box and click control-f (“find”) and locate this code snippet:

<b:includable id='post' var='post'>

Paste the following on a new line immediately AFTER the highlighted text:

<meta content='summary' name='twitter:card'/> 

<meta content='@yourname' name='twitter:site'/>

<meta content='@yourname' name='twitter:creator'/>

<meta content='www.yoursite.com' name='twitter:domain'/>

<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>

<meta expr:content='data:post.title' name='twitter:title'/>

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

<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>

In order for the cards to pull the correct information you need to change:
  @yourname (found in the code twice) to your Twitter handle  
  (for example, mine is @Kimb0bimb0)

  www.yoursite.com to your site URL  
(for example, mine is www.thekimsixfix.com)


If you would prefer that your card pull a LARGE image (vs just the thumbnail) you can replace the first line of the above code with this line instead:

<meta content='summary_large_image' name='twitter:card'/>

Once you have pasted in the code (and edited it) you can click on Save Template and you are done!

See? Not bad at all!
To make sure your cards are working and rendering, you can paste your blog’s URL into the Twitter Card Validator.

The results look like this.  You can see how it shows me the description of my blog and my logo:

If yours isn’t giving you the right information (or you want to change what the description says) you can do that easily:
Go to Dashboard >> Settings  >>  Search preferences  >>  Meta Tags: Description >>  Enable Search Description

Fill out that box with a short summary of your blog (this is the information google will show whenever your blog comes up in their search results so make sure you use something that is descriptive and makes people want to read more).

Here is what the Twitter card validator looks like for a specific post:


If it is instead only listing the first few lines of your post and not a summary, you need to fill out the “Search Description” Box (on the right side of the Post Composition screen.)  This feature is only activated after you have “Enabled Search Description” (described above). 

Again, this is what will show up in the Google search results for your post, so make sure it is a good summary of the post:

And that is all there is to it!  Not bad at all!