When you share a URL on Facebook for the first time — specifically, the first time anyone has shared it — it won’t include any of the images on the page and our clients will be :cry:. This happens even if you have included a meta tag that references an image:

<meta property="og:image" content="http://foo.com/image.png">

The second time a URL is shared, it’ll work as expected and your chosen og:image will show up in the share preview (along with any other images on the page) — Facebook seem to have shifted this all to a background job or something.

Fear not! There is a solution. If you include the dimensions of your image alongside the og:image meta tag it’ll force Facebook to show the image immediately:

<meta property="og:image" content="http://foo.com/image.png">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="400">

These dimensions don’t actually have to be accurate either. On Readings we don’t know the dimensions of images as they’re provided by Erudite without any meta-information, so we do a best-guess approach based on the ratio that book covers (or CD covers) tend to be.

When sharing links to Facebook, ████████ were only being given the option to display old images, and couldn’t work out why the new ones weren’t coming through.

As it happens, there are specific metatags required to force Facebook to notice the correct content, explained here.

“Without these tags, the Facebook Crawler will use internal heuristics to make a best guess about the title, description, and preview image for your content.”

To force refresh of a particular item without updating the site itself, you can also use the Facebook debugger.

If you go there, input the URL and click “Fetch new scrape information” until the “right” content shows up at the bottom.