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.
Conclusion
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.
What’s your favorite social media site to share links on? Tweet at us, leave a comment on facebook or message us on LinkedIn.
Steph O.
Steph Osmanski is a freelance writer and social media consultant who specializes in health and wellness content. Her words have appeared on Seventeen, Life & Style, Darling Magazine, and more. She is currently pursuing an MFA in Creative Writing at Stony Brook Southampton and writing a memoir.
Kristy Bauman
You May Also Like
Summer is coming and we all know what that means: lazy afternoons at the pool, evening BBQs, the scent of sunscreen, the packing of suitcases, and the ever-growing pile of work that still has to be done. Staying productive in the summertime can be tough. After all, we want to take…
read more >
It is no secret that videos grab attention more than words. Despite being able to turn a phrase like nobody else, Shakespeare would still have struggled to compete with a clearly constructed how-to video. People enjoy learning from and sharing videos. Simply Measured looked at Facebook’s top 10 brand pages…
read more >