For blogger users “Twitter is not previewing my link” is a common issue. By default blogger theme don’t have a twitter card. You need to add this manually. In this tutorial you will learn how to add twitter card tags to blogger websites. Here I will describe the process step by step. Please read the full article.
What is Twitter Summery Card?
When we share a link to any social media a preview is shown with post title, featured image and meta description. Facebook use open graph data for this system. Where twitter use a twitter card data. A twitter card shows a preview with your featured image, post title and description, with a url pointing to the blog. A twitter card will be always like the image above. You can validate your twitter card from Twitter Card Validator.
A twitter card is required for any website. If you share an article of your website and it just show as a link then people will ignore the link. Moreover people cannot trust a link without preview. So, you need to have a twitter summery card.
How to Add Twitter Summery Card Tags to Blogger
You need a add some html meta tags to your theme. Here are the steps for how to do that.
- Go to theme tab. Click on the dropdown menu just aside of your theme preview and right of “Customize” button. You will see a option “Edit HTML”. Click on This.
- An XML file will be opened. Seek for starting <head> tag. This will be appear in very first of your file. Almost in first 5 lines.
- Paste the code below just after the head tag. And save the file. Then check into Twitter Card Validator to check whether your twitter card is ok.
<!-- Twitter Card Code Start-->
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:view.title.escaped' name='twitter:title'/>
<meta expr:content='data:view.description.escaped' name='twitter:description'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/>
<meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' name='twitter:image'/>
<b:elseif cond='data:widgets'/>
<b:loop reverse='true' values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
<meta expr:content='resizeImage(data:imageUrl, 1200, "1200:630")' property='og:image'/>
<meta expr:content='resizeImage(data:imageUrl, 1200, "1200:630")' name='twitter:image'/>
</b:loop>
<b:elseif cond='data:blog.postImageUrl'/>
<meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' property='og:image'/>
<meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' name='twitter:image'/>
</b:if>
<!-- Twitter Card Code End-->
