I think (correct me if I'm wrong).
Nowadays, it'd be cropped.
When I looked again at the Twitter Card Validator, the image container on the summary card has
120px x 90px
in dimensions.Using super sweet Algebra, I simplified the ratio into 4:3.
4 for the width and 3 for the height.
For instance, you already have an image with
300px x 300px
size, then you need to stretch the canvas (not the image) of the image. Like so:Initial canvas sizeWe need to keep the image dimension intact, so it won't look weird.
- Width: 300px
- Height: 300px
Stretched canvas
We need to stretch only the width of the canvas.
- So, new width: (4/3) * 300px = 400px
- Height: 300px (the same).
Result
- On Twitter (the summary card), it will be displayed as (or shrunk to)
120px x 90px
in size. - On Google+, using the 4:3 ratio, it will be shown quite awesome. So you might want to make your image at least 300px high, so it won't look blurry.
- Facebook will also display it like Google+ does. Huge.
How to stretch just the canvas?
I use the magnificent very earlier version of Photoshop here.
On Photoshop, you can click the Image menu ► Canvas size ► switch the dimensions in pixels ► tinker the new canvas size.
Then Save for Web & Devices ► I'd recommend using transparent png format for that.
On your site/blog
Upload your new image to your file server/cloud ► then update your website/blog image thumbnail link/source. In the
meta
tag.
While I was typing this
I searched for Twitter Summary Card documentation, and yes, it will be shrunk to
120px x 90px
. The minimum dimension is 120px
for height and width.Thus, use 4:3 ratio if you don't want the thumbnail getting cropped (for Twitter Summary Card).
Link on Twitter Developers
References for website/blog
meta
tags
- Twitter Card Overview
- Facebook Open Graph: Using Objects
meta
. The official super crawlers will collect the matching Twitter/Facebook tags, plus your interesting contents of course.Other social medias probably follow what Twitter/Google+/Facebook has for the social sharing display.
No comments
Post a Comment