(TAKE 2) PLANNING YOUR SHAREABLE IMAGE FOR SOCIAL

A critical step when designing a page or blog on your website is to design the shareable/SEO image so that your content will not crop when shared by you or others on social media. The shareable image will need to be uploaded on your website host. For example, if your website is hosted by SquareSpace, you define the shareable image in SquareSpace.

A critical step when designing a page or blog on your website is to design the shareable/SEO image so that your content will not crop when shared by you or others on social media.
— Tina Shivpuri, Prelytics

The dimensions shown below are approximately 2:1 ratios. Specifically, the starting image size is 1200 x 630px.

  • Blue: LinkedIn and FaceBook 1200 x 630px

  • Turquoise: Twitter: 1024 x 512px

The link to THIS page (in this case a blog page) has been shared on social media (Twitter, LinkedIn and Facebook). Here are the design steps to consider when designing the shareable image - using this post as a real life example.

 
Testing 1 2 3.png
 

TWITTER

Tweeting a Link

If your prefer a clickable image in your tweet, you may type a link in your tweet and twitter immediately auto-generates the clickable image and page title sourced from your source website and forces the dimension ratio to be a landscape (approximately 2:1). This is when images might undesirably crop. Be sure to upload your page thumbnail and/or shareable image as a desirable landscape (2:1) image. Below are some images of “desirable” vs. “undesirable” cropping.

Twitter Card - Large vs. Standard Image

If you prefer (and I think you would) displaying a large curated image for your link when sharing on social media, consider configuring the links in your tweets to display the Twitter Card’s “Large Summary Image.” For Wordpress, this might require a plugin. For Squarespace, this requires a single line of code. If your website is not configured to do so, the image defaults to the standard small thumbnail square - possibly an undesirable crop. Steps for leveraging the Large summary can be found on Twitter’s Developer website (Source: Developer.Twitter.com).

 
Prelytics Blog twitter small card vs large card.png
 

Tweeting an Image

If you tweet an image in Twitter it will not crop - it will display in the ratio as uploaded. However the image is not clickable. You can of course provide a link as part of the text (after adding the image). It will be in the text of the tweet followed by your “non-linking” image.

 
Twitter Posting as an Image.png
 

LINKEDIN

Similar to Twitter and Facebook, LinkedIn will crop your shareable/SEO image to approximately 2:1 when posting as a link, but if posted as an image (with link in text) the image will not crop. Good to know!

 
Linked In cropping.png
 


FACEBOOK

Facebook also has options to share a link with clickable image, specifically you can type a link or share via a Facebook Ad. Source: Developers.Facebook.com

 
Prelytics Blog facebook link shares.png
 


INSTAGRAM

Instagram plays by slightly different rules (e.g. your image crops to a square when viewing an account’s feed, but does not crop in your home feed). They also limit when and where images can link, e.g. images will only link if you created a “shoppable” link or if you have paid for a promotion link.

 
Insta Posts.png
 


NEXT STEPS

Now that we have all the crop talk out of the way, next steps would be to collect insight on your image and on your blog in general. Learn how How to Create A Pulse by Prelytics.

Tina Shivpuri