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 an example of the Twitter Card for this post.

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 @mmonigeria in the below code with the name of the twitter account you use for your blog. The second @mmonigeria 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='@mmonigeria' name='twitter:site'/>
        <meta content='@mmonigeria' 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 Twitter analytics. Once approved, all your posts which have an image and description will start showing twitter cards when you or anyone else shares your post to twitter. So, it is important that while making a blogger post, you should add a "Search Description" and an added an image to the post. If you don’t do any of these, the post won’t display a twitter card.

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

Yours,

Adesoji Adegbulu

www.mmo.ng