Have you ever shared a link on social media and noticed how that link automatically produces a rich snippet? This is when you see a big image pulled in along with the title and brief description of the page being shared.
Well, these don’t happen by accident. This is the direct result of having proper meta data or “tags” added in the web page’s source code. In the case of Twitter, however, there are Twitter-specific tags needed to populate media-rich snippets in tweets its called Twitter Cards.
These tag usually placed between <head> and </head> in our HTML editor but we can insert this tag inside our post or page article while we using HTML edit mode and not Compose mode when editing or make a post. Simply copy and paste the template below, and make sure to replace any orange text with your own data.
<!-- Twitter Card data -->
<meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:site' content='@twitter_username'/>
<meta name='twitter:title' expr:content='data:view.title.escaped'/>
<meta name='twitter:description' expr:content='data:view.description.escaped'/>
<meta name='twitter:creator' content='@twitter_username'/>
<!-- twitter:name with condition -->
<b:if cond='data:view.featuredImage'>
<meta name='twitter:image' expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")'/>
<b:elseif cond='data:widgets'/>
<b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
<meta name='twitter:image' expr:content='resizeImage(data:imageUrl, 1200, "1200:630")'/>
</b:loop>
<b:elseif cond='data:blog.postImageUrl'/>
<meta name='twitter:image' expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")'/>
</b:if>
That tempale above is a minimal Twitter Card Meta, for the full template follow guidelines from twitter developer guide at Optimize Cards with Summary Card Large Image
We can check or debug how our page will be seen when someone share our post by visiting Official Twitter Card Validator.
Explanation
We using a 'twitter:card' with 'summary_large_image' which mean the card will be displaying an image at full witdh. We can change it to display small picture in the left side of card by changing a word 'summary_large_image' with 'summary'. Note, 'summary_large_image' have minimum dimension exactly or larger than 300x157px while 'summary' have 144x144px minimum image dimension.
The 'twitter:title' is our Page Title, and 'twitter:description' is our page Description while twitter:image is our page image. If we already have an Opengraph Meta, we can eliminate those three part. Blogger can generated those Opengraph tag automatically, click here for detail about implementing Opengraph.
The 'twitter:site' and 'twitter:creator' must be filled with our twitter username, so you must have register first if dont have one.
Blogger , Tips and Tricks
