Add Twitter Summary Card Meta Tags with Large Image to Blogger

Description: Adding Twitter Summary Card with Large Image to Blogger. Show Different Author Creator by Twitter Meta Tags for Multi Author Blogger Blog.

Do you want to add Twitter cards meta tags to your Blogger blog? If yes, you are welcome to this page. The question is why do you need to have Twitter summary cards installed into your blogs? The simple answer is to drive more traffic to your blog. With Twitter cards, you can attach your blog post featured image, blog title, blog post description and post author in your tweets that will surely drive more traffic than before. Once you add Twitter card meta tags to your blogger, you'll see each tweets having your blog URL containing a big image along with other info of your blog. It will surely attract the visitors to click on your link, and in result you will get traffic to your blog.

adding Twitter meta tags in blogger
Related Topic:
I am here talking about Twitter summary cards with Large image. There are some other cards available, you can check it out more Twitter cards. You may also add other cards similar as I am sharing for this Twitter card meta tags. Basically, Twitter summary card with large image is mostly used by the bloggers so that is why I am sharing it with you. If you have Blogger blog, just follow the steps to add Twitter summary card meta tags to your blog.

Advantage for Twitter Summary Card Meta Tags

  • No matter, you are tweeting your stuff or your visitors. Twitter card will display to your content.
  • Display a large image to tweets, we all know an image can say thousand of words at a glance.
  • Your blog post title along with the description show up in the tweet besides 140 correctors.
  • You may also show the author of the post in your Twitter card.
    P.S.: If you have multiple authors in your Blogger, I have also added that case into this post. You should follow the guide to show different author name associate with their blogger post.

Add Twitter Summary Cards with Large Image to Blogger

It is a fresh Twitter summary card with large image meta tags code that you can use for your Blogger blog. The following code you may add if you don't currently have any open graph meta tags (i.e., <meta property="og:title"...../>). If you already have open graph meta tags to your Blogger, skip the following code, and move to the next heading.

Step 1: Sign into your Blogger dashboard -> Select your blog -> Template -> Edit HTML -> Now paste the following code between <head>..........</head> or just below to <head>.

<meta content='summary_large_image' name='twitter:card'/>
<meta content='@shadabiitr' name='twitter:site'/>
<meta content='@shadabiitr' name='twitter:creator'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/><meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/><meta expr:content='data:post.snippet' name='twitter:description'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/><meta content='Your default Image' name='twitter:image'/>

Code 1

Make sure to change text with your blog information. Change @shadabiitr with the owner of your blog, and @shadabiitr with the author of blog post as their respectively twitter account. If you are the owner of your blog, and only you publish article then add your twitter account in both places. If you have a multi author blog then the creator meta tag would be change as per the author twitter account. I will discuss it later before finishing the article, just need some changes.

Paste your default Blogger image direct link to 'Your default Image'. If your post doesn't have a featured image then that image will be use. The guide host image to Blogger and get direct link may help you.

Once you have paste the code successfully, now you should validate your Twitter Card by this link. Write any of your Blogger post URL, and hit on "Preview card". It will show up live in the right side.

Now, let you are already using open graph meta tags then you don't need to add the title, description and image twitter tags as Twitter can attach the information from open graphs.

Add Twitter Summary Card with Open Graph Meta Tags

If you are already using open graph meta tags into your Blogger, then you don't need to override the same things twice in your template. However, Twitter has their own syntax i.e., 'twitter:image' to display your blog information so first Twitter will search for their own syntax into your template, if Twitter do not find it will search for the global open graph meta tag i.e., 'og:image'. Therefore, if you have open graph meta tags, Twitter will sync the data from them. I am also using open graph meta tags, I am also using the following small code into my Blogger template for our Twitter summary cards.

Make sure, your open graph meta tags have the following property.
  • og:title
  • og:description
  • og:image
You can search these 'property' into your Blogger template source code by using ctrl+F. If you don't find it, use the previous codes. Now, copy the following peace of codes, and paste anywhere between <head>..........</head> or just below to <head>.

<meta content='summary_large_image' name='twitter:card'/>
<meta content='@shadabiitr' name='twitter:site'/>
<meta content='@shadabiitr' name='twitter:creator'/>

Code 2

Similarly change the text with your information as I have already mentioned for the Code 1.
Note: If you don't get the full image width and height via your open graph meta tags into your twitter summary card, you need some changes to the featured image URL. It is because mostly bloggers using Blogger thumbnail URLs instead of the original link. Therefore, go to your Blogger template source code, and look around the property 'og:image' and change it value from 'whatever' to 'data:blog.postImageUrl'. It will show up original post image to Twitter, Facebook and Google+ too.

Now, if you have multiple authors Blogger blog and you want to show the proper creator card into Twitter tweets. You need some changes in 'twitter:creator' tag. Follow the steps.

Twitter Summary Cards for Multi-Author Blogger Blog

Remove the following line from the code.

<meta content='@shadabiitr' name='twitter:creator'/>

Paste the following code, but not in the 'head' section folks. If you paste the following code into the head section, it will not work because the tag '' is not defined in Blogger header section while it is defined anywhere in the post section. Now find "<b:includable id='post' var='post'>" into your Blogger template source code, and paste the following code just below to it.

The following code is for one additional author.

<b:if cond=' == &quot;Mahek Fatima&quot;'>
<meta content='@mahekfatimag' name='twitter:creator'/>
<meta content='@shadabiitr' name='twitter:creator'/>

It will look like as a following preview,

add twitter meta tags to blogger multiauthor blogs

The following code is for two additional authors.

<b:if cond=' == &quot;Mahek Fatima&quot;'>
<meta content='@mahekfatimag' name='twitter:creator'/>
<b:if cond=' == &quot;authorname2&quot;'>
<meta content='@authorname2' name='twitter:creator'/>
<meta content='@shadabiitr' name='twitter:creator'/>

Similarly, you can add more authors. Don't forget to change the information with your own.

Things to note for best user experience in Twitter Summary Cards: 

  1. Image: You should use at least an image into your Blogger post. Using images in post is also a best practices to create attractive content. The first image you used in Blogger is basically a featured image and used for Blogger thumbnail by default. Make sure the first image has an aspect ratio of 1.91:1. Let your image height is 300px then your width should be 300*1.91=  573px. I recommend you to use 640px X 335px. It will properly fit on Facebook, Google+ and Twitter.
  2. Description: Make sure you are using description function in Blogger. You should use different meta description for each posts. Here is a full guide for create different meta description for Blogger posts.
  3. Title: Your Blogger post title should not contain blog homepage title. If it is, your title will easily reach out 70 character. Here is a guide to remove homepage title from Blogger posts.  
If you have any doubt for adding Twitter meta tags to your Blogger, you can feel free to ask here. I hope this guide helps you. You may join our newsletter to get update from us to your email.

Like Us on Social Media
Share this article
Copyright © 2015 • All Rights Reserved.
Powered by Blogger
back to top