There’s nothing worse than getting ready to share your latest piece of epic blog content, and Facebook wants to play games with your link images. Am I right?
At some point we’ve all yelled at our screen something like: “Come on, Facebook. Seriously?! I’ve created a jaw-droppingly good graphic with Canva, to match my insanely imaginative blog post, and now you’re telling me you want to use a linky badge from my sidebar as my link image?!”
Sometimes Facebook might not display a link image at all, and will leave you wondering why they have forsaken you. Is it because they noticed you’ve spent more time tweeting or finding the perfect filter for the photo of your sandwich? Not likely.
Most of the time it’s because:
- Facebook has got an older version of your page/post cached, or
- You’re making it hard for them to find the right image to display with your link.
It can also be due to the size of your image so make sure you check that first. Remember, Facebook requires the image be larger than 200x200px, otherwise it will ignore it.
How to fix your Facebook link image
Before you even think of hitting post; First things first, have you tried SHIFT + REFRESH(F5)? If your link image isn’t showing at all, you should try and refresh your page. Sometimes things don’t load properly, especially if your blog is a bit on the slow side, or your blog’s host gets a load of requests at the same time. Giving Facebook the old classic refresh will often sort this problem out.
If Facebook is showing an image with your link but it’s not the one you wanted it to show, there is a quick fix for then and there. Just use the little navigation arrows that appear when you hover your cursor over it to cycle through the images from the post or page, until you get to your share image.
But you really don’t want to have to cycle through the images each time you want to share. So here’s how to get Facebook to show the correct link image, every time.
The solution: Open Graph tags
Open Graph tags are basic bits of metadata that tell social sites such a Facebook the correct title and image to use when linking to, in our case, a blog post.
There are four required open graph (OG) tags that you’ll need to use on each post or page:
og:title– The title of your post as it should appear in the link.
og:type– For a blog post, the type would be “article”.
og:image– The URL of your link image.
og:url– Your link URL.
You could add these manually to every single post, but who wants to do that?
Not me, or anyone I know for that matter. Luckily, there’s several automated solutions to add Open Graph tags to your blog posts.
Check your Open Graph tags
Let me introduce you to my good friend, Facebook Debugger. The nice engineers over at Facebook decided to create this handy tool to do two main things (amongst others).
The first functionality is:
- It checks for any errors in your OG tags and gives suggestions to fix those errors, plus shows you an og:image preview.
Simply go to https://developers.facebook.com/tools/debug and enter your link URL and click ‘Debug’.
The page will display the OG tag data for the link URL you entered, along with a few other bits of info Facebook needs. If you scroll down this page, there are two areas where your link image appears. You’ll see a section titled ‘og:image’, and another lower down titled ‘When shared, this is what will be included’. If all is well, it will display the link share box with your title, description and image all perfectly in place. If not, it will make suggestions on how to fix those errors.
The second functionality is:
- It clears the Facebook cache for your link URL.
This is a valuable function to have access to. Imagine if you posted a link on Facebook and it’s not quite right. There’s a spelling mistake in the title or the link image isn’t right. You correct the mistakes on your blog post, and make sure your OG tags reflect the changes, then post again to Facebook.
Chances are nothing will have changed. But why is this? Well, Facebook will have already cached your URL the first time you posted your link. So, for speed when you re-post your link, Facebook uses the version it already has, rather than go and fetch the info again from your post.
The Facebook OG Debugger (when you click ‘Debug’) will refresh the Facebook cache for the URL and will show the changes you made, rather than use their old cached version. It’s useful to add the Debugger to your bookmarks/favourites as you’ll need to use it from time to time.
How to implement Open Graph tags
OG tags live in the <head> section of your website’s code. If you’re not too familiar with HTML then you’ll want to get your web developer to help. The great news is that most blogging platforms have easy ways to implement OG tags, without the need of a code geek.
One of the great things about WordPress is it’s easy to setup and adjust OG tags. Many WordPress themes have OG tags already coded in to their pages, so there’s no need for a third party plugin. The theme will use the featured image of the post as your OG image.
If your theme doesn’t add the OG tags for you, there’s a couple of options to get them applied. The Jetpack plugin via it’s ‘Publicize’ and ‘Sharing’ modules add OG tags to your blog’s posts. Jetpack also uses the post’s featured image as the OG image.
I suppose I should make a mention of Facebook’s own plugin, that will add OG tags for you.
Personally, I avoid Jetpack on Blogglebox and let my SEO plugin handle the OG tags for me. Why? Because the Yoast SEO plugin adds a handy tabbed section below each post editor screen. It allows you to easily set the OG title, OG description and OG image for each social network you’ve set up the plug-in for. It will also use a default image the user can set if a featured image is not applied to your post, or if an OG image isn’t specified.
Open Graph Conflicts (and how to resolve them)
Sometimes your link image won’t appear correctly because you have multiple OG tags. This can be caused by themes supporting OG tags being used along side plugins that also add OG tags. The resulting multiple OG tags can confuse Facebook when it goes to your page to scrape the open graph info it needs to display your link. In most cases, the plugin authors are aware of potential conflict issues and allow their OG tags to either be overwritten by the theme or visa-versa.
Jetpack isn’t so thoughtful and so requires some manual intervention if a conflict occurs. They have written a quick way to turn off Jetpack’s OG tags. You’ll need to add the code they give you in to your blog’s functions.php file via the WordPress editor.
It’s easy to fix your link image
So, to recap, you’ll need to:
- Check your image size
- Try refreshing the Facebook page
- Check Facebook OG Debugger
- Implement OG tags (where applicable)
- Correct any errors or conflicts
I’d love to know if you already use OG tags on your blog or is this new to you? Let me know if there’s anything I can do to help!