fallback.pics
Start using API
Blog Content Workflows 7 min read

Reddit and Hacker News Social Preview Images That Stick

Optimize social preview image tags for Reddit thumbnails and Hacker News link previews so your posts generate clicks from developer audiences.

social preview imageReddit thumbnailHacker Newsog:imagedeveloper marketing
Reddit and Hacker News Social Preview Images That Stick

Reddit generates a thumbnail for link posts by fetching the og:image meta tag from the submitted URL. Hacker News does not display images at all — it is a text-only feed — but the content of your page's og:image is still read by the HN companion apps and bots that many users rely on for reading HN content.

For developer tools and SaaS products, Reddit and Hacker News represent high-intent traffic. A post that surfaces on r/webdev or the HN front page sends experienced developers who evaluate technical quality quickly. The first visual impression — the thumbnail on Reddit — shapes whether someone clicks through.

Reddit thumbnails

How Reddit generates thumbnails from social preview image tags

Reddit's link scraper fetches og:image from the submitted URL when a link post is created. If og:image is present and returns a valid image, Reddit generates a thumbnail at approximately 140×140 pixels and displays it on the left side of the link card in list view. If og:image is missing, Reddit shows a default icon based on the subreddit or no thumbnail at all.

Reddit does not re-fetch the thumbnail after the post is created. If you update og:image after the post is submitted, the existing post keeps the original thumbnail. Only new posts pick up the updated image.

Reddit also reads twitter:image as a fallback when og:image is absent. The image must return a 200 response with a valid image Content-Type. Reddit's scraper times out after a few seconds, so slow image generation APIs can result in missing thumbnails even when the URL is valid.

Image strategy

Choosing the right social preview image for technical content

For developer tools and libraries, the OG image should communicate what the product does at a glance. Text-heavy images that explain the tool perform better in developer communities than abstract brand imagery. A thumbnail showing 'Fallback Images for Production Apps' in readable text on a dark background works. An abstract gradient with a logo is harder to read at 140px.

Reddit's thumbnail is 140×140 — square, small. Design your og:image with a center-safe zone. Any essential text or logo should be within the middle 40% of the 1200×630 image. When Reddit crops to 140×140 from the center, your key content should still be visible.

Hacker News companion apps like Hacker News PWA, Reeder, and Apollo for HN display the og:image at varying sizes. Some show a full 1200×630 preview in article view. Others show a small thumbnail in list view. Design for legibility at both 140px and 630px.

Implementation text 
<!-- OG image optimized for Reddit and HN companion apps -->
<!-- Center-safe design: key text and logo in central 40% of frame -->
<meta property="og:image"
  content="https://fallback.pics/api/v1/thumbnail/1200x630.png
    ?text=Fallback+Images+for+Production+Apps
    &label=fallback.pics
    &theme=purple&style=soft" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Twitter Card — Hacker News apps often read this -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image"
  content="https://fallback.pics/api/v1/thumbnail/1200x630.png
    ?text=Fallback+Images+for+Production+Apps
    &label=fallback.pics&theme=purple&style=soft" />

Hacker News

What HN reads and what it ignores

Hacker News itself does not display images in its classic text-only interface. The og:image URL is not used by news.ycombinator.com directly. What HN does display is the domain name next to the link title. The visual identity on HN comes from your title copy, not from any image.

The HN ecosystem is large. Companion apps, bots that post HN links to Slack, browser extensions that add previews to HN pages — all of these read og:image. If your og:image is missing, HN links shared in Slack or Discord show no preview image, which is a missed opportunity when the link is to developer content.

For 'Show HN' posts (product announcements), HN readers click through to your site. Your landing page's first impression matters more than the HN listing's appearance. The og:image is relevant when the Show HN link gets shared secondarily on Twitter or Slack.

Submission timing

Making sure og:image is set before submitting to Reddit

Reddit fetches og:image at submission time, not at the time the thumbnail is first displayed to users. If you submit a link before the og:image tag is in place, the post has no thumbnail permanently. Deploy your og:image meta tag before announcing a product or post on Reddit.

If you submitted a post without an og:image by mistake, the only fix is to delete the post and resubmit after adding the tag. Reddit does not provide a mechanism to refresh a post's thumbnail. Check your og:image tag is rendering in the page source before hitting submit.

Caching

Reddit thumbnail caching and URL stability

Reddit stores a copy of your thumbnail image on its own CDN (i.redd.it). The cached copy is immutable — it never updates from the source. This is another reason to have the og:image URL correct before submission. A generated fallback.pics URL is stable and returns the same image on every request, making it a reliable source for Reddit's scraper.

Because the thumbnail is stored by Reddit, fallback.pics does not need to serve the image repeatedly for Reddit traffic after the initial scrape. Reddit's CDN copy handles all subsequent requests from Reddit users.

Key takeaways

What to standardize before shipping

  • Reddit generates thumbnails from og:image at submission time — set the tag before you post, not after.
  • Reddit crops to 140×140 from center; keep key content in the central 40% of your 1200×630 image.
  • Hacker News itself ignores og:image; companion apps and platforms that share HN links use it extensively.
  • Text-heavy OG images that explain the tool perform better than abstract brand imagery on developer platforms.
  • Reddit stores a copy of your thumbnail on its CDN — an immutable image is set at submission time forever.

Production fallback layer

Use fallback.pics anywhere an image URL is accepted.

Start with one deterministic URL and standardize fallback behavior across your design system.

Read the docs

Continue reading

Facebook and Meta OG Image Fallback Setup Checklist
Content Workflows

Facebook and Meta OG Image Fallback Setup Checklist

Fix facebook og image size issues and missing Open Graph images on Facebook and WhatsApp with a deterministic fallback URL strategy.

 Discord and Slack Link Preview Image Fallback Guide
Content Workflows

Discord and Slack Link Preview Image Fallback Guide

Fix slack link preview image failures and Discord embed images with deterministic og:image fallback URLs that unfurl reliably in both platforms.

 OG Image Placeholders for Blogs, Docs, and Social Sharing
Content Workflows

OG Image Placeholders for Blogs, Docs, and Social Sharing

Use generated OG image placeholders for blog posts, documentation pages, changelogs, and social previews while final artwork is unavailable.