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)?
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'>
<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'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
<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'/>
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!