Screenshots, share image and demo video: what a launch listing needs

The launch checklist lists the assets to prepare. This section is about what goes in them.

• First screenshot: the result. The screen a user sees when the product has done its job. A finished report, a sent invoice, a passing check. Leave the sign-up form, settings page and empty dashboard out.
• Realistic data. Fill the screen with plausible content. “Test test 123” and lorem ipsum make a product look unfinished. Don’t use real customers’ data.
• One idea per image. If a screenshot needs three arrows to explain, crop it to the part that matters.
• Readable at listing size. Listings show images much smaller than you captured them. Zoom the browser to 125% or 150% before capturing so the text stays legible when the image is scaled down.
• A caption inside the image, if any, of a few words. A short line above the screenshot naming the benefit is fine. A paragraph is not; nobody reads it and it shrinks the product.
• An honest picture. Show what exists today. Mock-ups of features you haven’t built bring sign-ups that leave on the first screen.

A reasonable set is four images: the result, the main workflow in one or two steps, one thing that sets the product apart, and the product on a phone if it works there.

Share image (Open Graph)

The Open Graph protocol itself recommends no dimensions. It defines og:image, optional og:image:width and og:image:height in pixels, and og:image:alt (ogp.me). The numbers come from the networks that read the tags:

• Facebook: at least 1200 × 630 pixels for the best display on high-resolution devices, at least 600 × 315 to get the larger preview, an absolute minimum of 200 × 200, an aspect ratio as close to 1.91:1 as possible, and a file no larger than 8 MB (Meta’s sharing docs).
• LinkedIn: a recommended ratio of 1.91:1, minimum dimensions of 1200 × 627 pixels, and a maximum file size of 5 MB (LinkedIn help).

One image at 1200 × 630 satisfies both to within a few pixels. Meta also recommends declaring the width and height tags so its crawler can render the image the first time someone shares the link, without downloading it first:

<meta property="og:image" content="https://example.com/share.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Invoice list with two overdue invoices highlighted">

Keep the important content away from the edges, since networks crop differently. Preview the result with the social preview tool. The guide on Open Graph images goes into the tags in more detail.

Product Hunt

Product Hunt’s launch guide gives a recommended logo size of 240 × 240 pixels, as JPG, PNG or GIF up to 2 MB. At least one gallery image is required, the recommended size is 1270 × 760 pixels, and its checklist suggests three or more (source).

Other boards and directories

Read the submit form. Where a board gives no size, 16:10 or 16:9 screenshots at around 1300 to 1600 pixels wide scale well in most layouts. That is a working convention, not a documented rule. Use the same dimensions for every screenshot in a set so a gallery doesn’t jump.

The platform limits above (2 MB, 5 MB, 8 MB) are ceilings. A compressed screenshot of an interface is usually far below any of them, and smaller files load faster for everyone who opens the listing.

• PNG for interfaces, JPEG for photographs. Flat colour and sharp text compress well without loss. web.dev notes that lossy compression is most effective on dense images with lots of noise and colour (web.dev).
• PNG or JPEG for anything you upload or share. Product Hunt lists JPG, PNG and GIF for the logo. Assume the same elsewhere unless a form says it accepts newer formats, and keep the share image in PNG or JPEG too.
• WebP or AVIF on your own site. web.dev describes WebP as supported in all modern browsers and AVIF as newer and less widely supported (source). Serve images at the size they’re displayed, with srcset and sizes for different screens.
• Run every file through a compressor before uploading. Launch visitors on phones wait for each one.
• Name files descriptively. Google recommends short, descriptive filenames over ones like image1.jpg (Google image SEO).

Many listing forms have a description field per image, and it usually becomes the alt text. The W3C’s guidance is to write the most concise description possible of the image’s purpose, to put the most important information first, and to leave out words like “image” or “picture” (W3C image tips). Its test: imagine reading the page aloud over the phone to someone who needs to understand it.

• Poor: “screenshot”
• Poor: “Ledgerleaf best invoice tracking app freelance invoicing software free”
• Good: “Ledgerleaf invoice list with two overdue invoices highlighted in red”

The second poor example is the one Google warns about: filling alt attributes with keywords makes for a bad experience and may cause a site to be seen as spam (source). Ledgerleaf is an invented name.

If an image contains text that appears nowhere else on the page, such as a benefit line set into the graphic, the W3C’s decision tree says to include that text in the alt attribute (source). For the share image, the Open Graph protocol says a page that specifies og:image should also specify og:image:alt, as a description of what is in the image and not a caption (source).

Product Hunt marks video as optional but recommended, takes it as a link, and says it doesn’t need to be polished (source). No platform page read for this guide sets a required length. As a working target, aim for the time it takes to show the main job done once, from start to result. For most small products that is well under two minutes.

• Start with the product on screen. No logo animation, no “hi, I’m…”. A viewer should see what the product is before they have a reason to stop watching.
• Show one path. The main job, with realistic data, at a speed a viewer can follow.
• Make it work muted, and caption it. Captions are how people who are deaf or hard of hearing follow a video, and WCAG requires them for prerecorded audio in synchronised media (W3C). They also serve everyone watching without sound.
• Record at the size it will be watched. A full 4K desktop shrunk into a listing is unreadable. Record a smaller window, zoomed in.

Where to host it

Since listings take a link, the video needs a public URL on a host that listing sites can embed. YouTube is the safe default. On your own site, YouTube’s embed code has a privacy-enhanced mode that swaps the domain to youtube-nocookie.com, and embedded videos that autoplay don’t count as views (YouTube help).

If you want the video to show in Google’s video results for your own page, Google requires the video to be embedded on an indexed watch page with a valid thumbnail at a stable URL, and recommends VideoObject structured data. A video embedded from a third-party platform may be indexed on both your page and the platform’s (Google video SEO).

Product Hunt also accepts an interactive demo, a clickable walkthrough people can try without signing up (source). If your product needs an account before it shows anything, that or a sandbox does more than a video.

1. Open each screenshot at the size a listing shows it. Can you read the text?
2. Confirm every screenshot in the set has the same dimensions.
3. Check the logo at 32 pixels. Does it still read?
4. Run your homepage through the social preview and meta tag checker. Is og:image an absolute URL that loads, with width, height and alt set?
5. Watch the video muted, on a phone.
6. Open the video link in a private window to confirm it’s public.
7. Paste alt text for each image into your launch document, next to the tagline and description.