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.