Table of Contents
If you're reading this, chances are that you hit the well-known scenario about Facebook picking the wrong image - or no image at all - while building the preview box for the post, article or page you're trying to share. We're talking about the title, description & image panel shown right below our post containing the sharing URL that our friends and followers can use to see what it's about before their most wanted click.
This brief tutorial explain how things work behind the scenes and will hopefully help you solve the issue: whilst all of this is Facebook-specific it will also be effective amongst other social networks such as Google+ and Twitter because they are also able to fetch the Facebook Open Graph interface to their own use: meaning that if you manage to fix your stuff on Facebook chances are you'll also fix the issue elsewhere.
Open Graph Meta-Tags
Here's what happens each and every time you share an URL over Facebook:
- Facebook checks if the given URL is already present in the Facebook cache; if the answer is yes, the previously-generated preview box will be used without modifications; if the answer is no, it will fetch the page looking for the Open Graph meta tags.
- Facebook connects to the URL and parses the web-page contents, looking for the following meta-tags in the <HEAD> section of the page itself:
It proceeds then to build then the preview box using the informations found. The [title] , [description] , [image_url] and [page_url] will be used as shown below:1234<meta property="og:title" content="[title]" /><meta property="og:description" content="[description]" /><meta property="og:image" content="[image_url]" /><meta property="og:url" content="[page_url]" />
All the informations either not present, not found or invalid in the meta-tags will be replaced with some automatically fetched data based upon other web page contents or previously-shared web pages from the same website: this can often result in mismatching titles, descriptions and - most frequently - images.
The issue
In short terms, if our Facebook post image in the preview box is wrong or broken the problem most likely relies upon one of the follosing scenarios:
- one or more relevant meta-tags are missing.
- one or more relevant meta-tags feature a content which is either empty, wrong or not compliant with the Facebook's content sharing best practices .
- a preview box for the given URL is already present in the Facebook cache.
Regarding point 2, please notice that Facebook will refuse to use any image smaller than a certain size (200x200 px at the time being), corrupted or with any special character in its file name: that's why you always have to check for the image size and ensure that the file name won't contain any character other than letters, digits, dots, hypens and underscores.
The fix
Luckily enough, Facebook provides its own debug tool you can use to check for above scenarios:
https://developers.facebook.com/tools/debug/
You can use this tool to check for the absence of any open graph meta-tag and effectively see all the reasonings behind the contents Facebook chose to use to build your preview box. All you need to do is to insert the URL in the textbox and then click on one of the following buttons:
- Show existing scrape information, to see the logic behind the already-existing, currently-cached preview box (if any).
- Fetch new scrape information, to force/simulate a brand-new scraping of the URL meta-tags and see the logic behind that.
Here's a scrape result example:
Looking at the scrape results you'll most likely be able to pinpoint your issue(s) among the three explained above. Here's what you can do to overcome them:
- Insert the missing meta-tag (!)
- Change the contents and/or the image file/name to made them compliant with the Facebook best practices in content sharing.
- Wait a few hours, knowing that - if you fixed the issue - all your future sharings will be working just fine.
IMPORTANT: If your image looks just fine but you still got an issue with that, ensure that the extension, mime-type and file integrity are also ok. Facebook won't accept any wrong-extension, broken or incomplete image file. If you don't know what to do, try to re-sample it from the source and/or upload it again.
Happy sharing!
