Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Twitter Cards show more detail about your posts to give readers a little preview of what they'll see when they click your link. And, the cards work when anyone Tweets a link to your post.
Adding META tags to your blog to allow links to your site to be more informational when tweeted. Implementing Twitter Card META tags on your site takes five minutes.
In this tutorial I'm going to focus on making a summary card. The other two card types — photo and player — are not included in this tutorial, but you can learn more about them from the official Twitter Cards documentation.
Twitter Card META Tags:
Before starting this tutorial, I wanna discuss about Twitter Card META tags. You can easily setup your blog's Twitter Card by adding several META tags to your blog. As I mentioned above, in this tutorial I'am only going to focus on summary card, which is most important for your blog.
META tags you would use in all card cases include:
- twitter:card - The type of card to be created: summary, photo, or video.
- twitter:url - The URL that should be used for the card. This will likely be the same URL as the page's canonical link.
- twitter:title - The title as it should display in the Twitter Card.
- twitter:description - A 200 character summary of the content at the given URL.
- twitter:image - A representative image URL for the content. In many cases, simply providing your logo's URL will be just fine.
- twitter:site - The Twitter username used by the given site including the '@'
twitter:creator - The Twitter username of the individual author of the content
Get Your Blog Posts Ready for Twitter Cards:
Twitter Cards use your post's Search Description as your summary, so you'll want to make sure that you've filled it in on each post.
Adding Twitter Card META Tags To Blogger:
Now, I'll show you how to perfectly add these META tags to your blog's template. Don't forget to backup your template.
- Go To Blogger > Template > Edit HTML > Click on "Proceed"
- Once you've opened up your template, find the </head> tag in your template's markup. Enter this markup directly above the </head> tag:
<!-- twitter card details -->
<meta content='summary' name='twitter:card'/>
<meta content='@HardeepAsrani' name='twitter:site'/>
<meta content='@HardeepAsrani' name='twitter:creator'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<!-- end twitter card details -->
- In above code, replace HardeepAsrani with your Twitter handler. Now save your template.
Test Your Markup:
Now, before last step, we'll first check our site's Twitter Card markup by using Card Preview utility so that you can ensure your META tags are used in a valid fashion.
On the tester page, enter the URL of one of your posts (NOT your home page, Twitter Cards only work on post pages) and click "Preview Card".
Applying for Twitter Card Approval:
Twitter requires that your domain be approved before they will allow Twitter Cards for your site; this is likely to combat abuses like pornography and sites promoting illegal activity.You can apply for your domain by clicking here.
In application form, put bunch of basic information about your blog or site. Submit your application, And soon your Twitter Card will automatically work.
Don't forget to tweet me your blog's link so I may review your Twitter Card. Also, don't forget to leave your comments...
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
