How to Easily Setup Twitter Cards for Your Blogger Blog


Few days ago, I wrote an article on the 3 Easy Steps to Setup Twitter Cards for Your WordPress Blog  but I had the intention of doing the same for Blogger blogs immediately. I was just reminded of that by a commentator on the post. If your blog is on the blogger platform, you will find here how to easily setup Twitter Cards for your blog.

Twitter cards is one of the ways you can use to generate more views for your blog and your blog posts. With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. Simply add a few lines twitter meta tags to your blog, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.

There are 7 types of Twitter Cards

Summary Card: Default Card, including a title, description, thumbnail, and Twitter account attribution.
Summary Card with Large Image: Similar to a Summary Card, but with a prominently featured image.
Photo Card: A Card with a photo only.
Gallery Card: A Card highlighting a collection of four photos.
App Card: A Card to detail a mobile app with direct download.
Player Card: A Card to provide video/audio/media.
Product Card: A Card optimized for product information.

You can setup any of the Twitter Cards the same way. You just need to select which one you want while setting the Twitter cards.

Here is how to easily setup Twitter Cards for your blog.

1. Edit your template to add the Twitter card metadata.
Login to your Blogger account and go to Template > Edit HTML

2. Click within the Template Editor and press Ctrl + F to search within the template for</head> and paste the below code just above that . You will have to modify the @Geektechng in the below code with the name of the twitter account you use for your blog. The second @Geektechng should be changed to the name of the blog author’s twitter account. Make sure you save your template after pasting.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:if cond=’data:blog.postImageThumbnailUrl’>
<b:if cond=’data:blog.metaDescription’>
<meta content=’summary’ name=’twitter:card’/>
<meta content=’@Geektechng’ name=’twitter:site’/>
<meta content=’@Geektechng’ name=’twitter:creator’/>
<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:src’/>
<meta expr:content=’data:blog.homepageUrl’ name=’twitter:domain’/>
</b:if>
</b:if>
</b:if>

3. Configure and validate your Twitter Card on the Twitter Validation Page

– twitter:card -> should be the type of Twitter Card you want
– twitter:site -> The Twitter username of the owner of this card’s domain.
– twitter:title -> The title of your content as it should appear in the card.
– twitter:description -> A description of the content in a maximum of 200 characters.
– twitter:creator -> If the content of this card was authored by someone, include their Twitter username here.
– twitter:image:src -> A URL to the image representing the content.
– twitter:domain -> your blog’s domain name.

4. Click “Update Preview” after inputting the above twitter settings. If all looks fine, apply for approval by clicking on the “Validate & Apply” tab. Enter the URL of the post and click on “Go”. After validation, you can then request for the final approval for your card. You will get email when Twitter approves your request. This can be immediate or can take like 48 hours.

This is all you need to do to setup Twitter cards for your blog. You can monitor the traffic generated by the Twitter card via your

If you need assistance with this, you can ask using the comment box provided further below.

Yours,
Adeyemi Caleb
Caleb Institution

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s