How to Add Twitter Large Summary Card to Blogger 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 p...
2017-12-15T08:09:03Z

How to Add Twitter Large Summary Card to Blogger

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 Large Summary Card

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
<b:includable id='post' var='post'>

Step 3: Paste the following code right underneath and change the text to your own information.
<!--TWITTER CARD CODE-->
 <meta content='@howlmeflash' name='twitter:site'/>
 <meta content='@howlmeflash' name='twitter:creator'/>
 <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
 <meta expr:content='data:blog.pageName' name='twitter:title'/>
 <meta content='summary_large_image' name='twitter:card'/>
 <b:if cond='data:post.firstImageUrl'>
 <meta expr:content='data:post.firstImageUrl' name='twitter:image'/>
 <b:else/>
 <b:if cond='data:blog.postImageThumbnailUrl'>
 <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
 <b:else/>
 <meta content='https://lh3.googleusercontent.com/-9Fy3-ME-5VA/VfhZDh1oQOI/AAAAAAAABFc/SPkLmVpV1aY/s1600/no-thumbanil-available.png' name='twitter:image:src'/>
 </b:if>
 </b:if>
 <meta expr:content='data:blog.pageName' 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.pageType == &quot;item&quot;'>
 <meta expr:content='data:blog.title' name='twitter:title'/>
 </b:if>
 </b:if>
 <!--TWITTER CARD CODE END-->

Replace @howlmeflash with your blog twitter username. If you and blog twitter username is different replace @howlmeflash 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
Share it:

Blogger

Blogging

How To

Social Media

Tutorial

Twitter

Post A Comment:

0 comments: