Want to add Twitter cards in your Blogger/Blogspot blogs, here is a trick to implement Twitter cards in Blogger to improve your visibility in Twitter and SEO
If you share your blog posts on twitter regularly you should add or implement twitter cards in your blogger blogs. Because twitter cards will help to understand your readers about the content you shared. That means when you share a blog post on twitter, if you added twitter cards in your blog twitter will automatically preview the blog title, blog summary, thumbnail images etc
So that you don't need to add the title, description of the content etc and can add hashtags without any character limit.
How to Add Twitter Cards in Blogger?
- Go to Templates > Edit HTML
- Find <head> section in the HTML code ( You can use Ctrl+F to find <head> tag)
- Add the below code just below the <head> tag
- You have to replace
- AUTHOR_TWITTER_HANDLE with your twitter username
- WEBSITE_TWITTER_HANDLE with your website's twitter username
- WEBSITE_FAVICON_IMAGE_URL with your favicon image ( if you use images in all your post you don't have to use this, you can simply remove all line from this)
- Then click save
- After saving you can validate whether you added the codes correctly by going to the twitter card validator tool
[post_ads]
[<!-- twitter cards -->
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@AUTHOR_TWITTER_HANDLE"/>
<meta name="twitter:creator" content="@WEBSITE_TWITTER_HANDLE"/>
<b:if cond='data:blog.pageType == "item"'>
<meta name="twitter:url" expr:content='data:blog.url' />
<meta name="twitter:title" expr:content='data:blog.pageName' />
<meta name="twitter:description" expr:content='data:blog.metaDescription'/>
<b:else/>
<meta name="twitter:url" expr:content='data:blog.homepageUrl' />
<meta name="twitter:description" expr:content='data:blog.metaDescription'/>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name="twitter:image"/>
<meta name="twitter:title" expr:content='data:blog.title' />
<b:else/>
<meta content='WEBSITE_FAVICON_IMAGE_URL' name="twitter:image"/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>]
This was awesome. I wasn't aware of this. But there is one issue with this code. While tweeting a blog post instead of post's title it shows the website title
ReplyDeleteI was unaware of twitter cards. Thanks for the information even though my website is on wordpress.
ReplyDeletethanks for the informations
ReplyDeleteQuality content is the key to attract readers. And you provide just that. Good work. best seo services in noida
ReplyDeleteThank you very much i just did mine and i am happy
ReplyDeleteit works Perfect But is their anyway to change (Enlarge) size of the Card thumbnail...!
ReplyDeletepls Help.
this is a beautiful information that you have shared with us , thanks ! :)
ReplyDeletebusiness cards online
"business card printing
"
Nice Post thanks for the information, good information & very helpful for others. flipkart lucky draw For more information about Online Shopping Lucky Winner, Flipkart, HomeShop18, Shopping Lucky, Draw, Contest, Winner, Prize, Result, 2018 - 2019 Flipkart Lucky Draw Winner
ReplyDelete