Monkey Raptor

Friday, January 23, 2015

Dimensions for Website/Blog Thumbnail on Twitter, Google Plus, and Facebook

So Twitter Summary Card, in the old days, recommended square sized image.
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 size
  • 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).
We need to keep the image dimension intact, so it won't look weird.


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
  1. Twitter Card Overview
  2. Facebook Open Graph: Using Objects
Search engines (Google, Bing, DuckDuckGo, Baidu, Yandex, Goo, and all) don't need any special 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.
Dimensions for Website/Blog Thumbnail on Twitter, Google Plus, and Facebook
http://monkeyraptor.johanpaul.net/2015/01/dimensions-for-websiteblog-thumbnail-on.html

No comments

Post a Comment

Tell me what you think...