How to Add Twitter Summery Card Tags to Blogger Website

How to Add Twitter Summery Card Tags to Blogger Website

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.

  1. 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.
  2. 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.
  3. 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, &quot;1200:630&quot;)' property='og:image'/>
     <meta expr:content='resizeImage(data:view.featuredImage, 1200, &quot;1200:630&quot;)' name='twitter:image'/>
<b:elseif cond='data:widgets'/>
<b:loop reverse='true' values='data:widgets.Blog.first.posts where (p =&gt; p.featuredImage) map (p =&gt; p.featuredImage)' var='imageUrl'>
  <meta expr:content='resizeImage(data:imageUrl, 1200, &quot;1200:630&quot;)' property='og:image'/>
   <meta expr:content='resizeImage(data:imageUrl, 1200, &quot;1200:630&quot;)' name='twitter:image'/>
</b:loop>
<b:elseif cond='data:blog.postImageUrl'/>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, &quot;1200:630&quot;)' property='og:image'/>
      <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, &quot;1200:630&quot;)' name='twitter:image'/>
</b:if>    
<!-- Twitter Card Code End-->

See Also: How to Add Open Graph Tags to Blogger Website

Related Posts