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 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:
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
thumbnail_urlof the oEmbed object if the oEmbed type is not photo
- The Open Graph
- The meta
- 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.
I wrote this because I felt like it. This post is not associated with my employer. This site is hosted by Netlify (who are great, but I'm not associated with them either).