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!
Table of Contents
Types of Twitter Summary Cards
Here are some basic Twitter summary cards that are mandatory to include in your Blogger website –
| Twitter summary cards | Description |
|---|---|
twitter:card |
The name of the Twitter card you want to use such as summary or summary_large_image. |
twitter:site |
The username of your website’s Twitter handle account. |
twitter:creator |
The username of the creator or writer. |
twitter:title |
The title of the webpage or article. |
twitter:description |
A short description of the webpage or article (the optimal character length is 150-160 words). |
twitter:image |
The 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 –
- Login to your Blogger Dashboard and go to Template > Edit HTML.
- Click anywhere in the template editor and press CTRL+F key to open the search box.
- Now type <head> tag and press enter button to search it.
- 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 == "index"'> <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 != "index"'> <b:if cond='data:blog.pageType == "archive"'> <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.
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.
