14 July 2018

How to Add Twitter Summary Card Meta Tags in Blogger

Leave a Comment
You might have noticed that when you share your website or blog posts on Twitter, it doesn't show any rich content of the webpage like title, description, thumbnail etc. Now Twitter has introduced summary cards tags which helps you to add your website's rich content in the tweet.

Add Twitter summary card meta tags in Blogger

The summary cards allow Twitter to better understand what information (such as title description, thumbnail etc.) you want to display when your website link is tweeted. It is similar to the Facebook open graph tags and Google rich snippets.

These summary cards are super easy to implement into your own Blogger website or blog. This tutorial will guide you how to do it!

Types of Twitter Summary Cards


Here are some basic Twitter summary cards that are mandatory to include in your Blogger website -

Twitter summary cardsDescription
twitter:cardThe name of the Twitter card you want to use such as summary or summary_large_image.
twitter:siteThe username of your website's Twitter handle account.
twitter:creatorThe username of the creator or writer.
twitter:titleThe title of the webpage or article.
twitter:descriptionA short description of the webpage or article (the optimal character length is 150-160 words).
twitter:imageThe url of the image that appears when your content is shared on Twitter. The image should be less than 5MB in size.

Add Twitter Summary Card Meta Tags in Blogger


Follow this step-by-step guide -
  1. Login to your Blogger Dashboard and go to Template > Edit HTML.
  2. Click anywhere in the template editor and press CTRL+F key to open the search box.
  3. Now type <head> tag and press enter button to search it.
  4. Add the following piece of code just below the <head> tag and then tap "Save template" button. That's it.
    <!-- Twitter summary card meta tags for Blogger - Geek Instructor -->
    <meta content='summary_large_image' name='twitter:card'/>
    <meta content='@site' name='twitter:site'/>
    <meta content='@creator' name='twitter:creator'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta expr:content='data:blog.pageTitle' property='twitter:title'/>
    <b:else/>
    <meta expr:content='data:blog.pageName' property='twitter:title'/>
    </b:if>
    <b:if cond='data:blog.pageType != &quot;index&quot;'>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <meta content='your-blog-cover-pic-here' property='twitter:image'/>
    <b:else/>
    <meta expr:content='data:blog.postImageUrl' property='twitter:image'/>
    </b:if>
    <b:else/>
    <meta content='your-blog-cover-pic-here' property='twitter:image'/>
    </b:if>
    <b:if cond='data:blog.metaDescription != ""'>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    </b:if>
Note: You have to replace the highlighted text in the above code -
  • Replace @site with the Twitter username of your website or blog.
  • Replace @creator with the Twitter username of the author (you can add your personal Twitter account here).
  • Replace your-blog-cover-pic-here with the URL of your blog cover picture. It will appear on the homepage and archived pages of your Blogger blog.

How to Validate Twitter Summary Cards


To check if all Twitter summary cards are working properly on your Blogger blog, you can use Twitter Card Validator tool.

This tool lets you preview how your content will look when it's shared on Twitter. Simply enter any valid URL of your Blogger website and tap "Preview card" button.

Twitter Card Validator Preview

We hope you find this guide helpful to add Twitter summary card tags in your Blogger blog. If you are facing any problem, feel free to share it in the comment section.

Leave A Comment