OG image preview
Paste a live URL to see the card people get when you share it on X, LinkedIn, Slack or iMessage. We read your Open Graph tags, measure the real share image against 1200×630 and tell you exactly what to fix before launch day.
The 1200×630 rule
- 1200×630 pixels, a 1.91:1 ratio. It's the size Facebook, LinkedIn, X and Slack all design their large card around, so one image works everywhere.
- PNG or JPG, ideally under 1 MB. X skips images over 5 MB, and smaller files load before the person scrolls past.
- Never below 600×315. Smaller images are shown as a little thumbnail beside the text, or dropped.
- One idea, big type. Your product name and a short headline, readable when the card is about 500px wide on a phone. Keep it away from the edges.
- A full https:// URL. Relative paths and http images fail in more apps than you'd expect.
The tags every page needs
Put these in the <head> of the HTML your server sends, with your own values:
<meta property="og:title" content="Turn your GitHub repo into a launch kit" />
<meta property="og:description" content="Launch copy and images, written from your code." />
<meta property="og:image" content="https://your-app.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Your app's name and headline on a plain background" />
<meta property="og:url" content="https://your-app.com/" />
<meta name="twitter:card" content="summary_large_image" />The width, height and alt tags are optional but worth it: with the size declared, Facebook and LinkedIn can show the image on the very first share instead of waiting to download it.
Common pitfalls
Tags added by JavaScript
Link previewers don't run JavaScript. If your app sets its title and og:image in the browser, which many AI-built single-page apps do, crawlers see an empty page. Put the tags in the HTML the server sends.
A relative image URL
og:image="/og.png" works in a browser and fails in most crawlers. Use the full https:// address.
SVG or a tiny logo
SVGs aren't shown by Facebook, X or LinkedIn, and anything under 600×315 becomes a thumbnail. Export a PNG or JPG at 1200×630.
Text too close to the edges
Some apps crop a few pixels, and the card is often shown around 500px wide. Keep the headline large, centred and well inside the frame.
A login wall or a blocked crawler
If the page or the image needs a login, redirects to one, or is blocked in robots.txt, the preview is blank. The image has to be publicly reachable too.
An old cached card
Apps cache the first card they see, sometimes for days. After fixing your tags, refresh it with the Facebook Sharing Debugger or LinkedIn Post Inspector, and share a fresh link to test.
The other launch images
Your OG image covers every shared link. A launch needs a few more sizes:
- Product Hunt gallery: 1270×760. Three to five images, leading with the result rather than your login screen, plus a 240×240 thumbnail.
- X and LinkedIn launch posts: 1600×900. A 16:9 image attached to the post itself, not just the link card.
The Product Hunt launch checklist covers every size and launch-day step, and the Product Hunt tagline checker gets your 60-character tagline right. Built with Cursor, Lovable, Bolt or v0? Read how to launch a vibe-coded app for the other SEO basics AI builders skip.
OG preview FAQ
What size should an Open Graph image be?
1200×630 pixels, a 1.91:1 ratio, as a PNG or JPG. Keep it under 1 MB if you can and well under 5 MB, which is where X stops showing images. Anything smaller than 600×315 is shown as a small thumbnail or not at all, and keep your headline away from the edges because some apps crop a little.
Why isn't my link showing a preview image?
Usually one of five things: there's no og:image tag, the image URL is relative instead of a full https:// address, the image is an SVG, the page or image needs a login or blocks crawlers, or the app cached an old version. Paste the URL above and the checklist tells you which one it is.
Why does my card look different on X, LinkedIn and Slack?
Each app crops and trims in its own way. X needs twitter:card set to summary_large_image for the full-width image, LinkedIn and Slack cut long titles after a line or two, and every app caches what it saw the first time. The preview here shows the common large card, which is the layout all of them are based on.
Does this tool make an OG image for me?
No, it reads the tags and the image you already have and tells you what to fix. If you want one made, LaunchLoop reads your repo and live site and renders a 1200×630 OG image in your brand colours, along with the X and Product Hunt images and your launch copy. The free preview shows watermarked versions of all three; the full kit is £19.
Is the OG preview free?
Yes, with no sign-up and no card. It fetches the public page and its share image the way a link previewer would, as LaunchLoopBot, and doesn't save the URL or the results.