Skip to content
Toggle the navigation

Social media

Having great preview thumbnails is a surefire way to attract more users when your website is shared on social media.

I mean, let's try it out.

Which one are you more likely to click on?

koalati.com
Social media - Koalati

or

koalati.com
Optimize your site for social media
Attract users with website previews optimized for Facebook, Twitter, Slack, and more.
Good point. So...

How can I improve my website previews on social?

There are three main things you need for a good social preview thumbnail: an image, a title and a description.

The image

Your thumbnail's image is what attracts attention the most. Make it clean and simple: it needs to be easy to scan in just a glance.

The ideal resolution for this image is around 1200x630px.

To use an image as your page's thumbnail, you'll have to add an og:image meta tag with the URL of the image as the content. Ex.:

<meta property="og:image" content="https://uploads-ssl.webflow.com/6114382d5af6775b0abebe2c/6152004db6e19037ce1a3ad7_sampl-preview_compressed.jpg" />

To improve your previews on Twitter, you can define the type of preview card you want to use. This affects how your image is displayed in people's feed.

The title

By default, social previews will use your page's title.

If you want to specify a different title for social previews, you should use the og:title meta tag. Ex.:

<meta property="og:title" content="Your Social Preview Title" />

The description

You attract people's eye with the image, intrigue them with the title, and tease or sell them with the description.

Just like the title, your page's meta description will be used by default, but you can specify a description for social media with the og:description meta tag. Ex.:

<meta property="og:description" content="Drive more traffic to your website by generating great thumbnails on social media!" />
Got it! So...

Is there a way to check if I did it right?

Of course! Both Facebook and Twitter have tools to let you see what your page's preview will look like.

If you prefer to see an overview of what's done and which pages need improvement however, the best way to do so is to scan your entire website in one go with Koalati's Social tool.

Our tool will provide you with recommendations on how to improve your social previews for each page that is missing social meta tags (or their fallback tags).

But what if...

I don't have time to create images for every page!

It's true, designing new images for every page and blog post you make can be a very lengthy process.

When you're on a budget or a tight schedule, you have to pick your battles, and simplify some things to make space for others.

Something you can do to save time is to automate the creation of social media images and thumbnails. All you have to do is create a template, and plug it into a service that'll generate the images of every page for you (or make your own!).

Our favorite service for that here at Koalati is Bannerbear. If you spend more than an hour per month on designing and creating thumbnails and social media images, their service will end up paying for itself in saved time. Plus, just like Koalati, it's an open startup created by a solo founder who puts all of his care and energy into the product, so you know it's good.

P.S:
No, Bannerbear is not a partner or affiliated with Koalati.
We just really like what Jon is doing over there!