How do Reddit thumbnails work?

The other day I submitted Vidrio to /r/MacApps. After submission I found that the thumbnail for the submission defaulted to a generic image, rather than being the Vidrio icon. Why?

Reddit uses Embed.ly to retrieve a thumbnail for the submission. Embedly respects a standard called oEmbed (“open embed”?). This means, when I submitted https://vidr.io to Reddit, Reddit made a request like

curl -X GET 'https://api.embedly.com/1/oembed?format=json&url=https%3A//vidr.io&key=REDDITS_EMBEDLY_API_KEY'

and Embedly responded with some info about https://vidr.io in a JSON format defined by oEmbed. Embedly is a paid service but it offers a free HTML snippet generation service which presumably uses the same logic. Here’s the embed for Vidrio:

Vidrio for macOS
Vidrio for macOS is a holographic screencast app. Present from the future™

No thumbnail! For contrast, here’s the embed for a site which got a thumbnail on Reddit:

Speedtest by Ookla on the Mac App Store
Read reviews, compare customer ratings, see screenshots, and learn more about Speedtest by Ookla. Download Speedtest by Ookla for Mac OS X 10.10 or later and enjoy it on your Mac.

How does Embedly decide on the thumbnail for that URL? oEmbed doesn’t specify this; it only defines the formats of requests and responses. However, Embedly describes their process for choosing the image:

Embedly looks at the following attributes of the page and then ranks and scores the images.

If the oEmbed type is photo the url of the oEmbed object

The thumbnail_url of the oEmbed object if the oEmbed type is not photo

The Open Graph og:image property

The meta image_src tag.

Any images found in the API response.

Images ranked and pulled from the body of the page.

The one to pay attention is “The Open Graph og:image property”. Embedly follows the Open Graph protocol, which “enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.”

More concretely, Open Graph defines some meta tags, like og:image, which can be used to build an embedded representation of the page elsewhere.

So, here’s my answer: https://vidr.io didn’t get a thumbnail because the page doesn’t include an og:image. I’ll go about adding some Open Graph properties to the Vidrio site.

What can computers do? What are the limits of mathematics? And just how busy can a busy beaver be? This year, I’m writing Busy Beavers, a unique interactive book on computability theory. You and I will take a practical and modern approach to answering these questions — or at least learning why some questions are unanswerable!

It’s only $19, and you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

After months of secret toil, I and Andrew Carr released Everyday Data Science, a unique interactive online course! You’ll make the perfect glass of lemonade using Thompson sampling. You’ll lose weight with differential equations. And you might just qualify for the Olympics with a bit of statistics!

It’s $29, but you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

More by Jim

Tagged . All content copyright James Fisher 2017. This post is not associated with my employer. Found an error? Edit this page.