How to set up Twitter's "view summary" cards to work with Blogger posts

This article shows how to install Twitter Cards into Blogger - and explains why you might do this if Twitter could be an important source of visitors for your blog.

What are Twitter Cards

Recently, Neil Patel explained why having social sharing tags installed into your blog can be important, and I've written a little more about it specifically for Facebook and Blogger here.

Twitter, for reasons best known to themselves, have developed their own version of social media meta-tags, called "Twitter Cards". (Apparently they do make some use of Open Graph tags - but not for Twitter cards displays.)

Two things happen inside Twitter when someone tweets a message including a link to a website or blog that has Twitter-cards installed.

Firstly, the message has the words "View Summary" under it, instead of just "Expand".

Secondly, when someone in Twitter clicks the View Summary link, more information (ie a "Twitter Card") is shown about the contents of the link - like this:

In his post, Neil Patel also stated that if you don't use Wordpress,

"you’ll need to manually generate meta tags for each page on your site"

but fortunately for Blogger users who are brave enough to edit their template that's not quite true.

How to install Twitter Cards into a blog made with Blogger

There are two simple steps needed to set up Twitter sharing tags for your blog:

Adding the code to your template, and then
Asking Twitter if you've got it right.

The 2nd step is necessary because (for whatever reason) Twitter won't use the tags you have installed until you've tested them in Twitter's own validation tool.

Step 1 Add the Twitter Card meta-tags to your template

Edit your template in the usual way.

Find the </head statement, and just before it add the following lines of code:

<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@YOUR-TWITTER-ACCOUNT-NAME"/> <meta name="twitter:domain" content="YOUR-BLOG-URL"/>

<b:if cond='data:blog.pageType == "item"'><meta name="twitter:title" expr:content='data:blog.pageName'/><b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/></b:if>

<b:if cond='data:blog.postImageThumbnailUrl'><meta name="twitter:image:src" expr:content='data:blog.postImageThumbnailUrl'/><b:else/><meta name="twitter:image:src" content='URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST' /></b:if>
<b:if cond='data:blog.metaDescription'><meta name="twitter:description" expr:content='data:blog.metaDescription'/><b:else/></b:if>

<meta name='twitter:url' expr:content='data:blog.canonicalUrl'/>

Except, you need to replace a few items with your own values:

YOUR-BLOG-URL - with your blog's address (eg for me, it's blogger-hints-and-tips.blogspot.com)

YOUR-TWITTER-ACCOUNT-NAME - with the Twitter account name for your blog. (This line is optional)

URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST - with the web-address of an alternative picture to use if the post doesn't have a thumbnail image.

Save the template changes.

(Twitter also have a code-generator - but it's for websites in general, while I have configured the code above to use some of the values that Blogger makes available to us.)

Step 2 Validate your domain

After you have done the first step, go https://dev.twitter.com/docs/cards/validation/validator. This is Twitter's validating tool, where they check if your code meets their requirements.

Log in using your Twitter account.
You do need to have a Twitter account yourself - or at least one that is dedicated to the blog - to use the validator and thus to install Twitter Cards.

Click the Validate and Apply tab.

Enter the address of a post from your blog and press Go.

If you're using a browser that supports showing Twitter Cards, then a preview of the card for your post will be shown in the right side of the screen. Check that this looks correct.

Look at the list of results of your Twitter-card values shown on the left of the screen. If any of them show a red-dot, then there is a problem that you need to fix. Typically this will be because you've accidentally left out a quote mark when you were adding your custom values.

Fix any problems, and enter the blog-post URL again - keep going until you get a green dot at the top of the list. (Some of the twitter card values are option, so it doesn't matter if they show as grey because they're irrelevant for a Blogger site.)

Enter the URL of your blog overall (ie not a specific post).

If you do nothave a custom domain (ie your blog is myBlog.blogspot.com), then make sure you enter the blogspot.com URL, not the country-specific one (eg myBlog.blogspot.in). This is important later in the validation process.

Fix any problems for this as well. (There shouldn't be any, but I think it's worth double-checking, especially if you modify the twitter-cards code in any way.)

Press the Request Approval button at the top of the left hand sidebar.

Confirm the administrative details on the screen that opens - by default it will be filled in with details from your Twitter account. You may be asked for:

Contact information for the person responsible for administering cards on your website (name, email address, Twitter handle)
Website information: the URL (ie the domain), and a description. Note: if you are based outside the USA and don't have a custom domain, then most probably your country-specific address will be shown here. Change it to the blogspot.com address.
Whether your site publishes images or videos that may contain sensitive content (eg nudity, violence, or medical procedures) - so that Twitter can warn viewers before showing them.
The website's Twitter-name.

Press Submit Request.

After a moment, if your details are correct, Twitter shows a message saying

"Thanks for applying to be part of Twitter's cards service. We'll review your request as soon as possible. Expect a few weeks for turn-around time. You will receive an email when your request has been reviewed."

I'm not sure if they apply this to all (or indeed any) countries or Twitter accounts: when I installed Twitter Cards for this site, I got an email in a few minutes saying .

Your Twitter card is ready!
We've activated the summary card for blogger-hints-and-tips.blogspot.com.
If you want to use other kinds of Twitter cards (and we know you do), please make another request.

And the cards themselves were activated on a test-tweet that I did a few minutes after that.

What your readers see

If you have installed the Twitter Cards correctly, your current readers should see nothing different when they visit your blog or when they read your posts via email or and RSS feeder.

But when they include a reference to your blog in something that they send out inside Twitter, the content that they (and their followers) see is a nicely formatted card rather than an ugly-url.

Troubleshooting

Search Descriptions

Twitter cards will only work properly if you have enabled Search Descriptions for your blog, and if you have entered one for every post that is tweeted. I looked for ways around this using the post-snippet, but haven't found a way to make this work yet.

Country-specific redirects

Neil Patel suggested one tag that is not included in the standard Twitter Cards documentation: twitter:url

Using it gets around the problems associated with country-specifc URLs for blogspot domain blogs, by changing any Tweets of them to the blogspot.com page, instead of having your tweets split across multiple urls.

I've included it in my list of tags, customized to take its value from Blogger. However I'm not yet 100% sure if it will work - and will update this article accordingly.

Pictures

I've set up the image tag to use the thumbnail picture for each post - because that is the only one that you can access on a systematic way for each post.

Twitter's rules say that pictures must be less than 1mb in file size, at least 60px by 60px, and that ones larger than 120px by 120px will be resized. However Blogger may have a thumbnail photo for some of your posts that is less than 60-by-60. For these it is likely that your default image will be used instead.

The only way to over-ride this is to use a post-specific Twitter meta-tag which points to a larger photo like:

<b:if cond='data:blog.postURL == "URL-OF-THE-POST"'><meta name="twitter:image:src" content='URL-FOR-IMAGE-YOU-WANT-TO-USE-FOR-THIS-POST' />
</b:if>

Domains

Twiter's documentation was initially a little sketchy about which specific domain should be validated. Some people reported having to validate all three possible URLs, ie