Have you ever tried to share a link (to your website) on Facebook, Twitter or LinkedIn, and been frustrated by a badly cropped image that shows up in the preview? Yes? In this article, I’ll explain how you can choose exactly what image to show when you share a link to your website on the big three social networks. The good news? It’s really easy…
Why a decent image matters…
For lots of psychological reasons that are beyond my expertise, humans are attracted to colourful and interesting images.
- Can you imagine how much more difficult it would be to read a newspaper that doesn’t have any photographs in it?
- Do you tend to avoid reading articles online that have zero images?
- When you see a Powerpoint presentation, do you prefer one with lots of text? Or lots of pictures/diagrams?
Even if you don’t consider yourself to be a visual person, you will always be attracted to photos and images, even if it’s subconciously. There’s a reason that all big-money advertising uses carefully-considered imagery in the adverts that they produce.
On social media platforms such as Facebook, LinkedIn and Twitter – using imagery will essentially help you stand out from the (considerable) noise, increasing the probability your content will get seen and clicked on.
Why you SHOULD set up images for pages on your website…
Even if YOU personally do not share links to pages on your website on the social networks, your customers and visitors will still share links to your website. That’s why you want to control what images (and text) are associated with your pages! Thankfully, it’s all fairly easy to do, and I’m going to explain exactly how to do it in the second half of this article.
Let’s see what happens when we don’t set up images properly…
Example 1 – Facebook – Where the main image is broken.
In this example, Facebook found an image, but couldn’t load it properly, and just showed a grey block. Clearly this doesn’t look very good at all, and makes it rather obvious that something is broken.
Example 2 – Facebook again, but the image is really small and has been cropped into a really small square.
The image I chose for this example is a really small image (300px x 200px), and is therefore too small for Facebook to stretch to the full width of the newsfeed. Therefore it’s cropped the image (made it smaller) to fit a small square. If Facebook cannot find an image for the article, sometimes it will use a logo or another image that it can find elsewhere on the page.
Example 3 – LinkedIn – where a really small image has been stretched and pixelated.
LinkedIn behaves slightly differently to Facebook, and it has stretched a small image to the full width of the newsfeed. By stretching a small image to fill a larger space, it’s created a pixelated image, where you’ll see the blockiness. Using images that are stretched like this will give a poor impression too, as it gives the impression of low quality.
Example 4 – Facebook – a good example, high resolution image, of the right dimensions.
This is what a good quality image looks like on Facebook. You’ll see that it fits the full width, no blockiness, and it looks really neat. This is the actual image I’ve assigned to the Transforming A Testimonial blog post on WP Doctors.
As the image is a high resolution image, it will automatically be resized by Facebook to look great on desktops, tablets and mobile phones.
Example 5 – LinkedIn – a good example, high resolution image, of the right dimensions.
This time on LinkedIn, you’ll see very similar, just without the description of the link below the image.
Example 6 – Twitter – again, same link, same photo…
Now we’re on Twitter. See how the layout is very similar to both LinkedIn and Facebook? So you’re now seeing that when we make the effort for just one platform, we don’t need to do anything special for the others. The platforms all use the same information… and I’ll show you how to do this in the next section.
How Facebook, LinkedIn and Twitter pick the image when you share a link
So here’s the good news… the work you need to make your chosen image work with Facebook, is exactly the same for Twitter and LinkedIn. Once you have the right photo, it takes about a minute per page to make this all work!
Techie Note: The social networks make use of something called Open Graph tags to detect what image and text to show when the link to your article is shared on social media. We’re going to use a WordPress plugin to automatically create and manipulate these tags to show our images (and text)
Step 1: For the image to work on all platforms, I recommend an image sized 1200 pixels wide by 630 pixels high. This image size will work perfectly on all 3 social media platforms when set as the main social image for a page (or blog post).
Step 2: You’ll need a plugin for WordPress that allows you to set the social images for each page on the website. I personally use and recommend Yoast SEO (a.k.a WordPress SEO), as it’s free and does the job (and other things) brilliantly. There are other plugins for WordPress that allow you to set the images for your website, but I’m going to focus on the Yoast SEO plugin, as it’s been my favourite for years.
Step 3 – Option A: Assuming that your WordPress theme doesn’t rely on the featured image for anything, Yoast SEO will use the featured image on a page for the social image. (Ask your developer to check for you).
Quick Note: When we create a WordPress theme for clients, we design the theme to take advantage of the social image (1200x630px) throughout the website. This means our clients only need to find one image for a page or blog article, and it’s used on the rest of the website.
Step 3 – Option B: If you can’t use the featured image for any reason, then use Yoast SEO to set your image. Look for the sharing tab (which has 3 dots and 2 lines), then set the image in the ‘Facebook Image‘ section.
Setting a default image for your pages…
Now, as you can imagine, setting the image for every single page on your website is time consuming! Thankfully, Yoast SEO provides a way for you to provide a default image that will be used if the image for a page hasn’t been set.
For my default image, I’ve chosen a picture of me, my brand name and my tagline. So if someone shares any page on my website that I’ve not chosen an image for, essentially they’ll be promoting my business/website.
Forcing the image to update… an introduction
A question that’s very commonly asked… how do you refresh the image that’s being shown on any of the big 3 networks? You’ll see specific instructions below… but if you’re testing images, I recommend using the Facebook method for testing, as it’s the easiest to refresh.
Forcing the image to update… Facebook
Step 1 – Find Facebook’s debug tool https://developers.facebook.com/tools/debug/ (you can Google for it by searching “Facebook debug tool”).
Step 2 – Enter the URL of your website, and click on the ‘Debug‘ button.
Step 3 – Click on the ‘Scrape Again‘ button.
Forcing the image to update… Twitter
Step 1 – Visit: https://cards-dev.twitter.com/validator (you’ll need to be logged in to Twitter to use this tool)
Step 2 – Enter the URL of the web page you want to refresh, and click on the ‘Preview Card‘ button. By clicking on ‘Preview Card’, it will update the Twitter cache at the same time with the latest version of your image.
Forcing the image to update… LinkedIn
Unfortunately, when you share a link on LinkedIn, it caches the image for 7 days. That means if you change the image on your website, LinkedIn will ignore the update for a week. There’s no way to force an update if you’ve changed the image. You’ve just got to wait.
The only solution for checking you’ve got the newer image working properly on LinkedIn:
- Your original URL:
http://www.domain.com/ - The new version, that we’ve changed slightly:
http://www.domain.com/?1orhttp://www.domain.com/?2, etc
Essentially, LinkedIn sees the new URL http://www.domain.com/?1 as a brand new web page, and therefore will just fetch the latest version of details from your page.
What images work best?
Finding great images for blog articles is tricky, as the best images are ones that you create yourself. The trouble is, most stock images are dull and feel very artificial (particularly images that contain people).
Why you just can’t use any image from Google Image Search?
This is a very common mistake made by business owners… the reason is because you’re at risk of being sued for copyright infringement or not having the right licence to use the image. Every so often, you hear about a business getting a nasty letter from some lawyers asking for a ransom payment. It’s rare, but entirely possible.
Some ideas for creating your own images:
- Idea 1 – Get a selfie of yourself with an object or doing something silly – if it’s you taking the photo
- Idea 2 – Draw a diagram, and take a photo of your diagram with your phone or camera (e.g. above)
- Idea 3 – Use some software (e.g. Canva) to create your image from scratch (but you can use stock images here, but customise the image using this tool)
- Idea 4 – Hire a designer (e.g. Fiverr.com, PeoplePerHour.com) to create your image from scratch
If you do use stock images, then stick to the following rules:
-
- Ensure that you’re using an image that has a free or paid Commercial Use licence (click here to search for examples on Google)
- Choose an image that’s interesting and offbeat, rather than clichéd and dull (such as the free photo above from Pexels.com).
- See if you can customise the image, such as with Canva – e.g. adding captions
(such as below)
In Conclusion
There’s a lot to this article, but let’s simplify it all:
- Use images – they make linking to your website on social media far more interesting (and professional)
- Ensure that images are 1200 pixels (wide) x 630 pixels (high)
- Use WordPress SEO or a similar tool with WordPress to set the social images.
- Do it for Facebook you’ll cover the other big 2 social networks (Twitter, LinkedIn)
- Avoid stock images, or use Canva to customise them if you’re rubbish at taking photos!
- Take your own photos to create interesting and licence-free images
