Have you ever shared a link on social media only for it to look, well, ugly on your feed? Join the club. If I only had a nickel for every time I shared a website URL and it didn’t preview a nice-looking image. You know what I’m talking about; instead of an aesthetically-pleasing preview image that features a small photo, the headline, and the first few sentences of a story, it sometimes shows just a measly old link.
Sure, the link still gets the job done: it directs users where to go. But is a stand-alone link really as enticing as a nice preview image that displays a photo and the first few sentences of an article? Definitely not. The latter is infinitely more clickable and that’s what we’re after as content creators, right? Traffic.
And in order to drive the most traffic possible, links need to be as clickable as possible.
So if you’re interested in tips in how this is done keep reading to find out tips on how to display nice preview images on social media!
How to display a nice preview image on Facebook
Facebook is usually the easiest social media channel to get a nice preview image. Really all you have to do is paste a link in the “create post” tab. Depending on how the article was set-up, after pasting the link, an image and headline should appear. If you want to change the copy, now, you can actually delete the text of the link while the rest of the preview image and link should remain clickable. Include whichever text you so choose to promote the article.
But what about sizing? You may have noticed links to some websites display differently. A lot of it has to do with the website’s coding in the backend. On Facebook, there are generally two sizes: a large link preview and a mobile. As of publication, the large link preview appears at 470×246 pixels, but on mobile, the preview will be 560×292 pixels. But if the image on your blog post or article can’t be rendered in the large link preview (470×246) because it isn’t big enough, then Facebook will automatically resize it as 154×154 pixels or even smaller at 90×90 pixels. See? It all depends on how images are rendered in the backend.
Speaking of the backend, Facebook removed the ability to customize link metadata back in July 2017. Prior to that, Facebook users could customize the metadata including the headline, description, even the image.
Now, let’s get to the images. While it’s true that URL links display differently based on the metadata from the original blog post or article, that doesn’t mean there aren’t ways to combat these issues. For example, say you paste a link and the image won’t preview. You can troubleshoot this issue by checking to ensure that your original image from the post is at least 200×200 pixels. Is it? If so, check out this tool from the developers of Facebook – Facebook Object Debugger – that looks at the URL and provides solutions. After Object Debugger offers up some troubleshooting advice, paste the link again; it should be good to go.
How to display a nice preview image on LinkedIn
When adding a post to LinkedIn, many of the post’s elements are customizable. For example, the thumbnail image and title can be edited as the publisher sees fit, just like on Facebook. An auto-generated thumbnail will usually show up once you paste a link into LinkedIn’s post-builder, but you should have the option to edit it. In the event that you’d prefer to add your own image to a post, keep in mind that the image should be no more than 200px in width and use a 1.91:1 ratio. While images on mobile won’t be cropped, images that utilize ratios more than the recommended 1.91:1 will show in full with white padding around the sides. If you want to avoid the padding, stick to the recommended ratio.
How to display a nice preview image on Twitter
Unlike with Facebook, getting links to display a nice preview image can be more complicated. For example, you can’t delete the actual URL on Twitter the way you can on Facebook. Once you paste the link, the link must stay there so users have a clickable URL. If you delete the link, there will be no URL to direct users to. You can, however, shorten links using common tools such as bit.ly
On Twitter, images are called Twitter Cards. Twitter Cards allow users to attach rich photos, videos, and media experiences (like GIFs) to Tweets, according to developers. With a few lines of HTML, tweeted links to content can have an attached Card. There are several kinds of Twitter Cards – Summary Cards, Summary Cards with Large Image, App Cards, and Player Cards.
- A Summary Card features a title, description, and thumbnail.
- A Summary Card with Large Image features the same as the Summary Card, but with a larger image.
- An App Card offers a direct download to an app.
- A Player Card displays alternative media like video, audio, or a GIF.
Want to add the Twitter Cards feature to your own content? All you need to do is add the correct metadata to your website, or post. You can find the necessary tags here. Before posting, make sure to run it through Twitter’s Card Validator. (More on that below!)
Like on Facebook, links to websites display in different ways on Twitter. (Again, it has to do with the sizing of images on the original blog post or article.) For example, some website links might display an image with a headline while others may not feature a display image. In the latter case, you may want to upload a separate image. If you don’t, Twitter will autofill the image space as a small gray square with a small thumbnail of a notebook. Not exactly clickable. This has to do with the meta tags and metadata that is filled out on the website you’re linking to.
The Twitter link preview image size is exactly the same as on Facebook. For the correct proportion, Twitter link shares should be 1.91:1.
If you don’t want to upload a separate image, then you can use Twitter’s Card Validator, which is a very similar tool to Facebook’s Object Debugger. The Card Validator allows you to preview what the link will look like. If you don’t like the way it looks in the preview, this is your opportunity to change an aspect before dropping the URL.
It’s not impossible to get a nice preview image on Facebook, LinkedIn, and Twitter. It just takes a bit of finagling. Always make sure to preview the way your links display before posting. If you need help adjusting something, head over to Twitter’s Card Validator or the Facebook Object Debugger.