How to Add Twitter Large Summary Card to Blogger

Paste your parsed code here. Paste your parsed code here. The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich photo experience, and clicking on the image brings the user to your website.

Twitter Summary Card with Large Image Markup 

The basic Meta tags for Twitter are:
twitter:card = Should be set to a value of 'summary_large_image'
twitter:site = @username the card should be attributed to. Required
twitter:title = Title or alternate title of post
twitter:url = URL of post
twitter:description = Brief description in less than 200 characters
twitter:image:src = Card should be at least 280px in width, and at least 150px in height

How to Add Twitter Cards to Blogger Blog

Step 1: Before editing template remember to backup it first

Step 2: Then go to Blogger Dashboard >> Template >> Edit HTML >> Click anywhere in Code Editor and then search(CTRL + F) for the following

Step 3: Paste the following code right underneath and change the colored text to your own information.

Replace @solvelogger with your blog twitter username. If you and blog twitter username is different replace @YourName with your use name if not then add you username in it.

How to Apply for Twitter

• Make sure that you have successfully installed Twitter Cards code on your blog.


• Run your URL against the validator tool to test.


• After testing in the validator see the Card appear below your tweet in the details view.


• Use Twitter Card analytics to measure your results.

Problem We Face

In first time implementing Twitter Summary Card with Large Image , image in twitter cards simply failed to load. Seemed that the image being pulled from data:blog.postImageThumbnailUrl in the Validator was coming up very small (72x72px) thus probably why the summary_large_image card wouldn't render it since the minimum required is over 280px wide.
So we solve by replacing data:blog.postImageThumbnailUrl to data:post.firstImageUrl which simply worked like a charm.

If you have any other suggestion or issue regarding this post comment below

Paste your parsed code here. Paste your parsed code here.