How To Add Twitter Summary Cards In Blogger

Hello Buddies, Do you know whenever you share a new post to Google+ or Facebook, It displays the summary and also a thumbnail if available in your blog post. Twitter has also come up with the same feature which is called Twitter Cards. Twitter has different type of Card but through this post i will give you a guide on how to add the twitter summary card in your blog.

After adding twitter summary card, each of your blog post will have a view summary option below each post on twitter and when it is been clicked on it will show the summary of the post. You can check out live demo On out Twitter Page @ChidiTech

Before i continue i will briefly explain the main reason why you should add twitter summary card.

Why You Should Add Twitter Summary Cards
The main reason why you should add twitter card is because it makes your blog post look more professional and your followers would be able to get a preview of your blog post before they visit your blog.

How To Add Twitter Summary Cards In Blogger
By following the below guide, you wouldn't encounter any difficulties in adding Twitter Cards in your blogger blog.

1. Go straight to your Blogger Dashboard and click on the blog you want, and navigate to Template
Note:Make Sure You Backup Your Template First.
click on Edit HTML Click on anywhere within the template editor and hold Ctrl+F to search for any code within the template. Now search for when you find that, copy and paste the code below just above the :

<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.postImageUrl'> <b:if cond='data:blog.metaDescription'> <meta content='summary' name='twitter:card'/> <meta content='@chiditech' name='twitter:site'/> <meta content='@ChidiTech' 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.postImageUrl' name='twitter:image:src'/> <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/> </b:if> </b:if> </b:if>

Note: You will have to replace the first @chiditech in the above code with the username of your blog twitter account and also replace the second @ChidiTech with the display name of your blog twitter account.
Then You save your template.

Step 2. Make sure you add an image and a meta description when writing a blog post, if you don't add any of these, you post wouldn't display a twitter summary.
You should also know that Add a meta description makes you blog post SEO Friendly and give your opporturnities to rank better in search engines. So always make sure you add it in every of your blog post.

Step 3. This is the final and also most important step of adding twitter summary cards. Goto Twitter Cards Developer site https://cards-dev.twitter.com/validator and input your blog url starting with the http:// format and hit the Preview Card button. Twitter will Validate the card mark-up and If your Code was placed successfully without errors you will get a successfull message saying that *YourBlog.com is whitelisted for summary card. Thats Done. Now all your blog posts you or anyone will share on twitter that contains and image and search description will start showing twitter cards.

The above method will only show a 120px by 120px thumbnail summary image on twitter. But if you would like to adjust the size of the image you can follow the below guide to change the line of code below.
Replace

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

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

. Once you are done, revisit https://cards-dev.twitter.com/validator to revalidate your card and you are done.

Was this post helpful? Don't just read and go. Sharing Is Caring. Share with fellow bloggers. You can also Subscribe For Latest Updates and also follow us on Twitter and On Facebook

#Happy_Blogging!!!