 |
| Twitter Card |
Read More about - How to use Twitter Card Validator for Your Blogger/Blog ? In Simple Way.
Why should I add Twitter Cards
When you add twitter cards to your blog, your blog posts will look more elegant when shared on twitter. This will apply to any twitter account and not just yours.People will be able to get a quick preview of your Blog Post even before they actually visit your blog.
Following is the list of six twitter cards being introduced by twitter in order to display user content in a more friendly way on Twitter accounts.
Summary Card: Default card, including a title, description, thumbnail, and Twitter account attribution.
Large Image Summary Card: Similar to a Summary Card, but Features bigger size images.
Photo Card: A Tweet sized photo card.
Gallery Card: Displays a collection of photos.
App Card: Displays application profile.
Player Card: A Tweet sized video/audio/media player card. You can now watch YouTube videos live on twitter! Probably the best card for podcast blogs. Instead of summary link you will see View/Hide Media link here.
Product Card: It represents product content in a more better way.
Install Twitter Cards on blogger
STEP#1Follow these easy steps.
- Go To Blogger > Template
- Backup your template
- click Edit HTML
- Paste the following Meta tags anywhere below <head>
<meta content='summary' name='twitter:card'/> <meta content='@digitalhubinc' name='twitter:site'/> <meta content='@ghanshyamitl' name='twitter:creator'/> <b:if cond='data:blog.pageType == "index"'> <meta expr:content='data:blog.url' name='twitter:url'/> <meta expr:content='data:blog.pageTitle' name='twitter:title'/> <b:else/> <meta expr:content='data:blog.homepageUrl' name='twitter:url'/> <meta expr:content='data:blog.pageName' name='twitter:title'/> </b:if> <b:if cond='data:blog.metaDescription != ""'> <meta expr:content='data:blog.metaDescription' name='twitter:description'/> </b:if> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/> <b:else/> <meta content='YOUR-BLOG-LOGO' name='twitter:image'/> </b:if> <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
You will have to modify the first @digitalhubinc in the below code with the name of the twitter account which you use for your blog.You can modify the second @ghanshyamitl to the name of the blog author’s twitter account. Replace YOUR-BLOG-LOGO with your Logo Link.
so that it looks like
and Save your template.
Next Step is to add Meta Descriptions & images to your Blogger Post – While making a blogger post, make sure that you add a Search Description to it. Also make sure that you have added an image to the post. If you don’t do any of these, the post won’t display a twitter card. Adding a Search Meta Description to your blogger post will also help in improving the way your posts are presented on Search Engines. So make sure that you add it to every post that you make.
Final step is to request for approval from Twitter.
The final step is to verify your twitter card settings. It is really easy, just follow these steps:
- Open Google Chrome or Safari (Twitter cards work on webkit browsers only not Firefox)
- Go to Twitter Card Validator
- Double Click Summary on the popup window
- Click the Validate and Apply tab
- To see you have added the code correctly just enter your homepage link inside the box and hit go.
.png)
You will see a red link that says that your site is not approved, simply click it and fill up the form to submit your request for Twitter card approval.
Twitter would say that they would send you an email but they really don't do that. At least I have not received any email for our three blogs. They get approved automatically within 48 hours. Once you see summary link below all posts know that you are all set up!
After validation,
You go to your twitter account and show your tweets. Now you see , it's looks like that -
Thanks for reading!
If you like this article , please share on social media and drop your valuble comment.
0 comments:
Post a Comment